G2 动画相关

[pearmini]

G2 动画

动画相关的一些 idea。

Axis 动画在 G2 里面做

实现思路大概如下:

// 对各个部分分别 diff 之后做动画
function updateAxis(oldAis, newAxis, options) {
  const oldTicks = ticksOf(oldAis);
  const newTicks = ticksOf(newAxis);
  const { enter, update, exit } = diff(oldTicks, newTicks);
  for (const tick of enter) fadeIn(tick);
  for (const tick of enter) move(tick);
  for (const tick of exit) fadeOut(tick);
}

甚至动画函数可以通过 options 生成。

function createUpdateCompositeElement(descriptor) {
  return (old, new) => {}
}

const updateAxis = createUpdateCompositeElement({
  title: {
    enter: () => {},
    exit: () => {},
    update: () => {},
    diff: () => {},
  },
  axis: {  // className
    enter: () => {},
    exit: () => {},
    update: () => {},
    diff: () => {},
  },
});

g-animation

之后也许可以 G2 中的一些动画沉淀到 g-animation，供各个栈通用。初步想法是使用方式有下面两种：

// 第一种
function fadeIn(options) {
  const keyframes = [];
  return keyframes;
}

const keyframes = fadeIn(options);
shape.animate(keyframes, {});

// 第二种
function fadeIn(shape, options) {
  const keyframes = [];
  shape.animate(keyframes);
}

fadeIn(shape, options);