How to use the react-native-reanimated.Easing.linear 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 nars-dev / nars / packages / nars-client / src / AnimatedCoders.ts View on Github external
const decodeEasingFunction = (
  easing: EasingFunction | undefined | null,
  _retainedInstances: RetainedInstances
) => {
  // TODO: Handle easing
  if (!easing) {
    return Easing.linear;
  } else if (easing.hasCustom()) {
    return Easing.linear;
  } else if (easing.hasBuiltin()) {
    return Easing.linear;
  } else {
    return unreachable();
  }
};
github rainbow-me / rainbow / src / components / asset-list / AssetListItemSkeleton.js View on Github external
startShimmerLoop = () => {
    const clock = new Clock();

    const state = {
      finished: new Value(0),
      frameTime: new Value(0),
      position: new Value(0),
      time: new Value(0),
    };

    const config = {
      duration: new Value(1250),
      easing: Easing.linear,
      toValue: new Value(1),
    };

    return block([
      startClock(clock),
      timing(clock, state, config),
      cond(state.finished, [
        stopClock(clock),
        set(state.finished, 0),
        set(state.position, 0),
        set(state.time, 0),
        set(state.frameTime, 0),
        startClock(clock),
      ]),
      state.position,
    ]);
github wcandillon / can-it-be-done-in-react-native / season2 / monzo-card-selection / components / CardSelection2.tsx View on Github external
const timing = (clock: Animated.Clock) =>
  runTiming(clock, 0, { toValue: 1, duration: 400, easing: Easing.linear });
github fram-x / react-native-fluid / src / packages / navigation / src / createFluidStackNavigator.tsx View on Github external
...stackConfig,
    headerMode: "none",
    defaultNavigationOptions: {
      cardShadowEnabled: false,
      cardOverlayEnabled: false,
      cardTransparent: true,
      cardStyle: { backgroundColor: "#FFF" },
      onTransitionStart: () => {},
      onTransitionEnd: () => {},
      cardStyleInterpolator: customInterpolation,
      transitionSpec: {
        open: {
          animation: "timing",
          config: {
            duration: NavigationTiming,
            easing: Easing.linear,
          },
        },
        close: {
          animation: "timing",
          config: {
            duration: NavigationTiming,
            easing: Easing.linear,
          },
        },
      },
    },
  });
};
github rodolfovilaca / AnimationsExperiments / src / hooks / runners / timing.js View on Github external
(clock, finished, position, time, frameTime, toValue, duration) =>
    timing(
      clock,
      {
        finished,
        position,
        time,
        frameTime,
      },
      {
        toValue,
        duration,
        easing: Easing.linear,
      },
    ),
);
github wcandillon / can-it-be-done-in-react-native / season2 / monzo-card-selection / components / AnimationHelpers.ts View on Github external
export const delay = (
  node: Animated.Node,
  duration: number,
  nodeBefore: Animated.Adaptable = 0
) => {
  const clock = new Clock();
  return block([
    runTiming(clock, 0, { toValue: 1, duration, easing: Easing.linear }),
    cond(eq(clockRunning(clock), 0), node, nodeBefore)
  ]);
};
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 osdnk / react-native-spline-interpolate / Example / reanimatedChart / index.js View on Github external
function runTiming() {
    const state = {
        finished: new Value(0),
        position: new Value(0),
        time: new Value(0),
        frameTime: new Value(0)
    };
    const clock = new Clock();
    const config = {
        duration: 5000,
        toValue: new Value(100),
        easing: Easing.linear
    };

    return block([
        cond(clockRunning(clock),
            timing(clock, state, config)
            , [
                startClock(clock)]
        ),
        cond(state.finished, debug('stop clock', stopClock(clock))),
        state.position
    ]);
}
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,
      }
    )
);