mark.label 支持动画 #4668

逐步增加的意思是 label 依此出现的意思吗？

这张是动画中途还没有结束的图片 这张是结束的的图片，后面的文本是直接显示出来的 没有动态增加

就是希望 label 和柱子的动画可以统一对吧？

就是希望 label 和柱子的动画可以统一对吧？

对的对的 因为利用定时器使动画效果循环播放，文本没有统一导致效果不是很好

嗯嗯，目前 v4 的 label 不支持这个能力，如果真的需要的话，可以通过 point geometry + 自定义 text shape 的形式去实现。v5 暂时也不支持，但是未来会支持（优先级不是很高，可能今年年中才会支持）。

v5 版本可以看看这个例子：https://g2.antv.antgroup.com/examples/animation/group/#line，用 text mark 代替 label 的话目前是可以的。

v5 版本可以看看这个例子：https://g2.antv.antgroup.com/examples/animation/group/#line，用 text mark 代替 label 的话目前是可以的。

折线图这个效果的动画好像可以直接用'wave-in'实现 但是这样数值是没有变化的 只是显示的时间不同 我希望的是数值也是一个增长的状态

v5 版本可以看看这个例子：https://g2.antv.antgroup.com/examples/animation/group/#line，用 text mark 代替 label 的话目前是可以的。

v5 版本可以看看这个例子：https://g2.antv.antgroup.com/examples/animation/group/#line，用 text mark 代替 label 的话目前是可以的。

这种数值慢慢增长的效果

嗯嗯，echarts 这个例子的链接可以发我看看吗？

嗯嗯，echarts 这个例子的链接可以发我看看吗？

https://echarts.apache.org/examples/zh/editor.html?c=bar-background

嗯嗯，echarts 这个例子的链接可以发我看看吗？

https://echarts.apache.org/examples/zh/editor.html?c=bar-background

需要加上这几行代码

嗯嗯，我大概知道效果了。G2 5.0 目前没有内置这种动画，可以使用自定义动画实现，下面是一个简单的实现：

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
});

const data = [
  { genre: 'Sports', sold: 275 },
  { genre: 'Strategy', sold: 115 },
  { genre: 'Action', sold: 120 },
  { genre: 'Shooter', sold: 350 },
  { genre: 'Other', sold: 150 },
];

chart
  .interval()
  .data(data)
  .encode('x', 'genre')
  .encode('y', 'sold')
  .encode('color', 'genre')
  .animate('enterDuration', 1000);

chart
  .text()
  .data(data)
  .encode('x', 'genre')
  .encode('y', (d) => d.sold / 2)
  .encode('text', 'sold')
  .style('textAlign', 'center')
  .animate('enterType', GrowInY) // 使用自定义动画
  .animate('enterDuration', 1000);

chart.render();

// 自定义动画
function GrowInY(options) {
  const { duration } = options;
  return (from, to, value, coordinate) => {
    const [shape] = from;
    const { height } = coordinate.getOptions();
    const { y, text } = shape.style;
    const keyframes = [{ y: height }, { y }];
    const animation = shape.animate(keyframes, { fill: 'both', duration });
    const frame = () => {
      const { y: y1 } = shape.style;
      shape.style.text = map(y1, [height, y], [0, +text]) | 0;
    };
    animation.onframe = frame;
    animation.onfinish = frame;
    return animation;
  };
}

// 线性映射
function map(x, domain, range) {
  const [d0, d1] = domain;
  const [r0, r1] = range;
  const t = (x - d0) / (d1 - d0);
  return r0 * (1 - t) + r1 * t;
}

通过这个例子发现 G2 有几个点可以优化：

• 自定义动画也需要传入比例尺，目前是简单实现了一个比例尺的功能（map 函数）。
• label 也需要动画。
• 这种 label 改变位置的同时改变文本是否需要内置？

这个 issue 先打开，等上面几个优化点解决了再关闭。