自定义节点,执行path路径动画; about g6 HOT 3 OPEN

image.animate(
  (ratio) => {
    每一帧的操作，入参 ratio：这一帧的比例值（Number）返回值：这一帧需要变化的参数集（Object）
    const toMatrix = Util.transform(
      [1, 0, 0, 0, 1, 0, 0, 0, 1],// 当前矩阵
      [['t', 0, 0], // 平移到左上角]
    );
    return {
      matrix: toMatrix,
    };
  },
  {
    repeat: true,
    duration: 3000,
    easing: 'easeCubic',
  },
);
g6的transform本质上也是转化成矩阵形式：
matrix = transform(matrix, [
      ['t', minX, minY], // 平移到左上角
      ['s', ratio, ratio], // 缩放到正好撑着 minimap
      ['t', dx, dy], // 移动到画布中心
    ]);
t代表translate平移
s代表scale缩放
r代表rotate旋转

源码中的transform
/**
 * 根据 actions 来做 transform
 * @param m
 * @param actions
 */
export function transform(m: number[], actions: any[][]) {
  const matrix = m ? [].concat(m) : [1, 0, 0, 0, 1, 0, 0, 0, 1];


  for (let i = 0, len = actions.length; i < len; i++) {
    const action = actions[i];
    switch (action[0]) {
      case 't':
        leftTranslate(matrix, matrix, [action[1], action[2]]);
        break;
      case 's':
        leftScale(matrix, matrix, [action[1], action[2]]);
        break;
      case 'r':
        leftRotate(matrix, matrix, action[1]);
        break;
      case 'm':
        leftMultiply(matrix, matrix, action[1]);
        break;
      default:
        break;
    }
  }


  return matrix;
}
如s代表的缩放：
export function fromScaling(out, v) {
  out[0] = v[0];
  out[1] = 0;
  out[2] = 0;


  out[3] = 0;
  out[4] = v[1];
  out[5] = 0;


  out[6] = 0;
  out[7] = 0;
  out[8] = 1;
  return out;
}