cax-svg - add animation demo

packages/cax-svg/cax/svg.js

@@ -5,10 +5,18 @@ function renderSVG(vdom, canvas, scope) {
   const svg = new SVG(vdom)
   stage.add(svg)
   stage.update()
-
+  triggerAddedStage(svg)
   return svg.children[0]
 }
 
+function triggerAddedStage(svg) {
+  svg.addedStage && svg.addedStage()
+
+  svg.children && svg.children.forEach(child => {
+    triggerAddedStage(child)
+  })
+}
+
 export {
   renderSVG,
   html

packages/cax-svg/cax/svg/animate.js

@@ -0,0 +1,70 @@
+import pathTransition from '../pasition/index'
+
+export function animate(obj, option) {
+  const valueList = option.values.split(';').filter(item => item.trim() !== '')
+  let index = 0,
+    count = 0,
+    stage
+  const len = valueList.length
+  const duration = parseFloat(option.dur) / len * 1000
+  function _animate() {
+    const nextIndex = index + 1 === len ? 0 : index + 1
+    pathTransition.animate({
+      from: valueList[index],
+      to: valueList[nextIndex],
+      duration: duration,
+      easing: function (v) { return v },
+      begin: function () {
+        stage = obj.stage
+      },
+      progress: function (shapes, percent) {
+        obj.d = toSVGString(shapes)
+        stage.update()
+      },
+      end: function (shapes) {
+        count++
+        index = nextIndex
+        if (option.repeatCount === 'indefinite') {
+          _animate()
+        } else {
+          if (count < Number(option.repeatCount)) {
+            _animate()
+          }
+        }
+
+      }
+    })
+  }
+
+  if (obj.stage) {
+    _animate()
+  } else {
+    obj.addedStage = () => {
+      _animate()
+    }
+  }
+
+}
+
+
+function toSVGString(shapes) {
+  return shapes.map(function (shape) {
+    shape.forEach(function (point, idx) {
+      if (!idx) {
+        /*
+         * 若是第一个点数组，那么对该点数组的处理是前面加M,然后前两个点后面加C
+         * */
+        point.splice(2, 0, "C");
+        point.unshift("M");
+      } else {
+        /*
+         * 除了第一个点数据外,所有的点数组的前两个点删除掉
+         * */
+        point.splice(0, 2, "C");
+      }
+    });
+    return shape.map(function (point) {
+      return point.join(" ");
+    }).join("");
+  }).join("")
+};

packages/cax-svg/cax/svg/index.js

@@ -8,6 +8,7 @@ import { polygon } from './polygon'
 import { path } from './path'
 import { pasition } from './pasition'
 import { group } from './group'
+import { animate } from './animate'
 
 class SVG extends Group {
   constructor(vdom) {
@@ -58,7 +59,11 @@ class SVG extends Group {
         break
 
       case 'path':
-        parent.add(path(vdomChild.props))
+        const obj = path(vdomChild.props)
+        parent.add(obj)
+        if(vdomChild.children && vdomChild.children[0] && vdomChild.children[0].type === 'animate'){
+          animate(obj, vdomChild.children[0].props)
+        }
         break
 
       case 'pasition':

packages/cax-svg/pages/animate/index.js

@@ -7,7 +7,7 @@ Page({
 
     const svg = renderSVG(html`
 <svg width="300" height="200">
-  <path d="M 256,213 C 245,181 206,187 234,262 147,181 169,71.2 233,18 220,56 235,81 283,88 285,78.7 286,69.3 288,60 289,61.3 290,62.7 291,64 291,64 297,63 300,63 303,63 309,64 309,64 310,62.7 311,61.3 312,60 314,69.3 315,78.7 317,88 365,82 380,56 367,18 431,71 453,181 366,262 394,187 356,181 344,213 328,185 309,184 300,284 291,184 272,185 256,213 Z" style="stroke:#ff0000; fill: #ff0000">
+  <path d="M 256,213 C 245,181 206,187 234,262 147,181 169,71.2 233,18 220,56 235,81 283,88 285,78.7 286,69.3 288,60 289,61.3 290,62.7 291,64 291,64 297,63 300,63 303,63 309,64 309,64 310,62.7 311,61.3 312,60 314,69.3 315,78.7 317,88 365,82 380,56 367,18 431,71 453,181 366,262 394,187 356,181 344,213 328,185 309,184 300,284 291,184 272,185 256,213 Z" style="stroke:#ff0000; fill: black">
     <animate dur="32s" repeatCount="indefinite" attributeName="d" values="M 256,213 C 245,181 206,187 234,262 147,181 169,71.2 233,18   220,56   235,81   283,88   285,78.7 286,69.3 288,60   289,61.3 290,62.7 291,64   291,64   297,63   300,63   303,63   309,64   309,64   310,62.7 311,61.3 312,60   314,69.3 315,78.7 317,88   365,82   380,56   367,18   431,71   453,181 366,262 394,187 356,181 344,213 328,185 309,184 300,284 291,184 272,185 256,213 Z;
 
 		     M 212,220 C 197,171 156,153 123,221 109,157 120,109  159,63.6 190,114  234,115  254,89.8 260,82.3 268,69.6 270,60.3 273,66.5 275,71.6 280,75.6 286,79.5 294,79.8 300,79.8 306,79.8 314,79.5 320,75.6 325,71.6 327,66.5 330,60.3 332,69.6 340,82.3 346,89.8 366,115  410,114  441,63.6 480,109  491,157 477,221 444,153 403,171 388,220 366,188 316,200 300,248 284,200 234,188 212,220 Z;