@weasel-js/animator 1.13.0 → 1.14.0

package/dist/react.js

@@ -1878,7 +1878,7 @@ function createFrame(host) {
     const all = table.waiting > 0 && host.tripwire();
     for (const anim of all ? [...animations.values()] : table.ticks()) {
       if (animations.get(anim.id) !== anim) continue;
-      const scale = clock.paused ? 0 : clock.timeScale * (anim.paused ? 0 : anim.timeScale);
+      const scale = clock.paused ? 0 : clock.timeScale * clock.drive * (anim.paused ? 0 : anim.timeScale);
       tickDepth += 1;
       try {
         if (anim.tick(table.clockOf(anim), scale)) finished.push(anim);
@@ -1899,7 +1899,7 @@ function createFrame(host) {
   };
   return {
     tick(t) {
-      const frameDt = clock.frameT == null ? 0 : Math.max(0, t - clock.frameT);
+      const frameDt = clock.frameT == null ? 0 : Math.max(0, (t - clock.frameT) * clock.drive);
       clock.frameT = t;
       framing = true;
       const dt = frameDt * (clock.paused ? 0 : Math.abs(clock.timeScale));
@@ -1931,7 +1931,7 @@ function createFrame(host) {
   };
 }
 function createAnimatorCore(host) {
-  const clock = { frameT: null, elapsed: 0, timeScale: 1, paused: false };
+  const clock = { frameT: null, elapsed: 0, timeScale: 1, paused: false, drive: 1 };
   const hub = new AnimatorEventHub();
   const codec = createCodec((on) => {
     if ("move" in on) return on.move?.place;
@@ -1958,7 +1958,7 @@ function createAnimatorCore(host) {
     codec,
     hub,
     elapsed: () => clock.elapsed,
-    direction: () => clock.timeScale < 0 ? -1 : 1,
+    direction: () => clock.timeScale * clock.drive < 0 ? -1 : 1,
     seedClock,
     showNow: (target) => targets.showNow(target),
     resting: () => targets.resting,
@@ -2044,6 +2044,14 @@ function createAnimatorCore(host) {
   return {
     api,
     tick: frame.tick,
+    follow(t, rate) {
+      const moved = clock.frameT == null ? 0 : t - clock.frameT;
+      const drive = moved < 0 || moved === 0 && rate < 0 ? -1 : 1;
+      if (drive !== clock.drive) table.turn(() => {
+        clock.drive = drive;
+      });
+      frame.tick(t);
+    },
     resumed() {
       clock.frameT = null;
     }
@@ -2055,14 +2063,27 @@ function useAnimator(opts = {}) {
   const optsRef = useLatest(opts);
   const colorOverrides = useRef(new ColorOverrideRegistry());
   const coreRef = useRef(null);
+  const followingRef = useRef(false);
+  const follow = useCallback((clock) => {
+    followingRef.current = true;
+    try {
+      coreRef.current?.follow(clock.elapsed, clock.rate);
+    } finally {
+      followingRef.current = false;
+    }
+  }, []);
   const frameLoop = useVisibleRaf(
     useCallback((t) => {
-      coreRef.current?.tick(t);
-    }, []),
+      const handle2 = optsRef.current.clock;
+      if (handle2) follow(handle2.clock);
+      else coreRef.current?.tick(t);
+    }, [follow, optsRef]),
     {
       requestFrame: opts.requestFrame,
       cancelFrame: opts.cancelFrame,
-      onResume: () => coreRef.current?.resumed()
+      onResume: () => {
+        if (!optsRef.current.clock) coreRef.current?.resumed();
+      }
     }
   );
   const frameLoopRef = useLatest(frameLoop);
@@ -2081,10 +2102,18 @@ function useAnimator(opts = {}) {
       }
       return true;
     };
-    const now = () => (optsRef.current.now ?? (typeof performance !== "undefined" ? performance.now.bind(performance) : Date.now))();
+    const now = () => {
+      const handle2 = optsRef.current.clock;
+      if (handle2) return handle2.clock.elapsed;
+      return (optsRef.current.now ?? (typeof performance !== "undefined" ? performance.now.bind(performance) : Date.now))();
+    };
     return createAnimatorCore({
       now,
-      requestFrame: () => frameLoopRef.current.request(),
+      // On a clock, a frame asked for from inside one comes with the clock's next move: one shown
+      // at the same time would only ask again.
+      requestFrame: () => {
+        if (!followingRef.current) frameLoopRef.current.request();
+      },
       cancelFrame: () => frameLoopRef.current.cancel(),
       tripwire,
       colorOverrides: colorOverrides.current
@@ -2093,6 +2122,14 @@ function useAnimator(opts = {}) {
   useInsertionEffect(() => {
     coreRef.current = core;
   }, [core]);
+  const handle = opts.clock;
+  useEffect(() => {
+    if (!handle) return;
+    core.resumed();
+    return handle.onFrame(() => {
+      if (core.api.isActive()) follow(handle.clock);
+    });
+  }, [core, handle, follow]);
   const { api } = core;
   useEffect(() => {
     const overrides = colorOverrides.current;