feat: Enhance transition api

__tests__/model/animation.spec.ts

@@ -80,6 +80,7 @@ describe('Animation', () => {
       delay: 0,
       duration: 100,
       timing: 'linear',
+      fill: 'forwards',
       start: startCb,
       progress: progressCb,
       complete: completeCb,
@@ -262,6 +263,7 @@ describe('Animation', () => {
     anim.start('v', 'end', {
       delay: 0,
       duration: 50,
+      fill: 'forwards',
       interp: interpFactory,
       progress: progressCb,
     })

examples/src/App.tsx

@@ -1,51 +1,54 @@
-import { Routes, Route } from 'react-router-dom'
+import { Route, Routes } from 'react-router-dom'
 import { ExampleList } from './pages'
-import { GraphExample } from './pages/graph/index'
-import { PositionExample } from './pages/position/position'
-import { CoordExample } from './pages/position/coord'
+import { AnimateElementExample } from './pages/animation/animateElement'
+import { ComplexTransitionExample } from './pages/animation/complexTransition'
+import { EdgeTransitionExample } from './pages/animation/edgeTransition'
+import { TransitionConfExample } from './pages/animation/transitionConf'
 import { AutoResizeExample } from './pages/auto-resize'
-import { HtmlExample } from './pages/html'
-import { CustomNodeExample } from './pages/shape/custom-node'
-import { GroupExample } from './pages/group'
-import { EmbedDndExample } from './pages/embed/dnd'
-import { ReactExample } from './pages/react/index'
-import { ReactPortalExample } from './pages/react/portal'
-import { PortsDefaultsExample } from './pages/ports/defaults'
-import { PortsConnectedExample } from './pages/ports/connected'
-import { EdgeExample } from './pages/edge'
-import { RouterExample } from './pages/router'
-import { ToolArrowheadExample } from './pages/edge/tool/arrowhead'
-import { ToolButtonExample } from './pages/edge/tool/button'
-import { CustomConnectorExample } from './pages/edge/custom-connector'
-import { CustomRouterExample } from './pages/edge/custom-router'
-import { NativeMarkerExample } from './pages/edge/native-marker'
-import { CustomMarkerExample } from './pages/edge/custom-marker'
-import { EdgeEditorExample } from './pages/edge/edge-editor'
-import { OffsetRoundedExample } from './pages/connector/offset-rounded'
-import { XmindCurveExample } from './pages/connector/xmind-curve'
-import { ToolsCleanExample } from './pages/tools/clean'
 import { CaseBpmnExample } from './pages/case/bpmn'
 import { CaseClassExample } from './pages/case/class'
 import { CaseDagExample } from './pages/case/dag'
 import { CaseElkExample } from './pages/case/elk'
 import { CaseErExample } from './pages/case/er'
 import { CaseMindExample } from './pages/case/mind'
 import { CaseSwimlaneExample } from './pages/case/swimlane'
+import { OffsetRoundedExample } from './pages/connector/offset-rounded'
+import { XmindCurveExample } from './pages/connector/xmind-curve'
+import { EdgeExample } from './pages/edge'
+import { CustomConnectorExample } from './pages/edge/custom-connector'
+import { CustomMarkerExample } from './pages/edge/custom-marker'
+import { CustomRouterExample } from './pages/edge/custom-router'
+import { EdgeEditorExample } from './pages/edge/edge-editor'
+import { NativeMarkerExample } from './pages/edge/native-marker'
+import { ToolArrowheadExample } from './pages/edge/tool/arrowhead'
+import { ToolButtonExample } from './pages/edge/tool/button'
+import { SegmentsExample } from './pages/edge/tool/segments'
+import { EmbedDndExample } from './pages/embed/dnd'
+import { GraphFromJSONExample } from './pages/graph/from-json'
+import { GraphExample } from './pages/graph/index'
+import { GroupExample } from './pages/group'
+import { HistoryExample } from './pages/history'
+import { HtmlExample } from './pages/html'
 import { OrgExample } from './pages/org'
-import { SnaplineExample } from './pages/plugins/snapline'
 import { ClipboardExample } from './pages/plugins/clipboard'
-import { KeyboardExample } from './pages/plugins/keyboard'
 import { DndExample } from './pages/plugins/dnd'
+import { ExportExample } from './pages/plugins/export'
+import { KeyboardExample } from './pages/plugins/keyboard'
 import { ScrollerExample } from './pages/plugins/scroller'
 import { SelectionExample } from './pages/plugins/selection'
+import { SnaplineExample } from './pages/plugins/snapline'
 import { StencilExample } from './pages/plugins/stencil'
 import { TransformExample } from './pages/plugins/transform'
 import { UndoExample } from './pages/plugins/undo'
-import { ExportExample } from './pages/plugins/export'
-import { TransitionExample } from './pages/animation/transition'
-import { HistoryExample } from './pages/history'
-import { SegmentsExample } from './pages/edge/tool/segments'
-import { GraphFromJSONExample } from './pages/graph/from-json'
+import { PortsConnectedExample } from './pages/ports/connected'
+import { PortsDefaultsExample } from './pages/ports/defaults'
+import { CoordExample } from './pages/position/coord'
+import { PositionExample } from './pages/position/position'
+import { ReactExample } from './pages/react/index'
+import { ReactPortalExample } from './pages/react/portal'
+import { RouterExample } from './pages/router'
+import { CustomNodeExample } from './pages/shape/custom-node'
+import { ToolsCleanExample } from './pages/tools/clean'
 import { VirtualRenderExample } from './pages/virtual-render'
 import './App.less'
 
@@ -106,7 +109,22 @@ function App() {
       <Route path="/plugins/undo" element={<UndoExample />} />
       <Route path="/plugins/export" element={<ExportExample />} />
 
-      <Route path="/animation/transition" element={<TransitionExample />} />
+      <Route
+        path="/animation/complexTransition"
+        element={<ComplexTransitionExample />}
+      />
+      <Route
+        path="/animation/transitionConf"
+        element={<TransitionConfExample />}
+      />
+      <Route
+        path="/animation/animateElement"
+        element={<AnimateElementExample />}
+      />
+      <Route
+        path="/animation/edgeTransition"
+        element={<EdgeTransitionExample />}
+      />
       <Route path="/history" element={<HistoryExample />} />
       <Route path="/virtual-render" element={<VirtualRenderExample />} />
     </Routes>

examples/src/pages/animation/animateElement.tsx

@@ -0,0 +1,82 @@
+import { Graph } from '@antv/x6'
+import React from 'react'
+import '../index.less'
+
+export class AnimateElementExample extends React.Component {
+  private container!: HTMLDivElement
+
+  componentDidMount() {
+    const graph = new Graph({
+      container: this.container,
+      width: 650,
+      height: 400,
+      background: {
+        color: '#F2F7FA',
+      },
+    })
+
+    const node1 = graph.addNode({
+      shape: 'rect',
+      x: 10,
+      y: 10,
+      width: 80,
+      height: 40,
+      label: 'rect',
+    })
+    const view1 = graph.findViewByCell(node1)
+
+    view1?.once('view:render', ({ view }) => {
+      // 可使用 animate、animateMotion、animateTransform 等原生svg动画元素来实现动画
+      // 元素相关API可参考：https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/animateMotion
+      const animateEle = document.createElementNS(
+        'http://www.w3.org/2000/svg',
+        'animate',
+      )
+      animateEle.setAttribute('attributeType', 'CSS')
+      animateEle.setAttribute('attributeName', 'fill')
+      animateEle.setAttribute('from', 'red')
+      animateEle.setAttribute('to', 'green')
+      animateEle.setAttribute('dur', '2s')
+      animateEle.setAttribute('repeatCount', 'indefinite')
+
+      view?.container?.querySelector('rect')?.appendChild(animateEle)
+    })
+
+    const node2 = graph.addNode({
+      shape: 'rect',
+      x: 80,
+      y: 120,
+      width: 40,
+      height: 40,
+    })
+    const view2 = graph.findViewByCell(node2)
+
+    view2?.once('view:render', ({ view }) => {
+      const animateEle = document.createElementNS(
+        'http://www.w3.org/2000/svg',
+        'animateTransform',
+      )
+      animateEle.setAttribute('attributeType', 'XML')
+      animateEle.setAttribute('attributeName', 'transform')
+      animateEle.setAttribute('type', 'rotate')
+      animateEle.setAttribute('from', '0 0 0')
+      animateEle.setAttribute('to', '360 0 0')
+      animateEle.setAttribute('dur', '3s')
+      animateEle.setAttribute('repeatCount', 'indefinite')
+
+      view?.container?.querySelector('rect')?.appendChild(animateEle)
+    })
+  }
+
+  refContainer = (container: HTMLDivElement) => {
+    this.container = container
+  }
+
+  render() {
+    return (
+      <div className="x6-graph-wrap">
+        <div ref={this.refContainer} className="x6-graph" />
+      </div>
+    )
+  }
+}

examples/src/pages/animation/transition.tsx → examples/src/pages/animation/complexTransition.tsx

@@ -1,8 +1,8 @@
+import { Graph, Interp, type Point, Timing } from '@antv/x6'
 import React from 'react'
-import { Graph, Cell, Point, Timing, Interp } from '@antv/x6'
 import '../index.less'
 
-export class TransitionExample extends React.Component {
+export class ComplexTransitionExample extends React.Component {
   private container!: HTMLDivElement
 
   componentDidMount() {
@@ -68,12 +68,10 @@ export class TransitionExample extends React.Component {
           start: { text: string; fontSize: number },
           end: { text: string; fontSize: number },
         ) => {
-          return function (time: number) {
-            return {
-              text: end.text.substr(0, Math.ceil(end.text.length * time)),
-              fontSize: start.fontSize + (end.fontSize - start.fontSize) * time,
-            }
-          }
+          return (time: number) => ({
+            text: end.text.substr(0, Math.ceil(end.text.length * time)),
+            fontSize: start.fontSize + (end.fontSize - start.fontSize) * time,
+          })
         },
       },
     )
@@ -98,24 +96,15 @@ export class TransitionExample extends React.Component {
       },
     })
 
-    function fly(cell: Cell) {
-      cell.transition('position', 20, {
-        delay: 0,
-        duration: 5000,
-        interp: function (a: Point.PointLike, b: number) {
-          return function (t: number) {
-            return {
-              x: a.x + 10 * b * (Math.cos(t * 2 * Math.PI) - 1),
-              y: a.y - b * Math.sin(t * 2 * Math.PI),
-            }
-          }
-        },
-      })
-    }
-
-    fly(ufo)
-
-    ufo.on('transition:complete', ({ cell }) => fly(cell))
+    ufo.transition('position', 20, {
+      delay: 0,
+      duration: 5000,
+      iterations: Infinity,
+      interp: (a: Point.PointLike, b: number) => (t: number) => ({
+        x: a.x + 10 * b * (Math.cos(t * 2 * Math.PI) - 1),
+        y: a.y - b * Math.sin(t * 2 * Math.PI),
+      }),
+    })
   }
 
   refContainer = (container: HTMLDivElement) => {