How to use the react-native-reanimated.Easing.ease 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.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github tpucci / react-nonav / src / transitions / RotateCrazy.tsx View on Github external
function runTiming(
  clock: Animated.Clock,
  value: Animated.Value<number>,
  dest: Animated.Value<number>,
  updateVisibility: () => any
) {
  const state = {
    finished: new Value(0),
    frameTime: new Value(0),
    position: value,
    time: new Value(0),
  };

  const config = {
    duration: 1000,
    easing: Easing.inOut(Easing.ease),
    toValue: dest,
  };

  return block([
    cond(
      clockRunning(clock),
      [
        // if the clock is already running we update the toValue, in case a new dest has been passed in
        set(config.toValue, dest),
      ],
      [
        // If the clock isn't running we reset all the animation params and start the clock
        set(state.finished, 0),
        set(state.time, 0),
        set(state.position, value),
        set(state.frameTime, 0),
github nazarireza / Emoji-Feedback / App.js View on Github external
runTiming = (clock, value, dest) => {
  const state = {
    finished: new Value(0),
    position: new Value(0),
    time: new Value(0),
    frameTime: new Value(0)
  };

  const config = {
    duration: 300,
    toValue: new Value(0),
    easing: Easing.inOut(Easing.ease)
  };

  return block([
    cond(
      clockRunning(clock),
      [
        // if the clock is already running we update the toValue, in case a new dest has been passed in
        set(config.toValue, dest)
      ],
      [
        // if the clock isn't running we reset all the animation params and start the clock
        set(state.finished, 0),
        set(state.time, 0),
        set(state.position, value),
        set(state.frameTime, 0),
        set(config.toValue, dest),
github rainbow-me / rainbow / src / components / buttons / LongPressButton.js View on Github external
toValue: 1,
          }).start();
        });
      } else {
        timing(this.scale, {
          duration: 150,
          easing: Easing.inOut(Easing.ease),
          toValue: 0.875,
        }).start();

        onPress();
      }
    } else if (!disabled && nativeEvent.state === State.END) {
      timing(this.scale, {
        duration: 150,
        easing: Easing.inOut(Easing.ease),
        toValue: 1,
      }).start();

      InteractionManager.runAfterInteractions(() => {
        onRelease();
      });
    }
  };
github software-mansion / react-native-reanimated / Example / src / interpolate / AnimatedBounds.js View on Github external
const getAnimation = (min, max) => {
  const clock = new Clock();
  const state = {
    finished: new Value(1),
    position: new Value(min),
    time: new Value(0),
    frameTime: new Value(0),
  };

  const config = {
    duration: 500,
    toValue: new Value(0),
    easing: Easing.inOut(Easing.ease),
  };

  const reset = [
    set(state.finished, 0),
    set(state.time, 0),
    set(state.frameTime, 0),
  ];

  return block([
    cond(and(state.finished, eq(state.position, min)), [
      ...reset,
      set(config.toValue, max),
    ]),
    cond(and(state.finished, eq(state.position, max)), [
      ...reset,
      set(config.toValue, min),
github wcandillon / can-it-be-done-in-react-native / the-5-min / src / components / TapHandler.tsx View on Github external
}

const {
  Value,
  useCode,
  block,
  cond,
  eq,
  set,
  call,
  onChange,
  and,
  neq
} = Animated;
const { BEGAN, FAILED, CANCELLED, END, UNDETERMINED } = State;
const easing = Easing.inOut(Easing.ease);
const duration = 250;

export default ({ onPress, children, value }: TapHandlerProps) => {
  const shouldSpring = new Value(0);
  const state = new Value(UNDETERMINED);
  const gestureHandler = onGestureEvent({ state });
  useCode(
    block([
      cond(eq(state, BEGAN), set(shouldSpring, 1)),
      cond(contains([FAILED, CANCELLED], state), set(shouldSpring, 0)),
      onChange(state, cond(eq(state, END), call([], onPress))),
      cond(eq(state, END), [delay(set(shouldSpring, 0), duration)]),
      cond(
        and(eq(shouldSpring, 1), neq(value, 1)),
        set(
          value,
github rainbow-me / rainbow / src / components / fields / UnderlineField.js View on Github external
onFocus = (...props) => {
    Animated.timing(this.animation, {
      duration: 150,
      easing: Easing.ease,
      toValue: 1,
    }).start();

    this.setState({ isFocused: true });

    if (this.props.onFocus) this.props.onFocus(...props);
  };
github BrendonSled / react-native-remodal / src / index.tsx View on Github external
const runOpacityTimer = (
    gestureState: Animated.Adaptable<number>,
    modalLayout: IModalLayout,
    onModalShow?: () => void,
    onModalHide?: () => void,
    onShowConfig = {
        duration: Platform.OS === 'ios' ? 300 : 240,
        easing: Easing.inOut(Easing.ease),
    },
    onHideConfig = {
        duration: Platform.OS === 'ios' ? 300 : 240,
        easing: Easing.inOut(Easing.ease),
    },
) => {
    const clock = new Clock();
    const state = {
        finished: new Value(0),
        position: new Value(0),
        time: new Value(0),
        frameTime: new Value(0),
    };

    const toValue = new Value(-1);

    return cond(
        neq(modalLayout.height, -1),
        block([
            cond(and(eq(gestureState, State.BEGAN), neq(toValue, 1)), [
github rodolfovilaca / AnimationsExperiments / src / hooks / runners / timing.js View on Github external
to,
  onFinish,
  duration,
  easing,
}) {
  const state = {
    finished: new Value(0),
    position: new Value(0),
    time: new Value(0),
    frameTime: new Value(0),
  };

  const config = {
    duration: duration,
    toValue: new Value(0),
    easing: easing || Easing.inOut(Easing.ease),
  };

  return block([
    cond(clockRunning(clock), 0, [
      stateProc(
        from,
        to,
        state.finished,
        state.position,
        state.time,
        state.frameTime,
        config.toValue,
      ),
      startClock(clock),
    ]),
    timingAnim(clock, state, config),
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 rainbow-me / rainbow / src / components / buttons / hold-to-authorize / HoldToAuthorizeButton.js View on Github external
const animate = (value, { duration = buttonScaleDurationMs, toValue }) =>
  timing(value, {
    duration,
    easing: Easing.inOut(Easing.ease),
    toValue,
  });