动画是在AnimateLayer动画层，播放节点和连线时间线上的不同状态。

一、播放流程

topology动画播放过程 (1).png

播放动画方式一

预览时自动播放，设置节点/连线的animatePlay属性即可。

播放动画方式二

// 修改动画帧数组，需要先准备动画数据环境
0. pen.initAnimate();

  1. 播放动画： pen.startAnimate();
  2. 暂停动画： pen.pauseAnimate();
  3. 停止动画： pen.stopAnimate(); // 停止动画指下次从0开始播放

每次代码调整过node.animateFrames，可能需要执行node.initAnimate()，恢复到初始状态

不要在for循环中执行上面操作

播放动画方式三

// 标记一组节点为相同tag
topology.animateLayer.readyPlay(tag);
topology.animateLayer.animate();

播放动画方式四

for(…) {
pen.animateStart = Date.now();
}
topology.animateLayer.readyPlay();
topology.animateLayer.animate();

二、节点动画

节点动画用帧表示，帧的数据为Node的animateFrames。

animateFrames

名称 类型 是否必选 描述
duration number 是 当前帧播放时长
start number 否 动画层添加节点AnimateLayer.addNode自动计算。相对于整个动画时长，当前帧在什么时候播放。
end number 否 动画层添加节点AnimateLayer.addNode自动计算。相对于整个动画时长，当前帧在什么时候结束。
state Node 是 当前帧，节点显示状态
linear boolean 否 动画属性是否线性变化
initState Node 否 当前帧播放前，初始状态。

自动计算。

