How to use the react-native-reanimated.timing function in react-native-reanimated

To help you get started, we’ve selected a few react-native-reanimated examples, based on popular ways it is used in public projects.

github terrysahaidak / react-native-reanimatable / lib / core / animations.js View on Github external
A.clockRunning(clock),
      // do nothing if our clock is already running
      0,
      // otherwise pre set all the values
      [
        // If the clock isn't running we reset all the animation params and start the clock
        A.set(state.finished, 0),
        A.set(state.time, 0),
        A.set(state.position, value),
        A.set(state.frameTime, 0),
        A.set(config.toValue, dest),
        A.startClock(clock),
      ],
    ),
    // we run the step here that is going to update position
    A.timing(clock, state, config),
    // if the animation is over we stop the clock
    A.cond(state.finished, A.block([A.stopClock(clock), onFinish])),
    // we made the block return the updated position
    A.set(value, state.position),
  ]);
};
github rainbow-me / rainbow / src / components / value-chart / ValueChart.js View on Github external
setTimeout(async () => {
        Animated.timing(
          this.chartsMulti[this.currentInterval],
          this._configDown
        ).start();
        Animated.timing(
          this.chartsMulti[currentInterval],
          this._configUp
        ).start();
        this.currentInterval = currentInterval;
        this._text.updateValue(
          usableData[currentInterval][usableData[currentInterval].length - 1]
            .value
        );

        await this.setState({
          currentData: usableData[currentInterval],
          isLoading: false,
        });
      });
    }
github wix / react-native-ui-lib / src / components / sharedTransition / SharedArea.js View on Github external
startTransition(show, onAnimationEnd) {
    Animated.timing(this.transition, {
      toValue: show ? 100 : 0,
      duration: 600,
      easing: Easing.bezier(0.19, 1, 0.22, 1),
      useNativeDriver: false,
    }).start(onAnimationEnd);
  }
github molenzwiebel / Mimic / frontend / components / FullscreenOverlay.tsx View on Github external
useEffect(() => {
        Animated.timing(translationY, {
            toValue: visible ? 0 : SCREEN_HEIGHT,
            duration: 300,
            easing: Easing.ease
        }).start();
    }, [visible]);
github nars-dev / nars / packages / nars-client / src / AnimatedCoders.ts View on Github external
clock,
          decodePhysicsAnimationState(animation.getState(), retainedInstances),
          decodeSpringConfig(animation.getConfig(), retainedInstances)
        );
      } else if (animationNode.hasDecay()) {
        const animation = animationNode.getDecay()!;
        const clock = decodeClock(animation.getClock(), retainedInstances);
        return Animated.decay(
          clock,
          decodePhysicsAnimationState(animation.getState(), retainedInstances),
          decodeDecayConfig(animation.getConfig(), retainedInstances)
        );
      } else if (animationNode.hasTiming()) {
        const animation = animationNode.getTiming()!;
        const clock = decodeClock(animation.getClock(), retainedInstances);
        return Animated.timing(
          clock,
          decodeTimingState(animation.getState(), retainedInstances),
          decodeTimingConfig(animation.getConfig(), retainedInstances)
        );
      }
    } else if (node.hasBlock()) {
      const values = node.getBlock()!;
      return Animated.block(
        values
          .getValuesList()
          .map(x => decodeAdaptable(decoder, x, retainedInstances))
      );
    } else if (node.hasValue()) {
      return decodeValue(decodeNumber, node.getValue(), retainedInstances);
    } else if (node.hasConcat() && (decoder.decode("") || decoder.decode(1))) {
      const values = node.getConcat()!.getValuesList();
github rainbow-me / rainbow / src / components / animations / FlyInAnimation.js View on Github external
const buildAnimation = (value, toValue) => (
  Animated.timing(value, {
    duration: 175,
    easing: Easing.bezier(0.165, 0.84, 0.44, 1),
    isInteraction: false,
    toValue,
    useNativeDriver: true,
  }).start()
);
github rainbow-me / rainbow / src / components / fields / UnderlineField.js View on Github external
onBlur = (...props) => {
    Animated.timing(this.animation, {
      duration: 1,
      easing: Easing.linear,
      toValue: 0,
    }).start();

    this.setState({ isFocused: false });

    if (this.props.onBlur) this.props.onBlur(...props);
  };
github rainbow-me / rainbow / src / components / value-chart / ValueChart.js View on Github external
setTimeout(async () => {
        Animated.timing(
          this.chartsMulti[this.currentInterval],
          this._configDown
        ).start();
        Animated.timing(
          this.chartsMulti[currentInterval],
          this._configUp
        ).start();
        this.currentInterval = currentInterval;
        this._text.updateValue(
          usableData[currentInterval][usableData[currentInterval].length - 1]
            .value
        );

        await this.setState({
          currentData: usableData[currentInterval],
          isLoading: false,
github rainbow-me / rainbow / src / components / animations / procs / timing.js View on Github external
(clock, finished, position, time, frameTime, toValue, duration) =>
    Animated.timing(
      clock,
      {
        finished,
        frameTime,
        position,
        time,
      },
      {
        duration,
        easing: Easing.linear,
        toValue,
      }
    )
);