Merge pull request #184 from MageStudio/better-tweening

better tweening, now exporting tweento function
MageStudio · Aug 12, 2022 · ed30f9d · ed30f9d
2 parents ac48507 + 5d88bfe
commit ed30f9d
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 47 deletions.
diff --git a/examples/rotateTo/index.js b/examples/rotateTo/index.js
@@ -69,7 +69,7 @@ export default class Intro extends Level {
         cube.setMaterialFromName(constants.MATERIALS.STANDARD, { roughness: .5, metalness: 0 });
         setTimeout(() => {
             cube.rotateTo({ x: 4, y: 4, z: 4 }, 5000, { loop: easing.LOOPING.BOUNCE, easing: easing.FUNCTIONS.Quadratic.InOut });
-            cube.scaleTo({ x: 2, y: 2, z: 2 }, 5000, { loop: easing.LOOPING.BOUNCE });
+            cube.scaleTo({ x: 2, y: 2, z: 2 }, 5000, { loop: easing.LOOPING.BOUNCE }).then(() => console.log('done'));
         }, 2000)
     }
 }

diff --git a/src/entities/Entity.js b/src/entities/Entity.js
@@ -27,7 +27,7 @@ import {
     ENTITY_TYPES,
     FLAT_ENTITY_TYPES
 } from './constants';
-import { FUNCTIONS, LOOPING }from '../lib/easing';
+import { FUNCTIONS, LOOPING, tweenTo }from '../lib/easing';
 
 export default class Entity extends EventDispatcher {
 
@@ -521,61 +521,28 @@ export default class Entity extends EventDispatcher {
         }
     }
 
-    scaleTo(scale = this.getScale(), time = 250, { easing = FUNCTIONS.Linear.None, loop = LOOPING.NONE } = {}) {
+    scaleTo(scale = this.getScale(), time = 250, options = {}) {
         const { x, y, z } = this.getScale();
-        const targetScale = { x, y, z, ...scale };
+        const target = { x, y, z, ...scale };
+        const onUpdate = value => !this.isDisposed() && this.setScale(value)
 
-        return new Promise(resolve => {
-            const between = new Between({ x, y, z}, targetScale)
-                .time(time)
-                .easing(easing);
-
-            if (loop) {
-                between.loop(loop);
-            }
-
-            between
-                .on('update', value => !this.isDisposed() && this.setScale(value))
-                .on('complete', resolve)
-        })
+        return tweenTo({ x, y, z }, target, { ...options, time, onUpdate });
     }
 
-    rotateTo(rotation = this.getRotation(), time = 250, { easing = FUNCTIONS.Linear.None, loop = LOOPING.NONE } = {}) {
+    rotateTo(rotation = this.getRotation(), time = 250, options = {}) {
         const { x, y, z } = this.getRotation();
-        const targetRotation = { x, y, z, ...rotation };
+        const target = { x, y, z, ...rotation };
+        const onUpdate = value => !this.isDisposed() && this.setRotation(value)
 
-        return new Promise((resolve) => {
-            const between = new Between({ x, y, z}, targetRotation)
-                .time(time)
-                .easing(easing);
-
-            if (loop) {
-                between.loop(loop);
-            }
-
-            between
-                .on('update', value => !this.isDisposed() && this.setRotation(value))
-                .on('complete', resolve)
-        });
+        return tweenTo({ x, y, z }, target, { ...options, time, onUpdate });
     }
 
-    goTo(position = this.getPosition(), time = 250, { easing = FUNCTIONS.Linear.None, loop = LOOPING.NONE } = {}) {
+    goTo(position = this.getPosition(), time = 250, options = {}) {
         const { x, y, z } = this.getPosition();
-        const targetPosition = { x, y, z, ...position };
+        const target = { x, y, z, ...position };
+        const onUpdate = value => !this.isDisposed() && this.setPosition(value);
 
-        return new Promise((resolve) => {
-            const between = new Between({ x, y, z}, targetPosition)
-                .time(time)
-                .easing(easing);
-
-            if (loop) {
-                between.loop(loop);
-            }
-
-            between
-                .on('update', value => !this.isDisposed() && this.setPosition(value))
-                .on('complete', resolve)
-        });
+        return tweenTo({ x, y, z }, target, { ...options, time, onUpdate });
     }
 
     setUuid = (uuid) => {

diff --git a/src/lib/easing.js b/src/lib/easing.js
@@ -6,7 +6,43 @@ export const LOOPING = {
     NONE: false
 };
 
+export const EASING_EVENTS = {
+    UPDATE: 'update',
+    COMPLETE: 'complete'
+};
+
 export const FUNCTIONS = {
     ...between.Easing
 };
 
+export const tweenTo = (origin, target, options = {}) => (
+    new Promise((resolve) => {
+        const {
+            time,
+            easing = FUNCTIONS.Linear.None,
+            loop = LOOPING.NONE,
+            onUpdate = f => f,
+            repeat = undefined
+        } = options;
+
+        const tween = new between(origin, target)
+            .time(time)
+            .easing(easing)
+            .on(EASING_EVENTS.UPDATE, onUpdate)
+
+        const infinite = loop && !repeat;
+        const onComplete = () => resolve(tween, infinite);
+
+        if (loop) {
+            tween.loop(loop, repeat);
+        }
+
+        if (infinite) {
+            const timeToCompleteLoop = time * 2;
+            setTimeout(onComplete, timeToCompleteLoop);
+        } else {
+            tween.on(EASING_EVENTS.COMPLETE, onComplete);
+        }
+    })
+);
+