使用processParallelEdges后，设置边的动画，拖动节点时，边的动画会自动停止 #4307

问题描述

使用processParallelEdges后，设置边的动画，拖动节点时，边的动画会自动停止。

重现链接

https://g6.antv.antgroup.com/zh/examples/scatter/edge/#edge

重现步骤

进到页面，将下方补充说明 中的代码全部复制到页面的代码中，在运行。

预期行为

使用processParallelEdges后，设置边的动画，拖动节点时，边的动画会自动停止。 期望使用processParallelEdges后，拖动节点，边的动画依然在

平台

• 操作系统: [macOS, Windows, Linux, React Native ...]
• 网页浏览器: [Google Chrome, Safari, Firefox]
• G6 版本: [4.8.5 ... ]

屏幕截图或视频（可选）

No response

补充说明（可选）

import G6 from '@antv/g6';

const lineDash = [4, 2, 1, 2]; G6.registerEdge( 'line-dash', { afterDraw(cfg, group) { // get the first shape in the group, it is the edge's path here= const shape = group.get('children')[0]; let index = 0; // Define the animation

},

}, 'quadratic', // extend the built-in edge 'cubic' );

const data = { nodes: [ { id: 'node1', x: 100, y: 100, label: 'Node 1', labelCfg: { position: 'top', }, }, { id: 'node2', x: 300, y: 200, color: '#40a9ff', label: 'Node 2', labelCfg: { position: 'left', offset: 10, }, }, ], edges: [ { id:"1", source: 'node1', target: 'node2', }, ], };

const container = document.getElementById('container'); const width = container.scrollWidth; const height = container.scrollHeight || 500; const graph = new G6.Graph({ container: 'container', width, height, modes: { // 内置 Behavior https://g6.antv.vision/zh/docs/manual/middle/states/defaultBehavior#%E5%86%85%E7%BD%AE-behavior default: [{ type: 'brush-select', trigger: 'drag',

                }, {
                    type: 'create-edge',
                    trigger: 'click',
                    key: 'shift',
                }, 'zoom-canvas', 'drag-node', "click-select"],
                addEdge: [{
                    type: 'brush-select',
                    trigger: 'drag',

                },
                {
                    type: 'create-edge',
                    trigger: 'drag', // 'click' by default. options: 'drag', 'click'
                }, 'zoom-canvas',],

            },

defaultEdge: { type: 'line-dash', style: { lineWidth: 2, stroke: '#bae7ff', }, }, }); graph.data(data); graph.render(); const edges = graph.save().edges; G6.Util.processParallelEdges(edges, 15, 'quadratic') var edge = graph.findById("1"); const group = edge.get('group') const shape = group.getFirst() let index = 2;

shape.animate( () => { index++; if (index > 9) { index = 0; } const res = { lineDash, lineDashOffset: -index, }; // returns the modified configurations here, lineDash and lineDashOffset here return res; }, { repeat: true, // whether executes the animation repeatly duration: 3000, // the duration for executing once }, );

if (typeof window !== 'undefined') window.onresize = () => { if (!graph || graph.get('destroyed')) return; if (!container || !container.scrollWidth || !container.scrollHeight) return; graph.changeSize(container.scrollWidth, container.scrollHeight); };