Testing old anims

Author: kmagiera

Example/Reanimated/Animated.js

@@ -8,6 +8,26 @@ import createAnimatedComponent from './createAnimatedComponent';
 import decay from './animations/decay';
 import timing from './animations/timing';
 import spring from './animations/spring';
+import TimingAnimation from './animations/TimingAnimation';
+import SpringAnimation from './animations/SpringAnimation';
+import DecayAnimation from './animations/DecayAnimation';
+
+function backwardsCompatibleAnim(node, AnimationClass) {
+  return (clock, state, config) => {
+    if (config !== undefined) {
+      return node(clock, state, config);
+    }
+    // reassign to match spec of old Animated lib where first arg was value
+    // and second arg was animation config
+    const value = clock;
+    config = state;
+    return {
+      start: () => {
+        value.animate(new AnimationClass(config));
+      },
+    };
+  };
+}
 
 const Animated = {
   // components
@@ -26,9 +46,9 @@ const Animated = {
   ...derived,
 
   // animations
-  decay,
-  timing,
-  spring,
+  decay: backwardsCompatibleAnim(decay, DecayAnimation),
+  timing: backwardsCompatibleAnim(timing, TimingAnimation),
+  spring: backwardsCompatibleAnim(spring, SpringAnimation),
 };
 
 export default Animated;

Example/Reanimated/CoreAnimated.js

@@ -1,69 +1,40 @@
 import Animation from './Animation';
 
-import { shouldUseNativeDriver } from '../NativeAnimatedHelper';
+import decay from './decay';
+import { block, clockRunning, startClock, stopClock, cond } from '../base';
+import Clock from '../core/AnimatedClock';
+import AnimatedValue from '../core/AnimatedValue';
 
 class DecayAnimation extends Animation {
   constructor(config) {
     super();
     this._deceleration =
       config.deceleration !== undefined ? config.deceleration : 0.998;
     this._velocity = config.velocity;
-    this._useNativeDriver = shouldUseNativeDriver(config);
-    this.__isInteraction =
-      config.isInteraction !== undefined ? config.isInteraction : true;
-    this.__iterations = config.iterations !== undefined ? config.iterations : 1;
   }
 
-  __getNativeAnimationConfig() {
-    return {
-      type: 'decay',
-      deceleration: this._deceleration,
-      velocity: this._velocity,
-      iterations: this.__iterations,
+  start(value) {
+    this._clock = new Clock();
+    const state = {
+      finished: new AnimatedValue(0),
+      velocity: new AnimatedValue(this._velocity),
+      position: value,
+      time: new AnimatedValue(0),
     };
-  }
-
-  start(fromValue, onUpdate, onEnd, previousAnimation, animatedValue) {
-    this.__active = true;
-    this._lastValue = fromValue;
-    this._fromValue = fromValue;
-    this._onUpdate = onUpdate;
-    this.__onEnd = onEnd;
-    this._startTime = Date.now();
-    if (this._useNativeDriver) {
-      this.__startNativeAnimation(animatedValue);
-    } else {
-      this._animationFrame = requestAnimationFrame(this.onUpdate.bind(this));
-    }
-  }
-
-  onUpdate() {
-    const now = Date.now();
 
-    const value =
-      this._fromValue +
-      this._velocity /
-        (1 - this._deceleration) *
-        (1 - Math.exp(-(1 - this._deceleration) * (now - this._startTime)));
-
-    this._onUpdate(value);
-
-    if (Math.abs(this._lastValue - value) < 0.1) {
-      this.__debouncedOnEnd({ finished: true });
-      return;
-    }
+    const config = {
+      deceleration: this._deceleration,
+    };
 
-    this._lastValue = value;
-    if (this.__active) {
-      this._animationFrame = requestAnimationFrame(this.onUpdate.bind(this));
-    }
+    return block([
+      cond(clockRunning(this._clock), 0, [startClock(this._clock)]),
+      decay(this._clock, state, config),
+      cond(state.finished, stopClock(this._clock)),
+    ]);
   }
 
   stop() {
-    super.stop();
-    this.__active = false;
-    global.cancelAnimationFrame(this._animationFrame);
-    this.__debouncedOnEnd({ finished: false });
+    // not implemented yet
   }
 }
 

Example/Reanimated/animations/DecayAnimation.js

@@ -1,15 +1,12 @@
 import AnimatedValue from '../core/AnimatedValue';
 import Animation from './Animation';
 import SpringConfig from '../SpringConfig';
-import SpringNode from '../nodes/SpringNode';
-import AnimatedOnChange from '../core/AnimatedOnChange';
-import AnimatedDetach from '../core/AnimatedDetach';
-import AnimatedOp from '../nodes/AnimatedOp';
+import spring from './spring';
 
-import { clock } from '../core/AnimatedClock';
+import { block, clockRunning, startClock, stopClock, cond } from '../base';
+import Clock from '../core/AnimatedClock';
 
 import invariant from 'fbjs/lib/invariant';
-import { shouldUseNativeDriver } from '../NativeAnimatedHelper';
 
 function withDefault(value, defaultValue) {
   if (value === undefined || value === null) {
@@ -32,10 +29,6 @@ export default class SpringAnimation extends Animation {
     this._lastVelocity = withDefault(config.velocity, 0);
     this._toValue = config.toValue;
     this._delay = withDefault(config.delay, 0);
-    this._useNativeDriver = shouldUseNativeDriver(config);
-    this.__isInteraction =
-      config.isInteraction !== undefined ? config.isInteraction : true;
-    this.__iterations = config.iterations !== undefined ? config.iterations : 1;
 
     if (
       config.stiffness !== undefined ||
@@ -88,12 +81,12 @@ export default class SpringAnimation extends Animation {
   }
 
   start(value) {
-    this._finished = new AnimatedValue(0);
+    this._clock = new Clock();
     const state = {
-      finished: this._finished,
-      velocity: this._initialVelocity,
+      finished: new AnimatedValue(0),
+      velocity: new AnimatedValue(this._initialVelocity),
       position: value,
-      time: 0,
+      time: new AnimatedValue(0),
     };
 
     const config = {
@@ -106,20 +99,14 @@ export default class SpringAnimation extends Animation {
       restDisplacementThreshold: this._restDisplacementThreshold,
     };
 
-    const step = new SpringNode(clock, state, config);
-    const detach = new AnimatedDetach(step);
-    const clb = finished => {
-      console.log('FINISHED', finished);
-    };
-    const call = new AnimatedOp([this._finished], ([finished]) =>
-      clb(finished)
-    );
-    const block = new AnimatedOp([detach, call], () => {});
-    new AnimatedOnChange(this._finished, block).__attach();
-    step.__attach();
+    return block([
+      cond(clockRunning(this._clock), 0, [startClock(this._clock)]),
+      spring(this._clock, state, config),
+      cond(state.finished, stopClock(this._clock)),
+    ]);
   }
 
   stop() {
-    this._finished && this._finished.setValue(1);
+    // this._finished && this._finished.setValue(1);
   }
 }

Example/Reanimated/animations/SpringAnimation.js

@@ -1,56 +1,35 @@
 import AnimatedValue from '../core/AnimatedValue';
-import TimingNode from '../nodes/TimingNode';
-import Animation from './Animation';
-
-import { clock } from '../core/AnimatedClock';
-import AnimatedOnChange from '../core/AnimatedOnChange';
-import AnimatedDetach from '../core/AnimatedDetach';
+import timing from './timing';
+import { block, clockRunning, startClock, stopClock, cond } from '../base';
+import Clock from '../core/AnimatedClock';
+import Easing from '../Easing';
 
-import { shouldUseNativeDriver } from '../NativeAnimatedHelper';
+import Animation from './Animation';
 
-let _easeInOut;
-function easeInOut() {
-  if (!_easeInOut) {
-    const Easing = require('Easing');
-    _easeInOut = Easing.inOut(Easing.ease);
-  }
-  return _easeInOut;
-}
+const easeInOut = Easing.inOut(Easing.ease);
 
 export default class TimingAnimation extends Animation {
-  _startTime;
-  _fromValue;
   _toValue;
   _duration;
-  _delay;
   _easing;
-  _onUpdate;
-  _animationFrame;
-  _timeout;
-  _useNativeDriver;
 
-  _finished;
+  _clock;
 
   constructor(config) {
     super();
-    this._config = { ...config };
     this._toValue = config.toValue;
-    this._easing = config.easing !== undefined ? config.easing : easeInOut();
+    this._easing = config.easing !== undefined ? config.easing : easeInOut;
     this._duration = config.duration !== undefined ? config.duration : 500;
-    this._delay = config.delay !== undefined ? config.delay : 0;
-    this.__iterations = config.iterations !== undefined ? config.iterations : 1;
-    this.__isInteraction =
-      config.isInteraction !== undefined ? config.isInteraction : true;
-    this._useNativeDriver = shouldUseNativeDriver(config);
   }
 
   start(value) {
-    this._finished = new AnimatedValue(0);
+    this._clock = new Clock();
+
     const state = {
-      finished: this._finished,
+      finished: new AnimatedValue(0),
       position: value,
-      time: 0,
-      frameTime: 0,
+      time: new AnimatedValue(0),
+      frameTime: new AnimatedValue(0),
     };
 
     const config = {
@@ -59,12 +38,14 @@ export default class TimingAnimation extends Animation {
       easing: this._easing,
     };
 
-    const step = new TimingNode(clock, state, config);
-    new AnimatedOnChange(this._finished, new AnimatedDetach(step)).__attach();
-    step.__attach();
+    return block([
+      cond(clockRunning(this._clock), 0, [startClock(this._clock)]),
+      timing(this._clock, state, config),
+      cond(state.finished, stopClock(this._clock)),
+    ]);
   }
 
   stop() {
-    this._finished && this._finished.setValue(1);
+    // this._finished && this._finished.setValue(1);
   }
 }