animate

Call Signature

animate(options): ArrayAnimation

Defined in: src/util/animation/animate.ts:50

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

Parameters

options

Partial

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();
  }
});

Call Signature

animate(options): ValueAnimation

Defined in: src/util/animation/animate.ts:51

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

Parameters

options

Partial

Returns

ValueAnimation

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();
  }
});

Call Signature

animate<T>(options): T extends Partial<TAnimationBaseOptions<number[]> & TAnimationCallbacks<number[]> & object> ? ArrayAnimation : ValueAnimation

Defined in: src/util/animation/animate.ts:52

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

Type Parameters

T

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

Parameters

options

T

Returns

T extends Partial<TAnimationBaseOptions<number[]> & TAnimationCallbacks<number[]> & object> ? ArrayAnimation : ValueAnimation

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();
  }
});