如何设置节点动画

  1. // 1. 设置node.animateFrames
  3. // 复制当前节点状态
  4. const state = Node.cloneState(node);
  5. // 修改状态位置
  6. state.rect.y -= 10;
  7. state.rect.ey -= 10;
  8. node.animateFrames.push({
  9.   duration: 100,
  10.   linear: true,
  11.   state
  12. });
  14. // 回到初始状态
  15. const state2 = Node.cloneState(node);
  16. node.animateFrames.push({
  17.   duration: 100,
  18.   linear: true,
  19.   state: state2
  20. });
  22. node.animateDuration = 0;
  23. for (const item of node.animateFrames) {
  24.   node.animateDuration += item.duration;
  25. }
  27. // 修改动画帧数组，需要先准备动画数据环境
  28. node.initAnimate();
  30. // A 开始播放
  31. node.startAnimate();
  33. // B 停止播放
  34. node.stopAnimate();
  1. // 参考源码中的函数：
  2. onChangeAnimate() {
  3.     if (this.props.data.animateType === 'custom') {
  4.       return;
  5.     }
  7.     this.props.data.animateFrames = [];
  8.     const state = Node.cloneState(this.props.data);
  9.     switch (this.props.data.animateType) {
  10.       case 'upDown':
  11.         state.rect.y -= 10;
  12.         state.rect.ey -= 10;
  13.         this.props.data.animateFrames.push({
  14.           duration: 100,
  15.           linear: true,
  16.           state
  17.         });
  18.         this.props.data.animateFrames.push({
  19.           duration: 100,
  20.           linear: true,
  21.           state: Node.cloneState(this.props.data)
  22.         });
  23.         this.props.data.animateFrames.push({
  24.           duration: 200,
  25.           linear: true,
  26.           state: Node.cloneState(state)
  27.         });
  28.         break;
  29.       case 'leftRight':
  30.         state.rect.x -= 10;
  31.         state.rect.ex -= 10;
  32.         this.props.data.animateFrames.push({
  33.           duration: 100,
  34.           linear: true,
  35.           state: Node.cloneState(state)
  36.         });
  37.         state.rect.x += 20;
  38.         state.rect.ex += 20;
  39.         this.props.data.animateFrames.push({
  40.           duration: 80,
  41.           linear: true,
  42.           state: Node.cloneState(state)
  43.         });
  44.         state.rect.x -= 20;
  45.         state.rect.ex -= 20;
  46.         this.props.data.animateFrames.push({
  47.           duration: 50,
  48.           linear: true,
  49.           state: Node.cloneState(state)
  50.         });
  51.         state.rect.x += 20;
  52.         state.rect.ex += 20;
  53.         this.props.data.animateFrames.push({
  54.           duration: 30,
  55.           linear: true,
  56.           state: Node.cloneState(state)
  57.         });
  58.         this.props.data.animateFrames.push({
  59.           duration: 300,
  60.           linear: true,
  61.           state: Node.cloneState(this.props.data)
  62.         });
  63.         break;
  64.       case 'heart':
  65.         state.rect.x -= 5;
  66.         state.rect.ex += 5;
  67.         state.rect.y -= 5;
  68.         state.rect.ey += 5;
  69.         state.rect.width += 5;
  70.         state.rect.height += 10;
  71.         this.props.data.animateFrames.push({
  72.           duration: 100,
  73.           linear: true,
  74.           state
  75.         });
  76.         this.props.data.animateFrames.push({
  77.           duration: 400,
  78.           linear: true,
  79.           state: Node.cloneState(this.props.data)
  80.         });
  81.         break;
  82.       case 'success':
  83.         state.strokeStyle = '#237804';
  84.         this.props.data.animateFrames.push({
  85.           duration: 100,
  86.           linear: true,
  87.           state
  88.         });
  89.         this.props.data.animateFrames.push({
  90.           duration: 100,
  91.           linear: true,
  92.           state: Node.cloneState(this.props.data)
  93.         });
  94.         state.strokeStyle = '#237804';
  95.         this.props.data.animateFrames.push({
  96.           duration: 100,
  97.           linear: true,
  98.           state
  99.         });
  100.         this.props.data.animateFrames.push({
  101.           duration: 100,
  102.           linear: true,
  103.           state: Node.cloneState(this.props.data)
  104.         });
  105.         state.strokeStyle = '#237804';
  106.         state.fillStyle = '#389e0d22';
  107.         this.props.data.animateFrames.push({
  108.           duration: 3000,
  109.           linear: true,
  110.           state
  111.         });
  112.         break;
  113.       case 'warning':
  114.         state.strokeStyle = '#fa8c16';
  115.         state.dash = 2;
  116.         this.props.data.animateFrames.push({
  117.           duration: 300,
  118.           linear: true,
  119.           state
  120.         });
  121.         state.strokeStyle = '#fa8c16';
  122.         state.dash = 0;
  123.         this.props.data.animateFrames.push({
  124.           duration: 500,
  125.           linear: true,
  126.           state: Node.cloneState(state)
  127.         });
  128.         state.strokeStyle = '#fa8c16';
  129.         state.dash = 2;
  130.         this.props.data.animateFrames.push({
  131.           duration: 300,
  132.           linear: true,
  133.           state: Node.cloneState(state)
  134.         });
  135.         break;
  136.       case 'error':
  137.         state.strokeStyle = '#cf1322';
  138.         state.fillStyle = '#cf132222';
  139.         this.props.data.animateFrames.push({
  140.           duration: 100,
  141.           linear: true,
  142.           state
  143.         });
  144.         break;
  145.       case 'show':
  146.         state.strokeStyle = '#fa541c';
  147.         state.rotate = -10;
  148.         this.props.data.animateFrames.push({
  149.           duration: 100,
  150.           linear: true,
  151.           state: Node.cloneState(state)
  152.         });
  153.         state.rotate = 10;
  154.         this.props.data.animateFrames.push({
  155.           duration: 100,
  156.           linear: true,
  157.           state: Node.cloneState(state)
  158.         });
  159.         state.rotate = 0;
  160.         this.props.data.animateFrames.push({
  161.           duration: 100,
  162.           linear: true,
  163.           state: Node.cloneState(state)
  164.         });
  165.         break;
  166.     }
  168.     this.onAnimateDuration();
  169.   }

三、连线动画

连线动画，目前仅为从起点到终点的动态流量显示。

连线动画属性

名称 类型 是否必选 描述
animateColor string 否 动画颜色
animateSpan number 是 连线动画移动大小，像素
animateType string 否 来自于pen。动画播放类型：
空（默认），
beads（水珠流动），
dot（圆点），
comet（彗星）
animatePos number 否 动画当前位置，自动计算。 
  1. // 1. 设置动画类型，默认
  2. line.animateType = '';
  4. // A 开始播放
  5. node.startAnimate();
  7. // B 停止播放
  8. node.stopAnimate();

四、自动播放动画

设置节点/连线的animatePlay属性即可。canvas.open的时候，就好自动播放。

五、自动播放下一个动画

置节点/连线的nextAnimate属性值为下一个节点/连线的tags数组中的一个值。此节点/连线动画播放结束时，自动播放下一个动画。

六、动画时长

节点的动画时长由动画帧数组决定；连线的动画时长与连线长度和播放速度animateSpan有关。