@antv/g6
Version:
graph visualization frame work
1 lines • 79.2 kB
JSON
{"expireTime":9007200828528711000,"key":"transformer-remark-markdown-html-eb42fb13271e44fd67900b7c24af559b-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"<p>G6 中的动画分为两个层次：</p>\n<ul>\n<li>全局动画：全局性的动画，图整体变化时的动画过渡；</li>\n<li>元素（边和节点）动画：节点或边上的独立动画。</li>\n</ul>\n<br />\n## 全局动画\nG6 的全局动画指通过图实例进行某些全局操作时，产生的动画效果。例如：\n<ul>\n<li><code class=\"language-text\">graph.updateLayout(cfg)</code> 布局的变化</li>\n<li><code class=\"language-text\">graph.changeData()</code> 数据的变化</li>\n</ul>\n<p>通过实例化图时配置 <code class=\"language-text\">animate: true</code>，可以达到每次进行上述操作时，动画效果变化的目的。配合 <code class=\"language-text\">animateCfg</code> 配置动画参数：<br /></p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">const</span> graph <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">G6<span class=\"token punctuation\">.</span>Graph</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n <span class=\"token comment\">// ... // 图的其他配置项</span>\n animate<span class=\"token punctuation\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// Boolean，切换布局时是否使用动画过度，默认为 false</span>\n animateCfg<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n duration<span class=\"token punctuation\">:</span> <span class=\"token number\">500</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// Number，一次动画的时长</span>\n easing<span class=\"token punctuation\">:</span> <span class=\"token string\">'linearEasing'</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// String，动画函数，可选项：''</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h3 id=\"easing-函数\"><a href=\"#easing-%E5%87%BD%E6%95%B0\" aria-label=\"easing 函数 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>easing 函数</h3>\n<p>easing 函数是指动画的函数。例如线性插值、先快后慢等。<br />G6 支持所有 d3 中的动画函数。因此，上面代码中 <code class=\"language-text\">animateCfg</code> 配置中的 String 类型的 <code class=\"language-text\">easing</code> 可以取值有：<br /><code class=\"language-text\">'easeLinear'</code> ，<br /><code class=\"language-text\">'easePolyIn'</code> ，<code class=\"language-text\">'easePolyOut'</code> ， <code class=\"language-text\">'easePolyInOut'</code> ，<br /><code class=\"language-text\">'``easeQuad``'</code> ，<code class=\"language-text\">'easeQuadIn'</code> ，<code class=\"language-text\">'easeQuadOut'</code> ， <code class=\"language-text\">'easeQuadInOut'</code> ，<br />...... <br />更多取值及所有取值含义参见：<a href=\"https://github.com/d3/d3/blob/master/API.md#easings-d3-ease\" target=\"_self\" rel=\"nofollow\">d3 Easings</a>。</p>\n<h2 id=\"元素动画\"><a href=\"#%E5%85%83%E7%B4%A0%E5%8A%A8%E7%94%BB\" aria-label=\"元素动画 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>元素动画</h2>\n<p>由于 G6 的内置节点和边是没有动画的，需要实现节点和边上的动画需要通过<a href=\"https://www.yuque.com/antv/g6/self-node\" target=\"_self\" rel=\"nofollow\">自定义节点</a>、<a href=\"https://www.yuque.com/antv/g6/self-edge\" target=\"_self\" rel=\"nofollow\">自定义边</a>时复写 <code class=\"language-text\">afterDraw</code> 实现。</p>\n<h3 id=\"节点动画\"><a href=\"#%E8%8A%82%E7%82%B9%E5%8A%A8%E7%94%BB\" aria-label=\"节点动画 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>节点动画</h3>\n<p>关于节点动画，以下面三个动画示例进行讲解：</p>\n<ul>\n<li>节点上图形的动画（如下图左）；</li>\n<li>增加带有动画的背景图形（如下图中）；</li>\n<li>节点上部分图形的旋转动画（如下图右）。</li>\n</ul>\n<img src='https://cdn.nlark.com/yuque/0/2019/gif/156681/1571195005968-ecf8690b-707a-4acd-bcda-e9b49e74742f.gif#align=left&display=inline&height=61&name=node-animate-shape.gif&originHeight=61&originWidth=145&search=&size=22895&status=done&width=145' alt='download' width='150'/>\n<img src='https://cdn.nlark.com/yuque/0/2019/gif/156681/1571195552693-6faff5bc-8d9a-4e4e-99fd-7bd7fa9c428d.gif#align=left&display=inline&height=61&name=node-animate-background.gif&originHeight=61&originWidth=145&search=&size=35273&status=done&width=145' alt='download' width='150'/>\n<img src='https://cdn.nlark.com/yuque/0/2019/gif/156681/1571196247789-91a9d9a3-754d-481f-9f63-901b0e16f83c.gif#align=left&display=inline&height=61&name=node-animate-innerimage.gif&originHeight=61&originWidth=145&search=&size=29110&status=done&width=145' alt='download' width='150'/>\n<br />\n<p>以上三个动画节点的 demo 代码见：\n<a href=\"https://codepen.io/Yanyan-Wang/pen/QWWEEWe\" target=\"_self\" rel=\"nofollow\">节点动画</a>。</p>\n<h4 id=\"节点上图形的动画\"><a href=\"#%E8%8A%82%E7%82%B9%E4%B8%8A%E5%9B%BE%E5%BD%A2%E7%9A%84%E5%8A%A8%E7%94%BB\" aria-label=\"节点上图形的动画 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>节点上图形的动画</h4>\n<p>节点上的动画，即每一帧发生变化的是节点上的某一个图形。<br /></p>\n<img src='https://cdn.nlark.com/yuque/0/2019/gif/156681/1571195005968-ecf8690b-707a-4acd-bcda-e9b49e74742f.gif#align=left&display=inline&height=61&name=node-animate-shape.gif&originHeight=61&originWidth=145&search=&size=22895&status=done&width=145' alt='download' width='150'/>\n<p>本例实现节点放大缩小，通过 <code class=\"language-text\">group.get('children')[0]</code> 找到需要更新的图形（这里找到该节点上第 0 个图形），然后调用该图形的 <code class=\"language-text\">animate</code> 方法指定动画的参数及每一帧的变化（ <code class=\"language-text\">onFrame</code> 方法返回每一帧需要变化的参数集）。</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token comment\">// 放大、变小动画</span>\n<span class=\"token constant\">G6</span><span class=\"token punctuation\">.</span><span class=\"token function\">registerNode</span><span class=\"token punctuation\">(</span>\n <span class=\"token string\">'circle-animate'</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">{</span>\n <span class=\"token function\">afterDraw</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">cfg<span class=\"token punctuation\">,</span> group</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token comment\">// 获取该节点上的第一个图形</span>\n <span class=\"token keyword\">const</span> shape <span class=\"token operator\">=</span> group<span class=\"token punctuation\">.</span><span class=\"token function\">get</span><span class=\"token punctuation\">(</span><span class=\"token string\">'children'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n <span class=\"token comment\">// 该图形的动画</span>\n shape<span class=\"token punctuation\">.</span><span class=\"token function\">animate</span><span class=\"token punctuation\">(</span>\n <span class=\"token punctuation\">{</span>\n <span class=\"token comment\">// 动画重复</span>\n repeat<span class=\"token punctuation\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n <span class=\"token comment\">// 每一帧的操作，入参 ratio：这一帧的比例值（Number）。返回值：这一帧需要变化的参数集（Object）。</span>\n <span class=\"token function\">onFrame</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">ratio</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token comment\">// 先变大、再变小</span>\n <span class=\"token keyword\">const</span> diff <span class=\"token operator\">=</span> ratio <span class=\"token operator\"><=</span> <span class=\"token number\">0.5</span> <span class=\"token operator\">?</span> ratio <span class=\"token operator\">*</span> <span class=\"token number\">10</span> <span class=\"token punctuation\">:</span> <span class=\"token punctuation\">(</span><span class=\"token number\">1</span> <span class=\"token operator\">-</span> ratio<span class=\"token punctuation\">)</span> <span class=\"token operator\">*</span> <span class=\"token number\">10</span><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">let</span> radius <span class=\"token operator\">=</span> cfg<span class=\"token punctuation\">.</span>size<span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span><span class=\"token function\">isNaN</span><span class=\"token punctuation\">(</span>radius<span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span> radius <span class=\"token operator\">=</span> radius<span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n <span class=\"token comment\">// 返回这一帧需要变化的参数集，这里只包含了半径</span>\n <span class=\"token keyword\">return</span> <span class=\"token punctuation\">{</span>\n r<span class=\"token punctuation\">:</span> radius <span class=\"token operator\">/</span> <span class=\"token number\">2</span> <span class=\"token operator\">+</span> diff<span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token number\">3000</span><span class=\"token punctuation\">,</span>\n <span class=\"token string\">'easeCubic'</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 一次动画持续的时长为 3000，动画效果为 'easeCubic'</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token string\">'circle'</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 该自定义节点继承了内置节点 'circle'，除了被复写的 afterDraw 方法外，其他按照 'circle' 里的函数执行。</span>\n</code></pre></div>\n<h4 id=\"增加带有动画的背景图形\"><a href=\"#%E5%A2%9E%E5%8A%A0%E5%B8%A6%E6%9C%89%E5%8A%A8%E7%94%BB%E7%9A%84%E8%83%8C%E6%99%AF%E5%9B%BE%E5%BD%A2\" aria-label=\"增加带有动画的背景图形 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>增加带有动画的背景图形</h4>\n<p>在 <code class=\"language-text\">afterDraw</code> 方法中为已有节点添加额外的 shape ，并为这些新增的图形设置动画。<br /></p>\n<p>本例在 <code class=\"language-text\">afterDraw</code> 方法中，绘制了三个背景 circle ，分别使用不同的颜色填充，再调用 <code class=\"language-text\">animate</code> 方法实现这三个 circle 逐渐变大、变淡的动画。本例中没有使用 <code class=\"language-text\">onFrame</code> 函数，直接在 <code class=\"language-text\">animate</code> 函数的入参中设置每次动画结束时的最终目标样式，即半径增大 10，透明度降为 0.1。<br /></p>\n<img src='https://cdn.nlark.com/yuque/0/2019/gif/156681/1571195577156-137b37fe-bff5-470b-bbd2-2a7b253a6d8e.gif#align=left&display=inline&height=61&name=node-animate-background.gif&originHeight=61&originWidth=145&search=&size=35273&status=done&width=145' alt='download' width='150'/>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token constant\">G6</span><span class=\"token punctuation\">.</span><span class=\"token function\">registerNode</span><span class=\"token punctuation\">(</span>\n <span class=\"token string\">'background-animate'</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">{</span>\n <span class=\"token function\">afterDraw</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">cfg<span class=\"token punctuation\">,</span> group</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">let</span> r <span class=\"token operator\">=</span> cfg<span class=\"token punctuation\">.</span>size <span class=\"token operator\">/</span> <span class=\"token number\">2</span><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span><span class=\"token function\">isNaN</span><span class=\"token punctuation\">(</span>r<span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n r <span class=\"token operator\">=</span> cfg<span class=\"token punctuation\">.</span>size<span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">]</span> <span class=\"token operator\">/</span> <span class=\"token number\">2</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token comment\">// 第一个背景圆</span>\n <span class=\"token keyword\">const</span> back1 <span class=\"token operator\">=</span> group<span class=\"token punctuation\">.</span><span class=\"token function\">addShape</span><span class=\"token punctuation\">(</span><span class=\"token string\">'circle'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span>\n zIndex<span class=\"token punctuation\">:</span> <span class=\"token operator\">-</span><span class=\"token number\">3</span><span class=\"token punctuation\">,</span>\n attrs<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n x<span class=\"token punctuation\">:</span> <span class=\"token number\">0</span><span class=\"token punctuation\">,</span>\n y<span class=\"token punctuation\">:</span> <span class=\"token number\">0</span><span class=\"token punctuation\">,</span>\n r<span class=\"token punctuation\">,</span>\n fill<span class=\"token punctuation\">:</span> cfg<span class=\"token punctuation\">.</span>color<span class=\"token punctuation\">,</span>\n opacity<span class=\"token punctuation\">:</span> <span class=\"token number\">0.6</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token comment\">// 第二个背景圆</span>\n <span class=\"token keyword\">const</span> back2 <span class=\"token operator\">=</span> group<span class=\"token punctuation\">.</span><span class=\"token function\">addShape</span><span class=\"token punctuation\">(</span><span class=\"token string\">'circle'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span>\n zIndex<span class=\"token punctuation\">:</span> <span class=\"token operator\">-</span><span class=\"token number\">2</span><span class=\"token punctuation\">,</span>\n attrs<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n x<span class=\"token punctuation\">:</span> <span class=\"token number\">0</span><span class=\"token punctuation\">,</span>\n y<span class=\"token punctuation\">:</span> <span class=\"token number\">0</span><span class=\"token punctuation\">,</span>\n r<span class=\"token punctuation\">,</span>\n fill<span class=\"token punctuation\">:</span> <span class=\"token string\">'blue'</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 为了显示清晰，随意设置了颜色</span>\n opacity<span class=\"token punctuation\">:</span> <span class=\"token number\">0.6</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token comment\">// 第三个背景圆</span>\n <span class=\"token keyword\">const</span> back3 <span class=\"token operator\">=</span> group<span class=\"token punctuation\">.</span><span class=\"token function\">addShape</span><span class=\"token punctuation\">(</span><span class=\"token string\">'circle'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span>\n zIndex<span class=\"token punctuation\">:</span> <span class=\"token operator\">-</span><span class=\"token number\">1</span><span class=\"token punctuation\">,</span>\n attrs<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n x<span class=\"token punctuation\">:</span> <span class=\"token number\">0</span><span class=\"token punctuation\">,</span>\n y<span class=\"token punctuation\">:</span> <span class=\"token number\">0</span><span class=\"token punctuation\">,</span>\n r<span class=\"token punctuation\">,</span>\n fill<span class=\"token punctuation\">:</span> <span class=\"token string\">'green'</span><span class=\"token punctuation\">,</span>\n opacity<span class=\"token punctuation\">:</span> <span class=\"token number\">0.6</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n group<span class=\"token punctuation\">.</span><span class=\"token function\">sort</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 排序，根据 zIndex 排序</span>\n\n <span class=\"token comment\">// 第一个背景圆逐渐放大，并消失</span>\n back1<span class=\"token punctuation\">.</span><span class=\"token function\">animate</span><span class=\"token punctuation\">(</span>\n <span class=\"token punctuation\">{</span>\n r<span class=\"token punctuation\">:</span> r <span class=\"token operator\">+</span> <span class=\"token number\">10</span><span class=\"token punctuation\">,</span>\n opacity<span class=\"token punctuation\">:</span> <span class=\"token number\">0.1</span><span class=\"token punctuation\">,</span>\n repeat<span class=\"token punctuation\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 循环</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token number\">3000</span><span class=\"token punctuation\">,</span>\n <span class=\"token string\">'easeCubic'</span><span class=\"token punctuation\">,</span>\n <span class=\"token keyword\">null</span><span class=\"token punctuation\">,</span>\n <span class=\"token number\">0</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 无延迟</span>\n\n <span class=\"token comment\">// 第二个背景圆逐渐放大，并消失</span>\n back2<span class=\"token punctuation\">.</span><span class=\"token function\">animate</span><span class=\"token punctuation\">(</span>\n <span class=\"token punctuation\">{</span>\n r<span class=\"token punctuation\">:</span> r <span class=\"token operator\">+</span> <span class=\"token number\">10</span><span class=\"token punctuation\">,</span>\n opacity<span class=\"token punctuation\">:</span> <span class=\"token number\">0.1</span><span class=\"token punctuation\">,</span>\n repeat<span class=\"token punctuation\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 循环</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token number\">3000</span><span class=\"token punctuation\">,</span>\n <span class=\"token string\">'easeCubic'</span><span class=\"token punctuation\">,</span>\n <span class=\"token keyword\">null</span><span class=\"token punctuation\">,</span>\n <span class=\"token number\">1000</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 1 秒延迟</span>\n\n <span class=\"token comment\">// 第三个背景圆逐渐放大，并消失</span>\n back3<span class=\"token punctuation\">.</span><span class=\"token function\">animate</span><span class=\"token punctuation\">(</span>\n <span class=\"token punctuation\">{</span>\n r<span class=\"token punctuation\">:</span> r <span class=\"token operator\">+</span> <span class=\"token number\">10</span><span class=\"token punctuation\">,</span>\n opacity<span class=\"token punctuation\">:</span> <span class=\"token number\">0.1</span><span class=\"token punctuation\">,</span>\n repeat<span class=\"token punctuation\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 循环</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token number\">3000</span><span class=\"token punctuation\">,</span>\n <span class=\"token string\">'easeCubic'</span><span class=\"token punctuation\">,</span>\n <span class=\"token keyword\">null</span><span class=\"token punctuation\">,</span>\n <span class=\"token number\">2000</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 2 秒延迟</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token string\">'circle'</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h4 id=\"部分图形旋转动画\"><a href=\"#%E9%83%A8%E5%88%86%E5%9B%BE%E5%BD%A2%E6%97%8B%E8%BD%AC%E5%8A%A8%E7%94%BB\" aria-label=\"部分图形旋转动画 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>部分图形旋转动画</h4>\n<p>这一例也是在 <code class=\"language-text\">afterDraw</code> 方法中为已有节点添加额外的 shape （本例中为 image），并为这些新增的图形设置旋转动画。旋转动画较为复杂，需要通过矩阵的操作实现。<br /></p>\n<img src='https://cdn.nlark.com/yuque/0/2019/gif/156681/1571196247789-91a9d9a3-754d-481f-9f63-901b0e16f83c.gif#align=left&display=inline&height=61&name=node-animate-innerimage.gif&originHeight=61&originWidth=145&search=&size=29110&status=done&width=145' alt='download' width='150'/>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token constant\">G6</span><span class=\"token punctuation\">.</span><span class=\"token function\">registerNode</span><span class=\"token punctuation\">(</span>\n <span class=\"token string\">'inner-animate'</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">{</span>\n <span class=\"token function\">afterDraw</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">cfg<span class=\"token punctuation\">,</span> group</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">const</span> size <span class=\"token operator\">=</span> cfg<span class=\"token punctuation\">.</span>size<span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">const</span> width <span class=\"token operator\">=</span> size<span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">]</span> <span class=\"token operator\">-</span> <span class=\"token number\">12</span><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">const</span> height <span class=\"token operator\">=</span> size<span class=\"token punctuation\">[</span><span class=\"token number\">1</span><span class=\"token punctuation\">]</span> <span class=\"token operator\">-</span> <span class=\"token number\">12</span><span class=\"token punctuation\">;</span>\n <span class=\"token comment\">// 添加图片 shape</span>\n <span class=\"token keyword\">const</span> image <span class=\"token operator\">=</span> group<span class=\"token punctuation\">.</span><span class=\"token function\">addShape</span><span class=\"token punctuation\">(</span><span class=\"token string\">'image'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span>\n attrs<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n x<span class=\"token punctuation\">:</span> <span class=\"token operator\">-</span>width <span class=\"token operator\">/</span> <span class=\"token number\">2</span><span class=\"token punctuation\">,</span>\n y<span class=\"token punctuation\">:</span> <span class=\"token operator\">-</span>height <span class=\"token operator\">/</span> <span class=\"token number\">2</span><span class=\"token punctuation\">,</span>\n width<span class=\"token punctuation\">:</span> width<span class=\"token punctuation\">,</span>\n height<span class=\"token punctuation\">:</span> height<span class=\"token punctuation\">,</span>\n img<span class=\"token punctuation\">:</span> cfg<span class=\"token punctuation\">.</span>img<span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token comment\">// 该图片 shape 的动画</span>\n image<span class=\"token punctuation\">.</span><span class=\"token function\">animate</span><span class=\"token punctuation\">(</span>\n <span class=\"token punctuation\">{</span>\n <span class=\"token comment\">// 动画重复</span>\n repeat<span class=\"token punctuation\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n <span class=\"token comment\">// 每一帧的操作，入参 ratio：这一帧的比例值（Number）。返回值：这一帧需要变化的参数集（Object）。</span>\n <span class=\"token function\">onFrame</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">ratio</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token comment\">// 旋转通过矩阵来实现</span>\n <span class=\"token comment\">// 当前矩阵</span>\n <span class=\"token keyword\">const</span> matrix <span class=\"token operator\">=</span> Util<span class=\"token punctuation\">.</span>mat3<span class=\"token punctuation\">.</span><span class=\"token function\">create</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token comment\">// 目标矩阵</span>\n <span class=\"token keyword\">const</span> toMatrix <span class=\"token operator\">=</span> Util<span class=\"token punctuation\">.</span><span class=\"token function\">transform</span><span class=\"token punctuation\">(</span>matrix<span class=\"token punctuation\">,</span> <span class=\"token punctuation\">[</span>\n <span class=\"token punctuation\">[</span><span class=\"token string\">'r'</span><span class=\"token punctuation\">,</span> ratio <span class=\"token operator\">*</span> Math<span class=\"token punctuation\">.</span><span class=\"token constant\">PI</span> <span class=\"token operator\">*</span> <span class=\"token number\">2</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token comment\">// 返回这一帧需要的参数集，本例中只有目标矩阵</span>\n <span class=\"token keyword\">return</span> <span class=\"token punctuation\">{</span>\n matrix<span class=\"token punctuation\">:</span> toMatrix<span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token number\">3000</span><span class=\"token punctuation\">,</span>\n <span class=\"token string\">'easeCubic'</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token string\">'rect'</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h3 id=\"边动画\"><a href=\"#%E8%BE%B9%E5%8A%A8%E7%94%BB\" aria-label=\"边动画 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>边动画</h3>\n<p>关于边动画，以下面三个动画示例进行讲解：</p>\n<ul>\n<li>圆点在沿着线运动（下图左）；</li>\n<li>虚线运动的效果（下图中，gif 图片的帧率问题导致看起来是静态的，可以访问下面的 demo 链接查看）；</li>\n<li>线从无到有的效果（下图右）。</li>\n</ul>\n<img src='https://cdn.nlark.com/yuque/0/2019/gif/156681/1571198610044-dcb4664b-1676-4ade-8f72-db5ae3c0820f.gif#align=left&display=inline&height=120&name=edge-animate-running.gif&originHeight=120&originWidth=145&search=&size=6246&status=done&width=145' alt='download' width='150'/>\n<img src='https://cdn.nlark.com/yuque/0/2019/gif/156681/1571200417875-e388a583-5ec7-4a5d-94e8-61ac30608dcc.gif#align=left&display=inline&height=112&name=edge-animate-lineDash.gif&originHeight=310&originWidth=317&search=&size=2892&status=done&width=115' alt='download' width='110'/>\n<img src='https://cdn.nlark.com/yuque/0/2019/gif/156681/1571199744260-b3d325f7-d6aa-407a-a1c7-7152c7d30cdb.gif#align=left&display=inline&height=120&name=edge-animate-grow.gif&originHeight=120&originWidth=145&search=&size=7012&status=done&width=145' alt='download' width='150'/>\n<p>以上三个边动画的 demo 代码见：<a href=\"https://codepen.io/Yanyan-Wang/pen/yLLJJoJ\" target=\"_self\" rel=\"nofollow\">边动画</a>。</p>\n<h4 id=\"圆点运动\"><a href=\"#%E5%9C%86%E7%82%B9%E8%BF%90%E5%8A%A8\" aria-label=\"圆点运动 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>圆点运动</h4>\n<p>本例通过在 afterDraw 方法中为边增加了一个 circle 图形，该图形沿着线运动。沿着线运动的原理：设定每一帧中，该 circle 在线上的相对位置。<br /></p>\n<img src='https://cdn.nlark.com/yuque/0/2019/gif/156681/1571198610044-dcb4664b-1676-4ade-8f72-db5ae3c0820f.gif#align=left&display=inline&height=120&name=edge-animate-running.gif&originHeight=120&originWidth=145&search=&size=6246&status=done&width=145' alt='download' width='150'/>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token constant\">G6</span><span class=\"token punctuation\">.</span><span class=\"token function\">registerEdge</span><span class=\"token punctuation\">(</span>\n <span class=\"token string\">'circle-running'</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">{</span>\n <span class=\"token function\">afterDraw</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">cfg<span class=\"token punctuation\">,</span> group</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token comment\">// 获得当前边的第一个图形，这里是边本身的 path</span>\n <span class=\"token keyword\">const</span> shape <span class=\"token operator\">=</span> group<span class=\"token punctuation\">.</span><span class=\"token function\">get</span><span class=\"token punctuation\">(</span><span class=\"token string\">'children'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n <span class=\"token comment\">// 边 path 的起点位置</span>\n <span class=\"token keyword\">const</span> startPoint <span class=\"token operator\">=</span> shape<span class=\"token punctuation\">.</span><span class=\"token function\">getPoint</span><span class=\"token punctuation\">(</span><span class=\"token number\">0</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n <span class=\"token comment\">// 添加红色 circle 图形</span>\n <span class=\"token keyword\">const</span> circle <span class=\"token operator\">=</span> group<span class=\"token punctuation\">.</span><span class=\"token function\">addShape</span><span class=\"token punctuation\">(</span><span class=\"token string\">'circle'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span>\n attrs<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n x<span class=\"token punctuation\">:</span> startPoint<span class=\"token punctuation\">.</span>x<span class=\"token punctuation\">,</span>\n y<span class=\"token punctuation\">:</span> startPoint<span class=\"token punctuation\">.</span>y<span class=\"token punctuation\">,</span>\n fill<span class=\"token punctuation\">:</span> <span class=\"token string\">'red'</span><span class=\"token punctuation\">,</span>\n r<span class=\"token punctuation\">:</span> <span class=\"token number\">3</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n <span class=\"token comment\">// 对红色圆点添加动画</span>\n circle<span class=\"token punctuation\">.</span><span class=\"token function\">animate</span><span class=\"token punctuation\">(</span>\n <span class=\"token punctuation\">{</span>\n <span class=\"token comment\">// 动画重复</span>\n repeat<span class=\"token punctuation\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n <span class=\"token comment\">// 每一帧的操作，入参 ratio：这一帧的比例值（Number）。返回值：这一帧需要变化的参数集（Object）。</span>\n <span class=\"token function\">onFrame</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">ratio</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token comment\">// 根据比例值，获得在边 path 上对应比例的位置。</span>\n <span class=\"token keyword\">const</span> tmpPoint <span class=\"token operator\">=</span> shape<span class=\"token punctuation\">.</span><span class=\"token function\">getPoint</span><span class=\"token punctuation\">(</span>ratio<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token comment\">// 返回需要变化的参数集，这里返回了位置 x 和 y</span>\n <span class=\"token keyword\">return</span> <span class=\"token punctuation\">{</span>\n x<span class=\"token punctuation\">:</span> tmpPoint<span class=\"token punctuation\">.</span>x<span class=\"token punctuation\">,</span>\n y<span class=\"token punctuation\">:</span> tmpPoint<span class=\"token punctuation\">.</span>y<span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token number\">3000</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 一次动画的时间长度</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token string\">'cubic'</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 该自定义边继承内置三阶贝塞尔曲线 cubic</span>\n</code></pre></div>\n<h4 id=\"虚线运动的效果\"><a href=\"#%E8%99%9A%E7%BA%BF%E8%BF%90%E5%8A%A8%E7%9A%84%E6%95%88%E6%9E%9C\" aria-label=\"虚线运动的效果 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>虚线运动的效果</h4>\n<p>虚线运动的效果是通过计算线的 <code class=\"language-text\">lineDash</code> ，并在每一帧中不断修改实现。<br /></p>\n<img src='https://cdn.nlark.com/yuque/0/2019/gif/156681/1571200417875-e388a583-5ec7-4a5d-94e8-61ac30608dcc.gif#align=left&display=inline&height=112&name=edge-animate-lineDash.gif&originHeight=310&originWidth=317&search=&size=2892&status=done&width=115' alt='download' width='150'/>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token comment\">// lineDash 的差值，可以在后面提供 util 方法自动计算</span>\n<span class=\"token keyword\">const</span> dashArray <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span>\n <span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">,</span> <span class=\"token number\">1</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">,</span> <span class=\"token number\">2</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">[</span><span class=\"token number\">1</span><span class=\"token punctuation\">,</span> <span class=\"token number\">2</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">,</span> <span class=\"token number\">1</span><span class=\"token punctuation\">,</span> <span class=\"token number\">1</span><span class=\"token punctuation\">,</span> <span class=\"token number\">2</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">,</span> <span class=\"token number\">2</span><span class=\"token punctuation\">,</span> <span class=\"token number\">1</span><span class=\"token punctuation\">,</span> <span class=\"token number\">2</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">[</span><span class=\"token number\">1</span><span class=\"token punctuation\">,</span> <span class=\"token number\">2</span><span class=\"token punctuation\">,</span> <span class=\"token number\">1</span><span class=\"token punctuation\">,</span> <span class=\"token number\">2</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">[</span><span class=\"token number\">2</span><span class=\"token punctuation\">,</span> <span class=\"token number\">2</span><span class=\"token punctuation\">,</span> <span class=\"token number\">1</span><span class=\"token punctuation\">,</span> <span class=\"token number\">2</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">[</span><span class=\"token number\">3</span><span class=\"token punctuation\">,</span> <span class=\"token number\">2</span><span class=\"token punctuation\">,</span> <span class=\"token number\">1</span><span class=\"token punctuation\">,</span> <span class=\"token number\">2</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">[</span><span class=\"token number\">4</span><span class=\"token punctuation\">,</span> <span class=\"token number\">2</span><span class=\"token punctuation\">,</span> <span class=\"token number\">1</span><span class=\"token punctuation\">,</span> <span class=\"token number\">2</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token keyword\">const</span> lineDash <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span><span class=\"token number\">4</span><span class=\"token punctuation\">,</span> <span class=\"token number\">2</span><span class=\"token punctuation\">,</span> <span class=\"token number\">1</span><span class=\"token punctuation\">,</span> <span class=\"token number\">2</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">const</span> interval <span class=\"token operator\">=</span> <span class=\"token number\">9</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// lineDash 的和</span>\n<span class=\"token constant\">G6</span><span class=\"token punctuation\">.</span><span class=\"token function\">registerEdge</span><span class=\"token punctuation\">(</span>\n <span class=\"token string\">'line-dash'</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">{</span>\n <span class=\"token function\">afterDraw</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">cfg<span class=\"token punctuation\">,</span> group</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token comment\">// 获得该边的第一个图形，这里是边的 path</span>\n <span class=\"token keyword\">const</span> shape <span class=\"token operator\">=</span> group<span class=\"token punctuation\">.</span><span class=\"token function\">get</span><span class=\"token punctuation\">(</span><span class=\"token string\">'children'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n <span class=\"token comment\">// 获得边的 path 的总长度</span>\n <span class=\"token keyword\">const</span> length <span class=\"token operator\">=</span> shape<span class=\"token punctuation\">.</span><span class=\"token function\">getTotalLength</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">let</span> totalArray <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n <span class=\"token comment\">// 计算出整条线的 lineDash</span>\n <span class=\"token keyword\">for</span> <span class=\"token punctuation\">(</span><span class=\"token keyword\">var</span> i <span class=\"token operator\">=</span> <span class=\"token number\">0</span><span class=\"token punctuation\">;</span> i <span class=\"token operator\"><</span> length<span class=\"token punctuation\">;</span> i <span class=\"token operator\">+=</span> interval<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n totalArray <span class=\"token operator\">=</span> totalArray<span class=\"token punctuation\">.</span><span class=\"token function\">concat</span><span class=\"token punctuation\">(</span>lineDash<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span>\n\n <span class=\"token keyword\">let</span> index <span class=\"token operator\">=</span> <span class=\"token number\">0</span><span class=\"token punctuation\">;</span>\n <span class=\"token comment\">// 边 path 图形的动画</span>\n shape<span class=\"token punctuation\">.</span><span class=\"token function\">animate</span><span class=\"token punctuation\">(</span>\n <span class=\"token punctuation\">{</span>\n <span class=\"token comment\">// 动画重复</span>\n repeat<span class=\"token punctuation\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n <span class=\"token comment\">// 每一帧的操作，入参 ratio：这一帧的比例值（Number）。返回值：这一帧需要变化的参数集（Object）。</span>\n <span class=\"token function\">onFrame</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">ratio</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">const</span> cfg <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n lineDash<span class=\"token punctuation\">:</span> dashArray<span class=\"token punctuation\">[</span>index<span class=\"token punctuation\">]</span><span class=\"token punctuation\">.</span><span class=\"token function\">concat</span><span class=\"token punctuation\">(</span>totalArray<span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n <span class=\"token comment\">// 每次移动 1</span>\n index <span class=\"token operator\">=</span> <span class=\"token punctuation\">(</span>index <span class=\"token operator\">+</span> <span class=\"token number\">1</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">%</span> interval<span class=\"token punctuation\">;</span>\n <span class=\"token comment\">// 返回需要修改的参数集，这里只修改了 lineDash</span>\n <span class=\"token keyword\">return</span> cfg<span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token number\">3000</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 一次动画的时长为 3000</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token string\">'cubic'</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 该自定义边继承了内置三阶贝塞尔曲线边 cubic</span>\n</code></pre></div>\n<h4 id=\"线从无到有\"><a href=\"#%E7%BA%BF%E4%BB%8E%E6%97%A0%E5%88%B0%E6%9C%89\" aria-label=\"线从无到有 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>线从无到有</h4>\n<p>线从无到有的动画效果，同样可以通过计算 <code class=\"language-text\">lineDash</code> 来实现。<br /></p>\n<img src='https://cdn.nlark.com/yuque/0/2019/gif/156681/1571199744260-b3d325f7-d6aa-407a-a1c7-7152c7d30cdb.gif#align=left&display=inline&height=120&name=edge-animate-grow.gif&originHeight=120&originWidth=145&search=&size=7012&status=done&width=145' alt='download' width='150'/>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token constant\">G6</span><span class=\"token punctuation\">.</span><span class=\"token function\">registerEdge</span><span class=\"token punctuation\">(</span>\n <span class=\"token string\">'line-growth'</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">{</span>\n <span class=\"token function\">afterDraw</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">cfg<span class=\"token punctuation\">,</span> group</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">const</span> shape <span class=\"token operator\">=</span> group<span class=\"token punctuation\">.</span><span class=\"token function\">get</span><span class=\"token punctuation\">(</span><span class=\"token string\">'children'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">const</span> length <span class=\"token operator\">=</span> group<span class=\"token punctuation\">.</span><span class=\"token function\">getTotalLength</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n shape<span class=\"token punctuation\">.</span><span class=\"token function\">animate</span><span class=\"token punctuation\">(</span>\n <span class=\"token punctuation\">{</span>\n <span class=\"token comment\">// 动画重复</span>\n repeat<span class=\"token punctuation\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n <span class=\"token comment\">// 每一帧的操作，入参 ratio：这一帧的比例值（Number）。返回值：这一帧需要变化的参数集（Object）。</span>\n <span class=\"token function\">onFrame</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">ratio</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">const</span> startLen <span class=\"token operator\">=</span> ratio <span class=\"token operator\">*</span> length<span class=\"token punctuation\">;</span>\n <span class=\"token comment\">// 计算线的lineDash</span>\n <span class=\"token keyword\">const</span> cfg <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n lineDash<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span>startLen<span class=\"token punctuation\">,</span> length <span class=\"token operator\">-</span> startLen<span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">return</span> cfg<span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token number\">2000</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 一次动画的时长为 2000</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token string\">'cubic'</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 该自定义边继承了内置三阶贝塞尔曲线边 cubic</span>\n</code></pre></div>\n<h3 id=\"交互动画\"><a href=\"#%E4%BA%A4%E4%BA%92%E5%8A%A8%E7%94%BB\" aria-label=\"交互动画 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>交互动画</h3>\n<p>在交互的过程中也可以添加动画。如下图所示，当鼠标移到节点上时，所有与该节点相关联的边都展示虚线运动的动画。<br /><img src=\"https://cdn.nlark.com/yuque/0/2019/gif/244306/1561463491982-54ef73c2-fbf7-4886-8d45-f7b8ec8e1976.gif#align=left&display=inline&height=285&name=%E4%BA%A4%E4%BA%92%E5%8A%A8%E7%94%BB.gif&originHeight=586&originWidth=588&search=&size=729910&status=done&width=286\" alt=\"交互动画.gif\"><br />上图完整 demo 即代码参见：<a href=\"https://antv.alipay.com/zh-cn/g6/3.x/demo/scatter/hover-animate.html\" target=\"_self\" rel=\"nofollow\">状态切换动画</a>。</p>\n<p>这种动画涉及到了边的 <a href=\"https://www.yuque.com/antv/g6/fqnn9w\" target=\"_self\" rel=\"nofollow\">状态</a>。在自定义边时复写 <code class=\"language-text\">setState</code> 方法，可对边的各种状态进行监听。鼠标移动到节点上，相关边的某个状态被开启，<code class=\"language-text\">setState</code> 方法中监听到后开启动画效果。步骤如下：</p>\n<ul>\n<li>自定义边中复写 <code class=\"language-text\">setState</code> 方法监听该边的状态，以及某状态下的动画效果；</li>\n<li>监听中间的节点的 <code class=\"language-text\">mouseenter</code> 和 <code class=\"language-text\">mouseleave</code> 事件，触发相关边的状态变化。</li>\n</ul>\n<p>下面代码节选自 demo <a href=\"https://antv.alipay.com/zh-cn/g6/3.x/demo/scatter/hover-animate.html\" target=\"_self\" rel=\"nofollow\">状态切换动画</a>，请注意省略了部分代码，只展示了交互相关以及边动画相关的代码。</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token comment\">// const data = ...</span>\n<span class=\"token comment\">// const graph = new G6.Graph({...});</span>\n\n<span class=\"token comment\">// lineDash 的差值，可以在后面提供 util 方法自动计算</span>\n<span class=\"token keyword\">const</span> dashArray <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span>\n <span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">,</span> <span class=\"token number\">1</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">,</span> <span class=\"token number\">2</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">[</span><span class=\"token number\">1</span><span class=\"token punctuation\">,</span> <span class=\"token number\">2</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">,</span> <span class=\"token number\">1</span><span class=\"token punctuation\">,</span> <span class=\"token number\">1</span><span class=\"token punctuation\">,</span> <span class=\"token number\">2</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">,</span> <span class=\"token number\">2</span><span class=\"token punctuation\">,</span> <span class=\"token number\">1</span><span class=\"token punctuation\">,</span> <span class=\"token number\">2</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">[</span><span class=\"token number\">1</span><span class=\"token punctuation\">,</span> <span class=\"token number\">2</span><span class=\"token punctuation\">,</span> <span class=\"token number\">1</span><span class=\"token punctuation\">,</span> <span class=\"token number\">2</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">[</span><span class=\"token number\">2</span><span class=\"token punctuation\">,</span> <span class=\"token number\">2</span><span class=\"token punctuation\">,</span> <span class=\"token number\">1</span><span class=\"token punctuation\">,</span> <span class=\"token number\">2</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">[</span><span class=\"token number\">3</span><span class=\"token punctuation\">,</span> <span class=\"token number\">2</span><span class=\"token punctuation\">,</span> <span class=\"token number\">1</span><span class=\"token punctuation\">,</span> <span class=\"token number\">2</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">[</span><span class=\"token number\">4</span><span class=\"token punctuation\">,</span> <span class=\"token number\">2</span><span class=\"token punctuation\">,</span> <span class=\"token number\">1</span><span class=\"token punctuation\">,</span> <span class=\"token number\">2</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token keyword\">const</span> lineDash <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span><span class=\"token number\">4</span><span class=\"token punctuation\">,</span> <span class=\"token number\">2</span><span class=\"token punctuation\">,</span> <span class=\"token number\">1</span><span class=\"token punctuation\">,</span> <span class=\"token number\">2</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">const</span> interval <span class=\"token operator\">=</span> <span class=\"token number\">9</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// lineDash 的总长度。</span>\n\n<span class=\"token comment\">// 注册名为 'can-running' 的边</span>\n<span class=\"token constant\">G6</span><span class=\"token punctuation\">.</span><span class=\"token function\">registerEdge</span><span class=\"token punctuation\">(</span>\n <span class=\"token string\">'can-running'</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">{</span>\n <span class=\"token comment\">// 复写setState方法</span>\n <span class=\"token function\">setState</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">name<span class=\"token punctuation\">,</span> value<span class=\"token punctuation\">,</span> item</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">const</span> shape <span class=\"token operator\">=</span> item<span class=\"token punctuation\">.</span><span class=\"token function\">get</span><span class=\"token punctuation\">(</span><span class=\"token string\">'keyShape'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token comment\">// 监听 running 状态</span>\n <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>name <span class=\"token operator\">===</span> <span class=\"token string\">'running'</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token comment\">// running 状态为 true 时</span>\n <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>value<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">const</span> length <span class=\"token operator\">=</span> shape<span class=\"token punctuation\">.</span><span class=\"token function\">getTotalLength</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">let</span> totalArray <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">for</span> <span class=\"token punctuation\">(</span><span class=\"token keyword\">var</span> i <span class=\"token operator\">=</span> <span class=\"token number\">0</span><span class=\"token punctuation\">;</span> i <span class=\"token operator\"><</span> length<span class=\"token punctuation\">;</span> i <span class=\"token operator\">+=</span> interval<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n totalArray <span class=\"token operator\">=</span> totalArray<span class=\"token punctuation\">.</span><span class=\"token function\">concat</span><span class=\"token punctuation\">(</span>lineDash<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token keyword\">let</span> index <span class=\"token operator\">=</span> <span class=\"token number\">0</span><span class=\"token punctuation\">;</span>\n shape<span class=\"token punctuation\">.</span><span class=\"token function\">animate</span><span class=\"token punctuation\">(</span>\n <span class=\"token punctuation\">{</span>\n <span class=\"token comment\">// 动画重复</span>\n repeat<span class=\"token punctuation\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n <span class=\"token comment\">// 每一帧的操作，入参 ratio：这一帧的比例值（Number）。返回值：这一帧需要变化的参数集（Object）。</span>\n <span class=\"token function\">onFrame</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">ratio</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">const</span> cfg <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n lineDash<span class=\"token punctuation\">:</span> dashArray<span class=\"token punctuation\">[</span>index<span class=\"token punctuation\">]</span><span class=\"token punctuation\">.</span><span class=\"token function\">concat</span><span class=\"token punctuation\">(</span>totalArray<span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n index <span class=\"token operator\">=</span> <span class=\"token punctuation\">(</span>index <span class=\"token operator\">+</span> <span class=\"token number\">1</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">%</span> interval<span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">return</span> cfg<span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token number\">3000</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 一次动画的时长为 3000</span>\n <span class=\"token punctuation\">}</span> <span class=\"token keyword\">else</span> <span class=\"token punctuation\">{</span>\n <span class=\"token comment\">// running 状态为 false 时</span>\n <span class=\"token comment\">// 结束动画</span>\n shape<span class=\"token punctuation\">.</span><span class=\"token function\">stopAnimate</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token comment\">// 清空 lineDash</span>\n shape<span class=\"token punctuation\">.</span><span class=\"token function\">attr</span><span class=\"token punctuation\">(</span><span class=\"token string\">'lineDash'</span><span class=\"token punctuation\">,</span> <span class=\"token keyword\">null</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token string\">'cubic-horizontal'</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 该自定义边继承了内置横向三阶贝塞尔曲线边 cubic-horizontal</span>\n\n<span class=\"token comment\">// 监听节点的 mouseenter 事件</span>\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'node:mouseenter'</span><span class=\"token punctuation\">,</span> <span class=\"token parameter\">ev</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n <span class=\"token comment\">// 获得当前鼠标操作的目标节点</span>\n <span class=\"token keyword\">const</span> node <span class=\"token operator\">=</span> ev<span class=\"token punctuation\">.</span>item<span class=\"token punctuation\">;</span>\n <span class=\"token comment\">// 获得目标节点的所有相关边</span>\n <span class=\"token keyword\">const</span> edges <span class=\"token operator\">=</span> node<span class=\"token punctuation\">.</span><span class=\"token function\">getEdges</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token comment\">// 将所有相关边的 running 状态置为 true，此时将会触发自定义节点的 setState 函数</span>\n edges<span class=\"token punctuation\">.</span><span class=\"token function\">forEach</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">edge</span> <span class=\"token operator\">=></span> graph<span class=\"token punctuation\">.</span><span class=\"token function\">setItemState</span><span class=\"token punctuation\">(</span>edge<span class=\"token punctuation\">,</span> <span class=\"token string\">'running'</span><span class=\"token punctuation\">,</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token comment\">// 监听节点的 mouseleave 事件</span>\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'node:mouseleave'</span><span class=\"token punctuation\">,</span> <span class=\"token parameter\">ev</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n <span class=\"token comment\">// 获得当前鼠标操作的目标节点</span>\n <span class=\"token keyword\">const</span> node <span class=\"token operator\">=</span> ev<span class=\"token punctuation\">.</span>item<span class=\"token punctuation\">;</span>\n <span class=\"token comment\">// 获得目标节点的所有相关边</span>\n <span class=\"token keyword\">const</span> edges <span class=\"token operator\">=</span> node<span class=\"token punctuation\">.</span><span class=\"token function\">getEdges</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token comment\">// 将所有相关边的 running 状态置为 false，此时将会触发自定义节点的 setState 函数</span>\n edges<span class=\"token punctuation\">.</span><span class=\"token function\">forEach</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">edge</span> <span class=\"token operator\">=></span> graph<span class=\"token punctuation\">.</span><span class=\"token function\">setItemState</span><span class=\"token punctuation\">(</span>edge<span class=\"token punctuation\">,</span> <span class=\"token string\">'running'</span><span class=\"token punctuation\">,</span> <span class=\"token boolean\">false</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token comment\">// graph.data(data);</span>\n<span class=\"token comment\">// graph.render();</span>\n</code></pre></div>\n<p><span style=\"background-color: rgb(251, 233, 231); color: rgb(139, 53, 56)\"> 注意：</span>\nrunning 为 false 时，要停止动画，同时把 lineDash 清空。</p>"}