feat: useAnimator utility

src/tweening/Animator.ts

@@ -26,7 +26,7 @@ export interface TweenProvider<T> {
   ): ThreadGenerator;
 }
 
-export class Animator<Type, This extends Node> {
+export class Animator<Type, This> {
   private valueFrom: Type = null;
   private lastValue: Type;
   private keys: (() => ThreadGenerator)[] = [];
@@ -152,10 +152,12 @@ export class Animator<Type, This extends Node> {
 
   @threadable('animatorRunner')
   private *runner(): ThreadGenerator {
+    const valueFrom = this.valueFrom;
     for (let loop = 0; loop < this.loops; loop++) {
       for (let i = 0; i < this.keys.length; i++) {
         yield* this.keys[i]();
       }
+      this.valueFrom = valueFrom;
     }
   }
 

src/utils/index.ts

@@ -1,5 +1,6 @@
-export * from './slide';
 export * from './pop';
+export * from './slide';
+export * from './useAnimator';
+export * from './useProject';
 export * from './useRef';
 export * from './useScene';
-export * from './useProject';

src/utils/useAnimator.ts

@@ -0,0 +1,16 @@
+import { Animator } from "../tweening";
+
+export function useAnimator<T>(initial: T, onUpdate: (value: T) => void) {
+  const object = {
+    value: initial,
+    setValue(value: T) {
+      this.value = value;
+      onUpdate(value);
+    },
+    getValue(): T {
+      return this.value;
+    },
+  };
+
+  return () => new Animator<T, typeof object>(object, 'value');
+}