2021-7-13 动画开始

76

有一种水博客的感觉。。。
就记录一下写的动画吧，用环路检测，安装了antv的算法包

import { detectDirectedCycle } from '@antv/algorithm'
// import { detectDirectedCycle, detectAllCycles } from '@antv/algorithm'

vertifyCircle () {
      const circle = detectDirectedCycle(this.model)
      console.log('circle', circle)
      if (circle) {
        this.circleNodeArr = Object.keys(circle)
        console.log('this.circleNodeArr', this.circleNodeArr)
        const lastnode = this.graph.getCellById(this.circleNodeArr[1])
        lastnode.isfirst = 1
        this.graph.trigger('signal', lastnode)
      }
    },

Object.keys() //键，冒号前的
Object.value() //值，冒号后的

遇到了一个问题就是他不会从第一个我指定的节点出发高亮，所以添加了isfirst来判断
这个是节点高亮

flash (cell) {
      const cellView = this.graph.findViewByCell(cell)
      if (cellView) {
        cellView.highlight()
        setTimeout(() => cellView.unhighlight(), 300)
      }
    },

this.graph.on('signal', cell => {
        if (cell.isEdge()) {
          const view = this.graph.findViewByCell(cell)
          if (view) {
            const token = Vector.create('circle', { r: 8, fill: '#feb662' })
            const target = cell.getTargetCell()
            setTimeout(() => {
              view.sendToken(token.node, 400, () => {
                if (target) {
                  this.graph.trigger('signal', target)
                }
              })
            }, 300)
          }
        } else {
          if (cell.isfirst === 1) {
            console.log('first')
            cell.isfirst = 0
          } else {
            this.flash(cell)
          }
          const edges = this.graph.model.getConnectedEdges(cell, {
            outgoing: true
          })
          const theEdge = edges.find(item =>
            this.circleNodeArr.includes(item.store.data.target.cell)
          )
          this.graph.trigger('signal', theEdge)
        }
      })

这个是监听，动画代码