Merge pull request #14 from fram-x/Feature-12/EnhancedTimingFunction

Feature 12/enhanced timing function

Author: chrfalch

src/packages/animated/src/Types/IAnimationProvider.ts

@@ -28,11 +28,7 @@ export interface IAnimationProvider {
   /**
    * @description Creates a timing based animation
    */
-  runTiming: (
-    master: IAnimationValue,
-    duration: number,
-    callback?: () => void,
-  ) => void;
+  runTiming: (master: IAnimationValue, duration: number) => void;
 
   /**
    * @description Creates an animated value

src/packages/animated/src/react-native-animated/Implementation/runTiming.ts

@@ -1,18 +1,13 @@
 import { Animated, Easing } from "react-native";
 import { IAnimationValue } from "../../Types";
 
-export const runTiming = (
-  master: IAnimationValue,
-  duration: number,
-  callback?: () => void
-): void => {
+export const runTiming = (master: IAnimationValue, duration: number): void => {
   Animated.timing(master as Animated.Value, {
     toValue: duration,
     duration,
     easing: Easing.linear,
-    isInteraction: false
+    isInteraction: false,
   }).start(() => {
     (master as Animated.Value).removeAllListeners();
-    callback && callback();
   });
 };

src/packages/animated/src/react-native-reanimated/Implementation/runTiming.ts

@@ -2,71 +2,53 @@ import Animated, { Easing } from "react-native-reanimated";
 import { IAnimationValue } from "../../Types";
 // @ts-ignore
 import { always } from "react-native-reanimated/src/base";
+
 const {
   Clock,
   Value,
-  block,
-  timing,
-  call,
+  sub,
   cond,
+  greaterOrEq,
+  call,
   stopClock,
   set,
   startClock,
   clockRunning,
-  onChange
 } = Animated;
 
-export const runTiming = (
-  master: IAnimationValue,
-  duration: number,
-  callback?: () => void
-) => {
+export const runTiming = (master: IAnimationValue, duration: number) => {
   const clock = new Clock();
-  let animation: Animated.Node<number>;
-  animation = always(
-    internalRunTiming(
-      clock,
-      master as Animated.Value<number>,
-      {
-        toValue: duration,
-        duration,
-        easing: Easing.linear
-      },
-      () => {
-        // @ts-ignore
-        animation.__detach();
-        callback && callback();
-      }
-    )
+  let timing: Animated.Node<number>;
+
+  const startTime = new Value(0);
+  const frameTime = sub(clock, startTime);
+  const value = master as Animated.Value<number>;
+
+  timing = always(
+    cond(
+      clockRunning(clock),
+      [
+        cond(greaterOrEq(frameTime, duration), [
+          // Stop animation (duration has been reached)
+          stopClock(clock),
+          set(value, duration),
+          call([], () =>
+            // @ts-ignore
+            timing.__detach(),
+          ),
+        ]),
+        // Update animation value
+        set(value, frameTime),
+      ],
+      [
+        // Start (clock is not running)
+        set(startTime, clock),
+        set(value, frameTime),
+        startClock(clock),
+      ],
+    ),
   );
+
   // @ts-ignore
-  animation.__attach();
+  timing.__attach();
 };
-
-function internalRunTiming(
-  clock: Animated.Clock,
-  value: Animated.Value<number>,
-  config: Animated.TimingConfig,
-  callback: () => void
-) {
-  const state = {
-    finished: new Value(0),
-    position: new Value(0),
-    time: new Value(0),
-    frameTime: new Value(0)
-  };
-
-  return block([
-    onChange(config.toValue, set(state.frameTime, 0)),
-    cond(clockRunning(clock), 0, [
-      set(state.finished, 0),
-      set(state.time, 0),
-      set(value, state.position),
-      set(state.frameTime, 0),
-      startClock(clock)
-    ]),
-    timing(clock, state, config),
-    set(value, state.position),
-    cond(state.finished, [stopClock(clock), call([], callback)])
-  ]);
-}