{"expireTime":9007200828528711000,"key":"transformer-remark-markdown-html-ast-eb42fb13271e44fd67900b7c24af559b-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"G6 中的动画分为两个层次：","position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":15,"offset":15}}}],"position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":15,"offset":15}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"全局动画：全局性的动画，图整体变化时的动画过渡；","position":{"start":{"line":4,"column":3,"offset":19},"end":{"line":4,"column":27,"offset":43}}}],"position":{"start":{"line":4,"column":1,"offset":17},"end":{"line":4,"column":27,"offset":43}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"元素（边和节点）动画：节点或边上的独立动画。","position":{"start":{"line":5,"column":3,"offset":46},"end":{"line":5,"column":25,"offset":68}}}],"position":{"start":{"line":5,"column":1,"offset":44},"end":{"line":5,"column":25,"offset":68}}},{"type":"text","value":"\n"}],"position":{"start":{"line":4,"column":1,"offset":17},"end":{"line":5,"column":25,"offset":68}}},{"type":"text","value":"\n"},{"type":"raw","value":"<br />\n## 全局动画\nG6 的全局动画指通过图实例进行某些全局操作时，产生的动画效果。例如：","position":{"start":{"line":7,"column":1,"offset":70},"end":{"line":9,"column":36,"offset":120}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"raw","value":"<code class=\"language-text\">graph.updateLayout(cfg)</code>","position":{"start":{"line":11,"column":3,"offset":124},"end":{"line":11,"column":28,"offset":149}}},{"type":"text","value":" 布局的变化","position":{"start":{"line":11,"column":28,"offset":149},"end":{"line":11,"column":34,"offset":155}}}],"position":{"start":{"line":11,"column":1,"offset":122},"end":{"line":11,"column":34,"offset":155}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"raw","value":"<code class=\"language-text\">graph.changeData()</code>","position":{"start":{"line":12,"column":3,"offset":158},"end":{"line":12,"column":23,"offset":178}}},{"type":"text","value":" 数据的变化","position":{"start":{"line":12,"column":23,"offset":178},"end":{"line":12,"column":29,"offset":184}}}],"position":{"start":{"line":12,"column":1,"offset":156},"end":{"line":12,"column":29,"offset":184}}},{"type":"text","value":"\n"}],"position":{"start":{"line":11,"column":1,"offset":122},"end":{"line":12,"column":29,"offset":184}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"通过实例化图时配置 ","position":{"start":{"line":14,"column":1,"offset":186},"end":{"line":14,"column":11,"offset":196}}},{"type":"raw","value":"<code class=\"language-text\">animate: true</code>","position":{"start":{"line":14,"column":11,"offset":196},"end":{"line":14,"column":26,"offset":211}}},{"type":"text","value":"，可以达到每次进行上述操作时，动画效果变化的目的。配合 ","position":{"start":{"line":14,"column":26,"offset":211},"end":{"line":14,"column":54,"offset":239}}},{"type":"raw","value":"<code class=\"language-text\">animateCfg</code>","position":{"start":{"line":14,"column":54,"offset":239},"end":{"line":14,"column":66,"offset":251}}},{"type":"text","value":" 配置动画参数：","position":{"start":{"line":14,"column":66,"offset":251},"end":{"line":14,"column":74,"offset":259}}},{"type":"raw","value":"<br />","position":{"start":{"line":14,"column":74,"offset":259},"end":{"line":14,"column":80,"offset":265}}}],"position":{"start":{"line":14,"column":1,"offset":186},"end":{"line":14,"column":80,"offset":265}}},{"type":"text","value":"\n"},{"type":"raw","value":"<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>","position":{"start":{"line":15,"column":1,"offset":266},"end":{"line":24,"column":4,"offset":530}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"easing-函数"},"children":[{"type":"element","tagName":"a","properties":{"href":"#easing-%E5%87%BD%E6%95%B0","aria-label":"easing 函数 permalink","class":"anchor"},"children":[{"type":"raw","value":"<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>"}]},{"type":"text","value":"easing 函数","position":{"start":{"line":26,"column":5,"offset":536},"end":{"line":26,"column":14,"offset":545}}}],"position":{"start":{"line":26,"column":1,"offset":532},"end":{"line":26,"column":14,"offset":545}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"easing 函数是指动画的函数。例如线性插值、先快后慢等。","position":{"start":{"line":27,"column":1,"offset":546},"end":{"line":27,"column":31,"offset":576}}},{"type":"raw","value":"<br />","position":{"start":{"line":27,"column":31,"offset":576},"end":{"line":27,"column":37,"offset":582}}},{"type":"text","value":"G6 支持所有 d3 中的动画函数。因此，上面代码中 ","position":{"start":{"line":27,"column":37,"offset":582},"end":{"line":27,"column":64,"offset":609}}},{"type":"raw","value":"<code class=\"language-text\">animateCfg</code>","position":{"start":{"line":27,"column":64,"offset":609},"end":{"line":27,"column":76,"offset":621}}},{"type":"text","value":" 配置中的 String 类型的 ","position":{"start":{"line":27,"column":76,"offset":621},"end":{"line":27,"column":93,"offset":638}}},{"type":"raw","value":"<code class=\"language-text\">easing</code>","position":{"start":{"line":27,"column":93,"offset":638},"end":{"line":27,"column":101,"offset":646}}},{"type":"text","value":" 可以取值有：","position":{"start":{"line":27,"column":101,"offset":646},"end":{"line":27,"column":108,"offset":653}}},{"type":"raw","value":"<br />","position":{"start":{"line":27,"column":108,"offset":653},"end":{"line":27,"column":114,"offset":659}}},{"type":"raw","value":"<code class=\"language-text\">&#39;easeLinear&#39;</code>","position":{"start":{"line":27,"column":114,"offset":659},"end":{"line":27,"column":128,"offset":673}}},{"type":"text","value":" ，","position":{"start":{"line":27,"column":128,"offset":673},"end":{"line":27,"column":130,"offset":675}}},{"type":"raw","value":"<br />","position":{"start":{"line":27,"column":130,"offset":675},"end":{"line":27,"column":136,"offset":681}}},{"type":"raw","value":"<code class=\"language-text\">&#39;easePolyIn&#39;</code>","position":{"start":{"line":27,"column":136,"offset":681},"end":{"line":27,"column":150,"offset":695}}},{"type":"text","value":" ，","position":{"start":{"line":27,"column":150,"offset":695},"end":{"line":27,"column":152,"offset":697}}},{"type":"raw","value":"<code class=\"language-text\">&#39;easePolyOut&#39;</code>","position":{"start":{"line":27,"column":152,"offset":697},"end":{"line":27,"column":167,"offset":712}}},{"type":"text","value":" ， ","position":{"start":{"line":27,"column":167,"offset":712},"end":{"line":27,"column":170,"offset":715}}},{"type":"raw","value":"<code class=\"language-text\">&#39;easePolyInOut&#39;</code>","position":{"start":{"line":27,"column":170,"offset":715},"end":{"line":27,"column":187,"offset":732}}},{"type":"text","value":"  ，","position":{"start":{"line":27,"column":187,"offset":732},"end":{"line":27,"column":190,"offset":735}}},{"type":"raw","value":"<br />","position":{"start":{"line":27,"column":190,"offset":735},"end":{"line":27,"column":196,"offset":741}}},{"type":"raw","value":"<code class=\"language-text\">&#39;``easeQuad``&#39;</code>","position":{"start":{"line":27,"column":196,"offset":741},"end":{"line":27,"column":212,"offset":757}}},{"type":"text","value":" ，","position":{"start":{"line":27,"column":212,"offset":757},"end":{"line":27,"column":214,"offset":759}}},{"type":"raw","value":"<code class=\"language-text\">&#39;easeQuadIn&#39;</code>","position":{"start":{"line":27,"column":214,"offset":759},"end":{"line":27,"column":228,"offset":773}}},{"type":"text","value":" ，","position":{"start":{"line":27,"column":228,"offset":773},"end":{"line":27,"column":230,"offset":775}}},{"type":"raw","value":"<code class=\"language-text\">&#39;easeQuadOut&#39;</code>","position":{"start":{"line":27,"column":230,"offset":775},"end":{"line":27,"column":245,"offset":790}}},{"type":"text","value":" ， ","position":{"start":{"line":27,"column":245,"offset":790},"end":{"line":27,"column":248,"offset":793}}},{"type":"raw","value":"<code class=\"language-text\">&#39;easeQuadInOut&#39;</code>","position":{"start":{"line":27,"column":248,"offset":793},"end":{"line":27,"column":265,"offset":810}}},{"type":"text","value":" ，","position":{"start":{"line":27,"column":265,"offset":810},"end":{"line":27,"column":267,"offset":812}}},{"type":"raw","value":"<br />","position":{"start":{"line":27,"column":267,"offset":812},"end":{"line":27,"column":273,"offset":818}}},{"type":"text","value":"...... ","position":{"start":{"line":27,"column":273,"offset":818},"end":{"line":27,"column":280,"offset":825}}},{"type":"raw","value":"<br />","position":{"start":{"line":27,"column":280,"offset":825},"end":{"line":27,"column":286,"offset":831}}},{"type":"text","value":"更多取值及所有取值含义参见：","position":{"start":{"line":27,"column":286,"offset":831},"end":{"line":27,"column":300,"offset":845}}},{"type":"element","tagName":"a","properties":{"href":"https://github.com/d3/d3/blob/master/API.md#easings-d3-ease","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"d3 Easings","position":{"start":{"line":27,"column":301,"offset":846},"end":{"line":27,"column":311,"offset":856}}}],"position":{"start":{"line":27,"column":300,"offset":845},"end":{"line":27,"column":373,"offset":918}}},{"type":"text","value":"。","position":{"start":{"line":27,"column":373,"offset":918},"end":{"line":27,"column":374,"offset":919}}}],"position":{"start":{"line":27,"column":1,"offset":546},"end":{"line":27,"column":374,"offset":919}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"元素动画"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E5%85%83%E7%B4%A0%E5%8A%A8%E7%94%BB","aria-label":"元素动画 permalink","class":"anchor"},"children":[{"type":"raw","value":"<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>"}]},{"type":"text","value":"元素动画","position":{"start":{"line":30,"column":4,"offset":925},"end":{"line":30,"column":8,"offset":929}}}],"position":{"start":{"line":30,"column":1,"offset":922},"end":{"line":30,"column":8,"offset":929}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"由于 G6 的内置节点和边是没有动画的，需要实现节点和边上的动画需要通过","position":{"start":{"line":31,"column":1,"offset":930},"end":{"line":31,"column":37,"offset":966}}},{"type":"element","tagName":"a","properties":{"href":"https://www.yuque.com/antv/g6/self-node","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"自定义节点","position":{"start":{"line":31,"column":38,"offset":967},"end":{"line":31,"column":43,"offset":972}}}],"position":{"start":{"line":31,"column":37,"offset":966},"end":{"line":31,"column":85,"offset":1014}}},{"type":"text","value":"、","position":{"start":{"line":31,"column":85,"offset":1014},"end":{"line":31,"column":86,"offset":1015}}},{"type":"element","tagName":"a","properties":{"href":"https://www.yuque.com/antv/g6/self-edge","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"自定义边","position":{"start":{"line":31,"column":87,"offset":1016},"end":{"line":31,"column":91,"offset":1020}}}],"position":{"start":{"line":31,"column":86,"offset":1015},"end":{"line":31,"column":133,"offset":1062}}},{"type":"text","value":"时复写 ","position":{"start":{"line":31,"column":133,"offset":1062},"end":{"line":31,"column":137,"offset":1066}}},{"type":"raw","value":"<code class=\"language-text\">afterDraw</code>","position":{"start":{"line":31,"column":137,"offset":1066},"end":{"line":31,"column":148,"offset":1077}}},{"type":"text","value":" 实现。","position":{"start":{"line":31,"column":148,"offset":1077},"end":{"line":31,"column":152,"offset":1081}}}],"position":{"start":{"line":31,"column":1,"offset":930},"end":{"line":31,"column":152,"offset":1081}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"节点动画"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E8%8A%82%E7%82%B9%E5%8A%A8%E7%94%BB","aria-label":"节点动画 permalink","class":"anchor"},"children":[{"type":"raw","value":"<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>"}]},{"type":"text","value":"节点动画","position":{"start":{"line":33,"column":5,"offset":1087},"end":{"line":33,"column":9,"offset":1091}}}],"position":{"start":{"line":33,"column":1,"offset":1083},"end":{"line":33,"column":9,"offset":1091}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"关于节点动画，以下面三个动画示例进行讲解：","position":{"start":{"line":34,"column":1,"offset":1092},"end":{"line":34,"column":22,"offset":1113}}}],"position":{"start":{"line":34,"column":1,"offset":1092},"end":{"line":34,"column":22,"offset":1113}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"节点上图形的动画（如下图左）；","position":{"start":{"line":36,"column":3,"offset":1117},"end":{"line":36,"column":18,"offset":1132}}}],"position":{"start":{"line":36,"column":1,"offset":1115},"end":{"line":36,"column":18,"offset":1132}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"增加带有动画的背景图形（如下图中）；","position":{"start":{"line":37,"column":3,"offset":1135},"end":{"line":37,"column":21,"offset":1153}}}],"position":{"start":{"line":37,"column":1,"offset":1133},"end":{"line":37,"column":21,"offset":1153}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"节点上部分图形的旋转动画（如下图右）。","position":{"start":{"line":38,"column":3,"offset":1156},"end":{"line":38,"column":22,"offset":1175}}}],"position":{"start":{"line":38,"column":1,"offset":1154},"end":{"line":38,"column":22,"offset":1175}}},{"type":"text","value":"\n"}],"position":{"start":{"line":36,"column":1,"offset":1115},"end":{"line":38,"column":22,"offset":1175}}},{"type":"text","value":"\n"},{"type":"raw","value":"<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 />","position":{"start":{"line":41,"column":1,"offset":1178},"end":{"line":44,"column":7,"offset":2028}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"以上三个动画节点的 demo 代码见：\n","position":{"start":{"line":46,"column":1,"offset":2030},"end":{"line":47,"column":1,"offset":2050}}},{"type":"element","tagName":"a","properties":{"href":"https://codepen.io/Yanyan-Wang/pen/QWWEEWe","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"节点动画","position":{"start":{"line":47,"column":2,"offset":2051},"end":{"line":47,"column":6,"offset":2055}}}],"position":{"start":{"line":47,"column":1,"offset":2050},"end":{"line":47,"column":51,"offset":2100}}},{"type":"text","value":"。","position":{"start":{"line":47,"column":51,"offset":2100},"end":{"line":47,"column":52,"offset":2101}}}],"position":{"start":{"line":46,"column":1,"offset":2030},"end":{"line":47,"column":52,"offset":2101}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"节点上图形的动画"},"children":[{"type":"element","tagName":"a","properties":{"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"},"children":[{"type":"raw","value":"<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>"}]},{"type":"text","value":"节点上图形的动画","position":{"start":{"line":49,"column":6,"offset":2108},"end":{"line":49,"column":14,"offset":2116}}}],"position":{"start":{"line":49,"column":1,"offset":2103},"end":{"line":49,"column":14,"offset":2116}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"节点上的动画，即每一帧发生变化的是节点上的某一个图形。","position":{"start":{"line":50,"column":1,"offset":2117},"end":{"line":50,"column":28,"offset":2144}}},{"type":"raw","value":"<br />","position":{"start":{"line":50,"column":28,"offset":2144},"end":{"line":50,"column":34,"offset":2150}}}],"position":{"start":{"line":50,"column":1,"offset":2117},"end":{"line":50,"column":34,"offset":2150}}},{"type":"text","value":"\n"},{"type":"raw","value":"<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'/>","position":{"start":{"line":52,"column":1,"offset":2152},"end":{"line":52,"column":278,"offset":2429}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"本例实现节点放大缩小，通过 ","position":{"start":{"line":54,"column":1,"offset":2431},"end":{"line":54,"column":15,"offset":2445}}},{"type":"raw","value":"<code class=\"language-text\">group.get(&#39;children&#39;)[0]</code>","position":{"start":{"line":54,"column":15,"offset":2445},"end":{"line":54,"column":41,"offset":2471}}},{"type":"text","value":" 找到需要更新的图形（这里找到该节点上第 0 个图形），然后调用该图形的 ","position":{"start":{"line":54,"column":41,"offset":2471},"end":{"line":54,"column":78,"offset":2508}}},{"type":"raw","value":"<code class=\"language-text\">animate</code>","position":{"start":{"line":54,"column":78,"offset":2508},"end":{"line":54,"column":87,"offset":2517}}},{"type":"text","value":" 方法指定动画的参数及每一帧的变化（ ","position":{"start":{"line":54,"column":87,"offset":2517},"end":{"line":54,"column":106,"offset":2536}}},{"type":"raw","value":"<code class=\"language-text\">onFrame</code>","position":{"start":{"line":54,"column":106,"offset":2536},"end":{"line":54,"column":115,"offset":2545}}},{"type":"text","value":" 方法返回每一帧需要变化的参数集）。","position":{"start":{"line":54,"column":115,"offset":2545},"end":{"line":54,"column":133,"offset":2563}}}],"position":{"start":{"line":54,"column":1,"offset":2431},"end":{"line":54,"column":133,"offset":2563}}},{"type":"text","value":"\n"},{"type":"raw","value":"<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\">&lt;=</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>","position":{"start":{"line":55,"column":1,"offset":2564},"end":{"line":79,"column":4,"offset":3289}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"增加带有动画的背景图形"},"children":[{"type":"element","tagName":"a","properties":{"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"},"children":[{"type":"raw","value":"<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>"}]},{"type":"text","value":"增加带有动画的背景图形","position":{"start":{"line":81,"column":6,"offset":3296},"end":{"line":81,"column":17,"offset":3307}}}],"position":{"start":{"line":81,"column":1,"offset":3291},"end":{"line":81,"column":17,"offset":3307}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"在 ","position":{"start":{"line":82,"column":1,"offset":3308},"end":{"line":82,"column":3,"offset":3310}}},{"type":"raw","value":"<code class=\"language-text\">afterDraw</code>","position":{"start":{"line":82,"column":3,"offset":3310},"end":{"line":82,"column":14,"offset":3321}}},{"type":"text","value":" 方法中为已有节点添加额外的 shape ，并为这些新增的图形设置动画。","position":{"start":{"line":82,"column":14,"offset":3321},"end":{"line":82,"column":50,"offset":3357}}},{"type":"raw","value":"<br />","position":{"start":{"line":82,"column":50,"offset":3357},"end":{"line":82,"column":56,"offset":3363}}}],"position":{"start":{"line":82,"column":1,"offset":3308},"end":{"line":82,"column":56,"offset":3363}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"本例在 ","position":{"start":{"line":84,"column":1,"offset":3365},"end":{"line":84,"column":5,"offset":3369}}},{"type":"raw","value":"<code class=\"language-text\">afterDraw</code>","position":{"start":{"line":84,"column":5,"offset":3369},"end":{"line":84,"column":16,"offset":3380}}},{"type":"text","value":" 方法中，绘制了三个背景 circle ，分别使用不同的颜色填充，再调用 ","position":{"start":{"line":84,"column":16,"offset":3380},"end":{"line":84,"column":53,"offset":3417}}},{"type":"raw","value":"<code class=\"language-text\">animate</code>","position":{"start":{"line":84,"column":53,"offset":3417},"end":{"line":84,"column":62,"offset":3426}}},{"type":"text","value":" 方法实现这三个 circle 逐渐变大、变淡的动画。本例中没有使用 ","position":{"start":{"line":84,"column":62,"offset":3426},"end":{"line":84,"column":97,"offset":3461}}},{"type":"raw","value":"<code class=\"language-text\">onFrame</code>","position":{"start":{"line":84,"column":97,"offset":3461},"end":{"line":84,"column":106,"offset":3470}}},{"type":"text","value":" 函数，直接在 ","position":{"start":{"line":84,"column":106,"offset":3470},"end":{"line":84,"column":114,"offset":3478}}},{"type":"raw","value":"<code class=\"language-text\">animate</code>","position":{"start":{"line":84,"column":114,"offset":3478},"end":{"line":84,"column":123,"offset":3487}}},{"type":"text","value":" 函数的入参中设置每次动画结束时的最终目标样式，即半径增大 10，透明度降为 0.1。","position":{"start":{"line":84,"column":123,"offset":3487},"end":{"line":84,"column":166,"offset":3530}}},{"type":"raw","value":"<br />","position":{"start":{"line":84,"column":166,"offset":3530},"end":{"line":84,"column":172,"offset":3536}}}],"position":{"start":{"line":84,"column":1,"offset":3365},"end":{"line":84,"column":172,"offset":3536}}},{"type":"text","value":"\n"},{"type":"raw","value":"<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'/>","position":{"start":{"line":86,"column":1,"offset":3538},"end":{"line":86,"column":283,"offset":3820}}},{"type":"text","value":"\n"},{"type":"raw","value":"<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>","position":{"start":{"line":88,"column":1,"offset":3822},"end":{"line":152,"column":4,"offset":5090}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"部分图形旋转动画"},"children":[{"type":"element","tagName":"a","properties":{"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"},"children":[{"type":"raw","value":"<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>"}]},{"type":"text","value":"部分图形旋转动画","position":{"start":{"line":154,"column":6,"offset":5097},"end":{"line":154,"column":14,"offset":5105}}}],"position":{"start":{"line":154,"column":1,"offset":5092},"end":{"line":154,"column":14,"offset":5105}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"这一例也是在 ","position":{"start":{"line":155,"column":1,"offset":5106},"end":{"line":155,"column":8,"offset":5113}}},{"type":"raw","value":"<code class=\"language-text\">afterDraw</code>","position":{"start":{"line":155,"column":8,"offset":5113},"end":{"line":155,"column":19,"offset":5124}}},{"type":"text","value":" 方法中为已有节点添加额外的 shape （本例中为 image），并为这些新增的图形设置旋转动画。旋转动画较为复杂，需要通过矩阵的操作实现。","position":{"start":{"line":155,"column":19,"offset":5124},"end":{"line":155,"column":90,"offset":5195}}},{"type":"raw","value":"<br />","position":{"start":{"line":155,"column":90,"offset":5195},"end":{"line":155,"column":96,"offset":5201}}}],"position":{"start":{"line":155,"column":1,"offset":5106},"end":{"line":155,"column":96,"offset":5201}}},{"type":"text","value":"\n"},{"type":"raw","value":"<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'/>","position":{"start":{"line":157,"column":1,"offset":5203},"end":{"line":157,"column":283,"offset":5485}}},{"type":"text","value":"\n"},{"type":"raw","value":"<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>","position":{"start":{"line":159,"column":1,"offset":5487},"end":{"line":196,"column":4,"offset":6365}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"边动画"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E8%BE%B9%E5%8A%A8%E7%94%BB","aria-label":"边动画 permalink","class":"anchor"},"children":[{"type":"raw","value":"<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>"}]},{"type":"text","value":"边动画","position":{"start":{"line":198,"column":5,"offset":6371},"end":{"line":198,"column":8,"offset":6374}}}],"position":{"start":{"line":198,"column":1,"offset":6367},"end":{"line":198,"column":8,"offset":6374}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"关于边动画，以下面三个动画示例进行讲解：","position":{"start":{"line":199,"column":1,"offset":6375},"end":{"line":199,"column":21,"offset":6395}}}],"position":{"start":{"line":199,"column":1,"offset":6375},"end":{"line":199,"column":21,"offset":6395}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"圆点在沿着线运动（下图左）；","position":{"start":{"line":201,"column":3,"offset":6399},"end":{"line":201,"column":17,"offset":6413}}}],"position":{"start":{"line":201,"column":1,"offset":6397},"end":{"line":201,"column":17,"offset":6413}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"虚线运动的效果（下图中，gif 图片的帧率问题导致看起来是静态的，可以访问下面的 demo 链接查看）；","position":{"start":{"line":202,"column":3,"offset":6416},"end":{"line":202,"column":55,"offset":6468}}}],"position":{"start":{"line":202,"column":1,"offset":6414},"end":{"line":202,"column":55,"offset":6468}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"线从无到有的效果（下图右）。","position":{"start":{"line":203,"column":3,"offset":6471},"end":{"line":203,"column":17,"offset":6485}}}],"position":{"start":{"line":203,"column":1,"offset":6469},"end":{"line":203,"column":17,"offset":6485}}},{"type":"text","value":"\n"}],"position":{"start":{"line":201,"column":1,"offset":6397},"end":{"line":203,"column":17,"offset":6485}}},{"type":"text","value":"\n"},{"type":"raw","value":"<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'/>","position":{"start":{"line":206,"column":1,"offset":6488},"end":{"line":208,"column":278,"offset":7328}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"以上三个边动画的 demo 代码见：","position":{"start":{"line":210,"column":1,"offset":7330},"end":{"line":210,"column":19,"offset":7348}}},{"type":"element","tagName":"a","properties":{"href":"https://codepen.io/Yanyan-Wang/pen/yLLJJoJ","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"边动画","position":{"start":{"line":210,"column":20,"offset":7349},"end":{"line":210,"column":23,"offset":7352}}}],"position":{"start":{"line":210,"column":19,"offset":7348},"end":{"line":210,"column":68,"offset":7397}}},{"type":"text","value":"。","position":{"start":{"line":210,"column":68,"offset":7397},"end":{"line":210,"column":69,"offset":7398}}}],"position":{"start":{"line":210,"column":1,"offset":7330},"end":{"line":210,"column":69,"offset":7398}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"圆点运动"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E5%9C%86%E7%82%B9%E8%BF%90%E5%8A%A8","aria-label":"圆点运动 permalink","class":"anchor"},"children":[{"type":"raw","value":"<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>"}]},{"type":"text","value":"圆点运动","position":{"start":{"line":212,"column":6,"offset":7405},"end":{"line":212,"column":10,"offset":7409}}}],"position":{"start":{"line":212,"column":1,"offset":7400},"end":{"line":212,"column":10,"offset":7409}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"本例通过在 afterDraw 方法中为边增加了一个 circle 图形，该图形沿着线运动。沿着线运动的原理：设定每一帧中，该 circle 在线上的相对位置。","position":{"start":{"line":213,"column":1,"offset":7410},"end":{"line":213,"column":81,"offset":7490}}},{"type":"raw","value":"<br />","position":{"start":{"line":213,"column":81,"offset":7490},"end":{"line":213,"column":87,"offset":7496}}}],"position":{"start":{"line":213,"column":1,"offset":7410},"end":{"line":213,"column":87,"offset":7496}}},{"type":"text","value":"\n"},{"type":"raw","value":"<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'/>","position":{"start":{"line":215,"column":1,"offset":7498},"end":{"line":215,"column":281,"offset":7778}}},{"type":"text","value":"\n"},{"type":"raw","value":"<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>","position":{"start":{"line":217,"column":1,"offset":7780},"end":{"line":252,"column":4,"offset":8628}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"虚线运动的效果"},"children":[{"type":"element","tagName":"a","properties":{"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"},"children":[{"type":"raw","value":"<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>"}]},{"type":"text","value":"虚线运动的效果","position":{"start":{"line":254,"column":6,"offset":8635},"end":{"line":254,"column":13,"offset":8642}}}],"position":{"start":{"line":254,"column":1,"offset":8630},"end":{"line":254,"column":13,"offset":8642}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"虚线运动的效果是通过计算线的 ","position":{"start":{"line":255,"column":1,"offset":8643},"end":{"line":255,"column":16,"offset":8658}}},{"type":"raw","value":"<code class=\"language-text\">lineDash</code>","position":{"start":{"line":255,"column":16,"offset":8658},"end":{"line":255,"column":26,"offset":8668}}},{"type":"text","value":" ，并在每一帧中不断修改实现。","position":{"start":{"line":255,"column":26,"offset":8668},"end":{"line":255,"column":41,"offset":8683}}},{"type":"raw","value":"<br />","position":{"start":{"line":255,"column":41,"offset":8683},"end":{"line":255,"column":47,"offset":8689}}}],"position":{"start":{"line":255,"column":1,"offset":8643},"end":{"line":255,"column":47,"offset":8689}}},{"type":"text","value":"\n"},{"type":"raw","value":"<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'/>","position":{"start":{"line":258,"column":1,"offset":8692},"end":{"line":258,"column":282,"offset":8973}}},{"type":"text","value":"\n"},{"type":"raw","value":"<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\">&lt;</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>","position":{"start":{"line":260,"column":1,"offset":8975},"end":{"line":306,"column":4,"offset":10048}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"线从无到有"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E7%BA%BF%E4%BB%8E%E6%97%A0%E5%88%B0%E6%9C%89","aria-label":"线从无到有 permalink","class":"anchor"},"children":[{"type":"raw","value":"<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>"}]},{"type":"text","value":"线从无到有","position":{"start":{"line":308,"column":6,"offset":10055},"end":{"line":308,"column":11,"offset":10060}}}],"position":{"start":{"line":308,"column":1,"offset":10050},"end":{"line":308,"column":11,"offset":10060}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"线从无到有的动画效果，同样可以通过计算 ","position":{"start":{"line":309,"column":1,"offset":10061},"end":{"line":309,"column":21,"offset":10081}}},{"type":"raw","value":"<code class=\"language-text\">lineDash</code>","position":{"start":{"line":309,"column":21,"offset":10081},"end":{"line":309,"column":31,"offset":10091}}},{"type":"text","value":" 来实现。","position":{"start":{"line":309,"column":31,"offset":10091},"end":{"line":309,"column":36,"offset":10096}}},{"type":"raw","value":"<br />","position":{"start":{"line":309,"column":36,"offset":10096},"end":{"line":309,"column":42,"offset":10102}}}],"position":{"start":{"line":309,"column":1,"offset":10061},"end":{"line":309,"column":42,"offset":10102}}},{"type":"text","value":"\n"},{"type":"raw","value":"<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'/>","position":{"start":{"line":311,"column":1,"offset":10104},"end":{"line":311,"column":278,"offset":10381}}},{"type":"text","value":"\n"},{"type":"raw","value":"<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>","position":{"start":{"line":313,"column":1,"offset":10383},"end":{"line":333,"column":4,"offset":10944}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"交互动画"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E4%BA%A4%E4%BA%92%E5%8A%A8%E7%94%BB","aria-label":"交互动画 permalink","class":"anchor"},"children":[{"type":"raw","value":"<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>"}]},{"type":"text","value":"交互动画","position":{"start":{"line":335,"column":5,"offset":10950},"end":{"line":335,"column":9,"offset":10954}}}],"position":{"start":{"line":335,"column":1,"offset":10946},"end":{"line":335,"column":9,"offset":10954}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"在交互的过程中也可以添加动画。如下图所示，当鼠标移到节点上时，所有与该节点相关联的边都展示虚线运动的动画。","position":{"start":{"line":336,"column":1,"offset":10955},"end":{"line":336,"column":54,"offset":11008}}},{"type":"raw","value":"<br />","position":{"start":{"line":336,"column":54,"offset":11008},"end":{"line":336,"column":60,"offset":11014}}},{"type":"element","tagName":"img","properties":{"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"},"children":[],"position":{"start":{"line":336,"column":60,"offset":11014},"end":{"line":336,"column":331,"offset":11285}}},{"type":"raw","value":"<br />","position":{"start":{"line":336,"column":331,"offset":11285},"end":{"line":336,"column":337,"offset":11291}}},{"type":"text","value":"上图完整 demo 即代码参见：","position":{"start":{"line":336,"column":337,"offset":11291},"end":{"line":336,"column":353,"offset":11307}}},{"type":"element","tagName":"a","properties":{"href":"https://antv.alipay.com/zh-cn/g6/3.x/demo/scatter/hover-animate.html","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"状态切换动画","position":{"start":{"line":336,"column":354,"offset":11308},"end":{"line":336,"column":360,"offset":11314}}}],"position":{"start":{"line":336,"column":353,"offset":11307},"end":{"line":336,"column":431,"offset":11385}}},{"type":"text","value":"。","position":{"start":{"line":336,"column":431,"offset":11385},"end":{"line":336,"column":432,"offset":11386}}}],"position":{"start":{"line":336,"column":1,"offset":10955},"end":{"line":336,"column":432,"offset":11386}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"这种动画涉及到了边的 ","position":{"start":{"line":338,"column":1,"offset":11388},"end":{"line":338,"column":12,"offset":11399}}},{"type":"element","tagName":"a","properties":{"href":"https://www.yuque.com/antv/g6/fqnn9w","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"状态","position":{"start":{"line":338,"column":13,"offset":11400},"end":{"line":338,"column":15,"offset":11402}}}],"position":{"start":{"line":338,"column":12,"offset":11399},"end":{"line":338,"column":54,"offset":11441}}},{"type":"text","value":"。在自定义边时复写 ","position":{"start":{"line":338,"column":54,"offset":11441},"end":{"line":338,"column":64,"offset":11451}}},{"type":"raw","value":"<code class=\"language-text\">setState</code>","position":{"start":{"line":338,"column":64,"offset":11451},"end":{"line":338,"column":74,"offset":11461}}},{"type":"text","value":" 方法，可对边的各种状态进行监听。鼠标移动到节点上，相关边的某个状态被开启，","position":{"start":{"line":338,"column":74,"offset":11461},"end":{"line":338,"column":112,"offset":11499}}},{"type":"raw","value":"<code class=\"language-text\">setState</code>","position":{"start":{"line":338,"column":112,"offset":11499},"end":{"line":338,"column":122,"offset":11509}}},{"type":"text","value":" 方法中监听到后开启动画效果。步骤如下：","position":{"start":{"line":338,"column":122,"offset":11509},"end":{"line":338,"column":142,"offset":11529}}}],"position":{"start":{"line":338,"column":1,"offset":11388},"end":{"line":338,"column":142,"offset":11529}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"自定义边中复写 ","position":{"start":{"line":340,"column":3,"offset":11533},"end":{"line":340,"column":11,"offset":11541}}},{"type":"raw","value":"<code class=\"language-text\">setState</code>","position":{"start":{"line":340,"column":11,"offset":11541},"end":{"line":340,"column":21,"offset":11551}}},{"type":"text","value":" 方法监听该边的状态，以及某状态下的动画效果；","position":{"start":{"line":340,"column":21,"offset":11551},"end":{"line":340,"column":44,"offset":11574}}}],"position":{"start":{"line":340,"column":1,"offset":11531},"end":{"line":340,"column":44,"offset":11574}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"监听中间的节点的 ","position":{"start":{"line":341,"column":3,"offset":11577},"end":{"line":341,"column":12,"offset":11586}}},{"type":"raw","value":"<code class=\"language-text\">mouseenter</code>","position":{"start":{"line":341,"column":12,"offset":11586},"end":{"line":341,"column":24,"offset":11598}}},{"type":"text","value":" 和 ","position":{"start":{"line":341,"column":24,"offset":11598},"end":{"line":341,"column":27,"offset":11601}}},{"type":"raw","value":"<code class=\"language-text\">mouseleave</code>","position":{"start":{"line":341,"column":27,"offset":11601},"end":{"line":341,"column":39,"offset":11613}}},{"type":"text","value":" 事件，触发相关边的状态变化。","position":{"start":{"line":341,"column":39,"offset":11613},"end":{"line":341,"column":54,"offset":11628}}}],"position":{"start":{"line":341,"column":1,"offset":11575},"end":{"line":341,"column":54,"offset":11628}}},{"type":"text","value":"\n"}],"position":{"start":{"line":340,"column":1,"offset":11531},"end":{"line":341,"column":54,"offset":11628}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"下面代码节选自 demo ","position":{"start":{"line":343,"column":1,"offset":11630},"end":{"line":343,"column":14,"offset":11643}}},{"type":"element","tagName":"a","properties":{"href":"https://antv.alipay.com/zh-cn/g6/3.x/demo/scatter/hover-animate.html","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"状态切换动画","position":{"start":{"line":343,"column":15,"offset":11644},"end":{"line":343,"column":21,"offset":11650}}}],"position":{"start":{"line":343,"column":14,"offset":11643},"end":{"line":343,"column":92,"offset":11721}}},{"type":"text","value":"，请注意省略了部分代码，只展示了交互相关以及边动画相关的代码。","position":{"start":{"line":343,"column":92,"offset":11721},"end":{"line":343,"column":123,"offset":11752}}}],"position":{"start":{"line":343,"column":1,"offset":11630},"end":{"line":343,"column":123,"offset":11752}}},{"type":"text","value":"\n"},{"type":"raw","value":"<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\">&lt;</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>","position":{"start":{"line":344,"column":1,"offset":11753},"end":{"line":423,"column":4,"offset":13740}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"raw","value":"<span style=\"background-color: rgb(251, 233, 231); color: rgb(139, 53, 56)\">","position":{"start":{"line":425,"column":1,"offset":13742},"end":{"line":425,"column":77,"offset":13818}}},{"type":"text","value":" ","position":{"start":{"line":425,"column":77,"offset":13818},"end":{"line":425,"column":78,"offset":13819}}},{"type":"text","value":" ","position":{"start":{"line":425,"column":78,"offset":13819},"end":{"line":425,"column":84,"offset":13825}}},{"type":"text","value":" ","position":{"start":{"line":425,"column":84,"offset":13825},"end":{"line":425,"column":90,"offset":13831}}},{"type":"text","value":"注意：","position":{"start":{"line":425,"column":90,"offset":13831},"end":{"line":425,"column":93,"offset":13834}}},{"type":"raw","value":"</span>","position":{"start":{"line":425,"column":93,"offset":13834},"end":{"line":425,"column":100,"offset":13841}}},{"type":"text","value":"\nrunning 为 false 时，要停止动画，同时把 lineDash 清空。","position":{"start":{"line":425,"column":100,"offset":13841},"end":{"line":426,"column":41,"offset":13882}}}],"position":{"start":{"line":425,"column":1,"offset":13742},"end":{"line":426,"column":41,"offset":13882}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":428,"column":1,"offset":13884}}}}