Logicflow 流程轨迹球

公司新项目引入了Logicflow制作流程图,记录一下实现的一个动画

效果：

kk 2023-03-28 22-22-03

import { h } from '@logicflow/core'
export default function registerMyline(lf) {
    lf.register('globe', ({ BezierEdge, BezierEdgeModel }) => {
        //继承贝塞尔曲线
        class view extends BezierEdge {
            constructor() {
                super()
            }
            getEdge() {
                const { model } = this.props
                const { properties } = model
                //定义球体
                const circleStyle = {
                    cs: '0',
                    cy: '-2',
                    r: '8', //半径为8
                    fill: 'red'
                }
                const anition = {
                    attributeName: 'cx',
                    path: properties.globePath,//svg轨迹路径
                    dur: properties.time,  //开始时间 用来控制球的速度
                    begin: properties.beginTime, //结束时间
                    fill: 'remove',
                    rotate: 'auto',
                    repeatCount: 'indefinite'
                }
                //调用Logicflow内部函数添加svg的g标签和动画标签
                return h('g', {}, [
                 
                    h('circle', { ...circleStyle }, {}, [h('animateMotion', { ...anition })])
                ])
            }

        }
        class ConnnectionModel extends BezierEdgeModel {
            constructor(data, graphModel) {
                super(data, graphModel)
            }
            setAttributes() {
                this.isAnimation = true
            }     
        }
        return {
            type: 'globe',
            view: view,
            model: ConnnectionModel
        }
    })
}