Skip to content

animate

animate(options)

animate(options): ArrayAnimation

Changes value(s) from startValue to endValue within a certain period of time, invoking callbacks as the value(s) change.

Parameters

options: Partial<TAnimationBaseOptions<number[]> & TAnimationCallbacks<number[]> & object>

Returns

ArrayAnimation

Examples

animate({
startValue: 1,
endValue: 0,
onChange: (v) => {
obj.set('opacity', v);
// since we are running in a requested frame we should call `renderAll` and not `requestRenderAll`
canvas.renderAll();
}
});
Using lists:
animate({
startValue: [1, 2, 3],
endValue: [2, 4, 6],
onChange: ([x, y, zoom]) => {
canvas.zoomToPoint(new Point(x, y), zoom);
canvas.renderAll();
}
});

Defined in

src/util/animation/animate.ts:50

animate(options)

animate(options): ValueAnimation

Parameters

options: Partial<TAnimationBaseOptions<number> & TAnimationCallbacks<number> & object>

Returns

ValueAnimation

Defined in

src/util/animation/animate.ts:51

animate(options)

animate<T>(options): T extends ArrayAnimationOptions ? ArrayAnimation : ValueAnimation

Type Parameters

T extends Partial<TAnimationBaseOptions<number> & TAnimationCallbacks<number> & object> | Partial<TAnimationBaseOptions<number[]> & TAnimationCallbacks<number[]> & object>

Parameters

options: T

Returns

T extends ArrayAnimationOptions ? ArrayAnimation : ValueAnimation

Defined in

src/util/animation/animate.ts:52