动画

G2 提供了四种动画场景类型

appear: 初始化时的入场动画
enter: 更新时的出现动画
update: 更新时的变化动画
leave: 销毁时的离开动画

配置概览

// 内置的动画
interface AnimationMap {
  appear: 'clip-in' | 'zoom-in' | 'path-in' | 'sacle-in-x' | 'scale-in-y' | 'fan-in' | 'fade-in'
  enter: 'clip-in' | 'zoom-in' | 'path-in' | 'sacle-in-x' | 'scale-in-y' | 'fan-in' | 'fade-in'
  update: 'fade-in' | 'fan-in'
  leave: 'line-width-out' | 'zoom-out' | 'path-out' | 'fade-out'
}
interface AnimateCfg<T> {
  readonly animation?: AnimationMap[T]; // 动画执行函数
  readonly easing?: string | (data: Datum) => string;; // 动画缓动函数
  readonly duration?: number | (data: Datum) => number; // 动画执行时间
  readonly delay?: number | (data: Datum) => number;; // 动画延迟时间
  readonly callback?: () => any; // 动画执行结束后的回调函数
  readonly repeat?: boolean; // 动画是否重复
}
interface AnimateOption {
  appear?: AnimateCfg<'appear'> | false | null; // 初始化时的入场动画
  enter?: AnimateCfg<'enter'> | false | null; // 更新时新增元素的入场动画
  update?: AnimateCfg<'update'> | false | null; // 更新时的变化动画
  leave?: AnimateCfg<'leave'> | false | null; // 销毁动画配置
}

应用示例

import { Chart } from "@antv/g2";
const data = new Array(10)
  .fill(undefined)
  .map((v, i) => ({ x: i, y: parseInt("" + Math.random() * 10) }));
const chart = new Chart({
  container: "chart",
  width: 800,
  height: 300,
});
const grom = chart.line().position("x*y").shape("smooth");
grom.animate({
  appear: {
    animation: "fade-in",
    easing: "easeQuadIn", // 动画缓动效果
    delay: 1000, // 动画延迟执行时间
    duration: 600, // 动画执行时间
  },
});
chart.data(data);
chart.render();

动画 ​

配置概览 ​

应用示例 ​

动画

配置概览

应用示例