自定义动画

G2 提供了一套动画注册机制，主要用于：

  • 按需引用需要的动画执行函数。
  • 帮助用户自定义动画执行函数。
  1. type Animation = (
  2.   element: IGroup | IShape,
  3.   animateCfg: AnimateCfg,
  4.   cfg: AnimateExtraCfg,
  5. ) => void;
  6. /**
  7.  * 根据名称获取对应的动画执行函数
  8.  * @param type 动画函数名称
  9.  */
  10. export function getAnimation(type: string) {
  11.   return ANIMATIONS_MAP[type.toLowerCase()];
  12. }
  14. /**
  15.  * 注册动画执行函数
  16.  * @param type 动画执行函数名称
  17.  * @param animation 动画执行函数
  18.  */
  19. export function registerAnimation(type: string, animation: Animation) {
  20.   ANIMATIONS_MAP[type.toLowerCase()] = animation;
  21. }

示例

  1. import { registerAnimation } from '@antv/g2';
  3. // Step 1: 定义动画执行函数
  4. function fadeIn(
  5.   shape: IShape | IGroup,
  6.   animateCfg: AnimateCfg,
  7.   cfg: AnimateExtraCfg,
  8. ) {
  9.   const endState = {
  10.     fillOpacity: isNil(shape.attr('fillOpacity'))
  11.       ? 1
  12.       : shape.attr('fillOpacity'),
  13.     strokeOpacity: isNil(shape.attr('strokeOpacity'))
  14.       ? 1
  15.       : shape.attr('strokeOpacity'),
  16.     opacity: isNil(shape.attr('opacity')) ? 1 : shape.attr('opacity'),
  17.   };
  18.   shape.attr({
  19.     fillOpacity: 0,
  20.     strokeOpacity: 0,
  21.     opacity: 0,
  22.   });
  23.   shape.animate(endState, animateCfg);
  24. }
  26. // Step 2: 注册动画执行函数
  27. registerAnimation('fadeIn', fadeIn);
  29. // Step 3: 使用
  30. chart.interval().animate({
  31.   appear: {
  32.     animation: 'fadeIn',
  33.   },
  34. });

API 链接。