如何单独管理每个节点的动画

GoJS
1

我的每个节点都是根据自己连接的线段数来启动或关闭动画的。比如有a、b、c三个节点，a和b相连，那么a和b的动画会停止，c的动画会继续。

页面初始化会调用一次 setArrowTipAnimate 函数，检查画布上没有连接线段的节点，并添加启动动画。随后的绘制也根据节点的连接情况开始或停止动画。
总而言之，当节点没有连接线时，启动节点的动画，反之，关闭动画。

这样设计合理吗？以下是主要代码片段

const animation1 = new go.Animation()
const animation2 = new go.Animation()
animation1.duration = animation2.duration = 1000
animation1.reversible = animation2.reversible = true
animation1.runCount = animation2.runCount = Infinity

// 通过对应的事件调用该函数并传入参数
function setArrowTipAnimate(status) {
      const nodes = myDiagram.model.nodeDataArray.map(m => myDiagram.findNodeForKey(m.key))
      const linkConnectedNode = nodes.filter(v => v.findLinksConnected().count)
      const notLinkConectedNode = nodes.filter(v => !v.findLinksConnected().count)
      notLinkConectedNode.forEach(node => {
        animation1.add(node.elt(6), 'opacity', node.elt(6).opacity, 1)
        animation1.add(node.elt(7), 'opacity', node.elt(7).opacity, 1)
        animation1.add(node.elt(8), 'opacity', node.elt(8).opacity, 1)
        animation1.add(node.elt(9), 'opacity', node.elt(9).opacity, 1)
      })
      linkConnectedNode.forEach(node => {
        animation2.add(node.elt(6), 'opacity', node.elt(6).opacity, 1)
        animation2.add(node.elt(7), 'opacity', node.elt(7).opacity, 1)
        animation2.add(node.elt(8), 'opacity', node.elt(8).opacity, 1)
        animation2.add(node.elt(9), 'opacity', node.elt(9).opacity, 1)
      })
      if (status === 'stop') {
        animation2.stop()
        animation1.start()
      } else if (status === 'start') {
        animation1.start()
        animation2.stop()
      }
    }

// 在nodeTemplate里调用生成这个需要进行动画的元素
function makeArrowTip(spot, angle, fig) {
      return $(go.Shape,
        {
          name: 'ARROWTIP',
          figure: fig,
          alignment: spot,
          alignmentFocus: spot.opposite(),
          width: 22,
          height: 18,
          fill: '#87CEFA',
          angle: angle,
          strokeWidth: 0,
          opacity: 0.001
        })
    }