How to use the react-native-reanimated.Easing.bezier 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 wix / react-native-ui-lib / src / incubator / TabController / TabBar.js View on Github external
constructor(props, context) {
    super(props, context);

    if (this.props.children) {
      console.warn('uilib: Please pass the "items" prop to TabController.TabBar instead of children');
    }

    const itemsCount = this.itemsCount;

    this.tabBar = React.createRef();

    this._itemsWidths = _.times(itemsCount, () => null);
    this._indicatorOffset = new ReanimatedObject({duration: 300, easing: Easing.bezier(0.23, 1, 0.32, 1)});
    this._indicatorWidth = new ReanimatedObject({duration: 300, easing: Easing.bezier(0.23, 1, 0.32, 1)});
    this._indicatorTransitionStyle = {
      width: this._indicatorWidth.value,
      left: this._indicatorOffset.value
    };

    this.state = {
      scrollEnabled: false,
      itemsWidths: undefined
    };

    this.registerTabItems();
  }
github rainbow-me / rainbow / src / components / animations / FadeInAnimation.js View on Github external
} = Animated;

export default class FadeInAnimation extends PureComponent {
  static propTypes = {
    children: PropTypes.node,
    duration: PropTypes.number,
    easing: PropTypes.func,
    from: PropTypes.number,
    isInteraction: PropTypes.bool,
    style: PropTypes.object,
    to: PropTypes.number,
  }

  static defaultProps = {
    duration: 315,
    easing: Easing.bezier(0.19, 1, 0.22, 1),
    from: 0,
    isInteraction: false,
    to: 1,
  }

  runTiming = () => {
    const {
      duration,
      easing,
      from,
      isInteraction,
      to,
    } = this.props;

    const handle = isInteraction && InteractionManager.createInteractionHandle();
github rainbow-me / rainbow / src / screens / AvatarBuilder.js View on Github external
const ColorCircle = ({ backgroundColor, colorIndex, isSelected }) => (
      <View align="center" height={42} justify="center" width={39}>
        <ButtonPressAnimation
          alignSelf="center"
          duration={100}
          easing={Easing.bezier(0.19, 1, 0.22, 1)}
          enableHapticFeedback
          height={42}
          justifyContent="center"
          onPress={() => {
            let destination = colorIndex * 39;
            this.setState({
              avatarColor: backgroundColor,
              springAnim: runSpring(
                new Clock(),
                this.state.position,
                destination
              ),
            });
          }}
          scaleTo={0.7}
          width={39}
github rainbow-me / rainbow / src / components / value-chart / ValueChart.js View on Github external
easing: Easing.bezier(0.25, 0.46, 0.45, 0.94),
                    from: this.value,
                    to: 1,
                  })
                ),
              ])
            ),
            cond(
              and(lessThan(this.opacity, 1), eq(this.shouldSpring, 1)),
              block([
                set(
                  this.opacity,
                  timing({
                    clock: this.opacityClock,
                    duration: 500,
                    easing: Easing.bezier(0.25, 0.46, 0.45, 0.94),
                    from: this.opacity,
                    to: 1,
                  })
                ),
                stopClock(this.opacityClockReversed),
              ])
            ),
            cond(
              and(greaterThan(this.opacity, 0), eq(this.shouldSpring, 0)),
              block([
                set(
                  this.opacity,
                  timing({
                    clock: this.opacityClockReversed,
                    duration: 500,
                    easing: Easing.bezier(0.25, 0.46, 0.45, 0.94),
github react-navigation / stack / src / TransitionConfigs / TransitionSpecs.tsx View on Github external
    easing: t => Easing.bezier(0.90, 0.06, 0.57, 0)((Easing.bezier(0.06, 0.94, 0.22, 1.02)(t))),
  },
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 rainbow-me / rainbow / src / components / value-chart / ValueChart.js View on Github external
this.handle = undefined;
    this.value = new Value(1);
    this.opacity = new Value(0);
    this.shouldSpring = new Value(0);
    this.chartDay = new Value(1);
    this.chartWeek = new Value(0);
    this.chartMonth = new Value(0);
    this.chartYear = new Value(0);

    this.currentInterval = 1;

    this.animatedPath = undefined;

    this._configUp = {
      duration: 500,
      easing: Easing.bezier(0.55, 0.06, 0.45, 0.94),
      toValue: 1,
    };
    this._configDown = {
      duration: 500,
      easing: Easing.bezier(0.55, 0.06, 0.45, 0.94),
      toValue: 0,
    };

    this.chartsMulti = [
      this.chartDay,
      this.chartWeek,
      this.chartMonth,
      this.chartYear,
    ];

    this.onTapGestureEvent = event([
github rainbow-me / rainbow / src / components / animations / ButtonPressAnimation.js View on Github external
enableHapticFeedback: PropTypes.bool,
  hapticType: PropTypes.oneOf(Object.keys(HapticFeedbackTypes)),
  isInteraction: PropTypes.bool,
  minLongPressDuration: PropTypes.number,
  onLongPress: PropTypes.func,
  onPress: PropTypes.func,
  onPressStart: PropTypes.func,
  scaleTo: PropTypes.number,
  style: stylePropType,
  transformOrigin: directionPropType,
};

ButtonPressAnimation.defaultProps = {
  activeOpacity: 1,
  duration: 200,
  easing: Easing.bezier(0.25, 0.46, 0.45, 0.94),
  enableHapticFeedback: true,
  hapticType: HapticFeedbackTypes.selection,
  minLongPressDuration: 500,
  scaleTo: animations.keyframes.button.to.scale,
};
github wix / react-native-ui-lib / src / incubator / TabController / TabBar.js View on Github external
runTiming(targetValue, prevValue, duration) {
    const clock = new Clock();
    const state = {
      finished: new Value(0),
      position: prevValue,
      time: new Value(0),
      frameTime: new Value(0)
    };

    const config = {
      duration,
      toValue: targetValue,
      easing: Easing.bezier(0.23, 1, 0.32, 1)
    };

    return block([
      cond(clockRunning(clock), [], [startClock(clock)]),
      timing(clock, state, config),
      cond(state.finished, [
        stopClock(clock),
        set(state.finished, 0),
        set(state.time, 0),
        set(state.frameTime, 0),
        set(prevValue, state.position)
      ]),
      state.position
    ]);
  }