Tween easing, keyframes, style, transform, Color corrections

foo123 · Dec 5, 2022 · ec664e5 · ec664e5
1 parent 47fac90
commit ec664e5
Show file tree

Hide file tree

Showing 12 changed files with 440 additions and 307 deletions.
diff --git a/README.md b/README.md
@@ -58,15 +58,35 @@ const square = Polygon([
     [cx+r,cy+r]
 ]);
 const tween = Tween({
-    from: {
-        shape: circle,
-        stroke: 'cyan'
+    keyframes: {
+        "0%": {
+            shape: circle,
+            style: {
+                stroke: 'cyan'
+            },
+            easing: 'ease-out'
+        },
+        "30%": {
+            shape: square,
+            transform: {
+                rotate: [0, square.getCenter().x, square.getCenter().y]
+            },
+            style: {
+                stroke: 'orange'
+            },
+            easing: 'ease-out-elastic'
+        },
+        "100%": {
+            shape: square,
+            transform: {
+                rotate: [45, square.getCenter().x, square.getCenter().y]
+            },
+            style: {
+                stroke: 'blue'
+            }
+        }
     },
-    to: {
-        shape: square,
-        stroke: 'orange'
-    },
-    duration: 1000
+    duration: 2000
 });
 plane.add(tween);
 tween.start();