chore: add web animations api example

xiaoiver · Jan 16, 2025 · f046726 · f046726
1 parent fe4e6ba
commit f046726
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 90 deletions.
diff --git a/packages/site/docs/components/WebAnimationsAPI.vue b/packages/site/docs/components/WebAnimationsAPI.vue
@@ -1,77 +1,12 @@
 <script setup lang="tsx">
 import { App } from 'ant-design-vue';
 import { ref, onMounted } from 'vue';
-import { Canvas, Rect, parseTransform } from '@infinite-canvas-tutorial/core';
+import { Canvas, Rect } from '@infinite-canvas-tutorial/core';
 import { animate } from "motion"
 
-function convertAnimationToMotion(animation: any) {
-  const { target, keyframes, options } = animation;
-
-  const keyframesMap = {};
-  keyframes.forEach((frame: any) => {
-    Object.keys(frame).forEach((key) => {
-      if (key === 'transform') {
-        const parsed = parseTransform(frame[key]);
-        const { position: { x: tx, y: ty }, scale: { x: sx, y: sy }, rotation, skew: { x: kx, y: ky } } = parsed;
-
-        if (!keyframesMap['translateX']) {
-          keyframesMap['translateX'] = [];
-        }
-        keyframesMap['translateX'].push(tx);
-
-        if (!keyframesMap['translateY']) {
-          keyframesMap['translateY'] = [];
-        }
-        keyframesMap['translateY'].push(ty);
-
-        if (!keyframesMap['scaleX']) {
-          keyframesMap['scaleX'] = [];
-        }
-        keyframesMap['scaleX'].push(sx);
-
-        if (!keyframesMap['scaleY']) {
-          keyframesMap['scaleY'] = [];
-        }
-        keyframesMap['scaleY'].push(sy);
-
-        if (!keyframesMap['angle']) {
-          keyframesMap['angle'] = [];
-        }
-        keyframesMap['angle'].push(rotation);
-
-        if (!keyframesMap['skewX']) {
-          keyframesMap['skewX'] = [];
-        }
-        keyframesMap['skewX'].push(kx);
-
-        if (!keyframesMap['skewY']) {
-          keyframesMap['skewY'] = [];
-        }
-        keyframesMap['skewY'].push(ky);
-      } else if (key === 'transform-origin') {
-        // TODO:
-      } else {
-        if (!keyframesMap[key]) {
-          keyframesMap[key] = [];
-        }
-        keyframesMap[key].push(frame[key]);
-      }
-    });
-  });
-
-  // motion use seconds instead of milliseconds
-  options.duration = options.duration / 1000;
-
-  return {
-    target,
-    keyframes: keyframesMap,
-    options,
-  };
-}
-
 defineOptions({ name: 'Web Animations API' });
 
-const wrapper = ref<HTMLDivElement | null>(null);
+const wrapper = ref(null);
 let canvas: Canvas | null = null;
 
 onMounted(() => {
@@ -103,29 +38,9 @@ onMounted(() => {
     // // await animate(rect.position, { x: 300 }, { duration: 5 });
 
     // @see https://motion.dev/docs/animate#transforms
-    // await animate(rect, { angle: 360 }, { duration: 2 });
-    // await animate(rect, { opacity: [0, 1] }, { duration: 1.5 });
-    // await animate(rect, { scaleX: [1, 0], scaleY: [1, 0] }, { duration: 1.5, repeat: Infinity, repeatType: "reverse", });
-
-    const animation = {
-        "target": "#squareA",
-        "keyframes": [
-            {
-                "transform": "scale(0,0)",
-                fill: "red"
-            },
-            {
-                "transform": "scale(1,1)",
-                fill: 'blue'
-            }
-        ],
-        "options": {
-            "duration": 1000,
-            "easing": "ease-out"
-        }
-    };
-
-    console.log(convertAnimationToMotion(animation));
+    await animate(rect, { angle: 360 }, { duration: 2 });
+    await animate(rect, { opacity: [0, 1] }, { duration: 1.5 });
+    await animate(rect, { scaleX: [1, 0], scaleY: [1, 0] }, { duration: 1.5, repeat: Infinity, repeatType: "reverse", });
   });
 });
 

diff --git a/packages/site/docs/example/web-animations-api.md b/packages/site/docs/example/web-animations-api.md
@@ -6,4 +6,25 @@ publish: false
 import WebAnimationsAPI from '../components/WebAnimationsAPI.vue'
 </script>
 
+Motion try to be compatible with Web Animations API, see: [Improvements to Web Animations API]
+
+```ts
+import { animate } from 'motion';
+
+// @see https://motion.dev/docs/animate#transforms
+await animate(rect, { angle: 360 }, { duration: 2 });
+await animate(rect, { opacity: [0, 1] }, { duration: 1.5 });
+await animate(
+    rect,
+    { scaleX: [1, 0], scaleY: [1, 0] },
+    { duration: 1.5, repeat: Infinity, repeatType: 'reverse' },
+);
+```
+
 <WebAnimationsAPI />
+
+But there are some differences, for example:
+
+-   `duration` uses seconds instead of milliseconds
+
+[Improvements to Web Animations API]: https://motion.dev/docs/improvements-to-the-web-animations-api-dx
diff --git a/packages/site/docs/zh/example/web-animations-api.md b/packages/site/docs/zh/example/web-animations-api.md
@@ -6,4 +6,25 @@ publish: false
 import WebAnimationsAPI from '../../components/WebAnimationsAPI.vue'
 </script>
 
+Motion 尽可能兼容了 Web Animations API，详见：[Improvements to Web Animations API]
+
+```ts
+import { animate } from 'motion';
+
+// @see https://motion.dev/docs/animate#transforms
+await animate(rect, { angle: 360 }, { duration: 2 });
+await animate(rect, { opacity: [0, 1] }, { duration: 1.5 });
+await animate(
+    rect,
+    { scaleX: [1, 0], scaleY: [1, 0] },
+    { duration: 1.5, repeat: Infinity, repeatType: 'reverse' },
+);
+```
+
 <WebAnimationsAPI />
+
+但和 Web Animations API 还是有一些区别，例如：
+
+-   `duration` 使用秒而非毫秒
+
+[Improvements to Web Animations API]: https://motion.dev/docs/improvements-to-the-web-animations-api-dx