Documentation Title or Section

Example of disappear

Issue Description or Suggestion

import { AStageAnimate } from '@visactor/vrender-animate';

class CustomDisappear extends AStageAnimate {
protected currentAnimationRatio = 0;
protected animationTime = 0;

constructor(from: null, to: null, duration: number, easing: EasingType, params: any) {
super(from, to, duration, easing, params);
}

onUpdate(end: boolean, ratio: number, out: any): void {
super.onUpdate(end, ratio, out);
console.log('onUpdate customDisappear class');
}

/**

• 获取基于动画进度的时间
  */
  protected getAnimationTime(): number {
  if (this.currentAnimationRatio > 0) {
  return this.animationTime;
  }
  return Date.now() / 1000.0;
  }

protected afterStageRender(stage: any, canvas: HTMLCanvasElement): void {
console.log('afterStageRender customDisappear class');
}
}

const spec: IChartSpec = {
type: 'bar',
data: {
id: 'barData',
values: [
{ type: 'Nail polish', country: 'Africa', value: 4229 },
{ type: 'Nail polish', country: 'EU', value: 4376 },
{ type: 'Nail polish', country: 'China', value: 3054 },
{ type: 'Nail polish', country: 'USA', value: 12814 },
{ type: 'Eyebrow pencil', country: 'Africa', value: 3932 },
{ type: 'Eyebrow pencil', country: 'EU', value: 3987 },
{ type: 'Eyebrow pencil', country: 'China', value: 5067 },
{ type: 'Eyebrow pencil', country: 'USA', value: 13012 },
{ type: 'Rouge', country: 'Africa', value: 5221 },
{ type: 'Rouge', country: 'EU', value: 3574 },
{ type: 'Rouge', country: 'China', value: 7004 },
{ type: 'Rouge', country: 'USA', value: 11624 },
{ type: 'Lipstick', country: 'Africa', value: 9256 },
{ type: 'Lipstick', country: 'EU', value: 4376 },
{ type: 'Lipstick', country: 'China', value: 9054 },
{ type: 'Lipstick', country: 'USA', value: 8814 }
]
},
xField: 'type',
yField: 'value',
seriesField: 'country',
animationDisappear: {
/**
* use custom class
/
// callBack: CustomDisappear,
/*
* use custom function
*/
callBack: (...params: any[]) => {
console.log('animationDisappear', ...params);
},
duration: 1500
}
};