How to use the react-native-reanimated.eq 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-retween / src / useTween.ts View on Github external
A.eq(animationState, AnimationState.PLAY_FORWARD),
      // run all the forward animations
      runAnimation(
        {
          clock: forwardAnimationClock,
          oppositeClock: backwardAnimationClock,
          value: masterValue,
          dest: 1,
          onFinish: A.set(animationState, AnimationState.END_POINT),
        },
        props,
      ),
      // 0,
    ),
    A.cond(
      A.eq(animationState, AnimationState.PLAY_BACKWARD),
      // run all the backward animations
      runAnimation(
        {
          clock: backwardAnimationClock,
          oppositeClock: forwardAnimationClock,
          value: masterValue,
          dest: 0,
          onFinish: A.set(animationState, AnimationState.START_POINT),
        },
        props,
      ),
    ),
  ]);

  function play(backward?: boolean) {
    animationState.setValue(
github terrysahaidak / react-native-retween / src / useTween.ts View on Github external
}

      return acc;
    },
    {} as any,
  );

  // returns timing or spring animation runner based on config
  const runAnimation = getAnimationRunner<T>(props);

  const forwardAnimationClock = new A.Clock();
  const backwardAnimationClock = new A.Clock();

  const animation = A.block([
    A.cond(
      A.eq(animationState, AnimationState.PLAY_FORWARD),
      // run all the forward animations
      runAnimation(
        {
          clock: forwardAnimationClock,
          oppositeClock: backwardAnimationClock,
          value: masterValue,
          dest: 1,
          onFinish: A.set(animationState, AnimationState.END_POINT),
        },
        props,
      ),
      // 0,
    ),
    A.cond(
      A.eq(animationState, AnimationState.PLAY_BACKWARD),
      // run all the backward animations
github fram-x / react-native-fluid / src / packages / navigation / src / hooks / useCurrentValue.ts View on Github external
const splitProgressProc = Animated.proc((normalizedProgress, isFocused) =>
  Animated.cond(
    Animated.eq(isFocused, 1),
    // Focused screen
    Animated.cond(
      Animated.greaterThan(normalizedProgress, 0.5),
      Animated.multiply(2, Animated.sub(normalizedProgress, 0.5)),
      0,
    ),
    // Screen we are moving from
    Animated.cond(
      Animated.lessThan(normalizedProgress, 0.5),
      Animated.multiply(normalizedProgress, 2),
      1,
    ),
  ),
);
github artsy / emission / src / lib / Components / StickyTabPage / StickyTabPage.tsx View on Github external
return tabs.map((_, index) => ({
        isActive: Animated.eq(index, activeTabIndex),
        shouldLoad: new Animated.Value(index === initialTabIndex ? 1 : 0),
        hasLoaded: new Animated.Value(0),
      }))
    },
github JonnyBurger / reanimated-formula / src / reduce-ast.ts View on Github external
);
		}
		if (mathType === 'reanimated') {
			return Animated.lessOrEq(left, right);
		}

		return Number((left as number) <= (right as number));
	}
	if (tree.token.value === '===') {
		if (Array.isArray(left) || Array.isArray(right)) {
			throw new InvalidExpressionError(
				`${logPrefix} Cannot use operator "===" on array`
			);
		}
		if (mathType === 'reanimated') {
			return Animated.eq(left, right);
		}

		return Number((left as number) === (right as number));
	}
	if (tree.token.value === '!==') {
		if (Array.isArray(left) || Array.isArray(right)) {
			throw new InvalidExpressionError(
				`${logPrefix} Cannot use operator "!==" on array`
			);
		}
		if (mathType === 'reanimated') {
			return Animated.neq(left, right);
		}

		return Number((left as number) !== (right as number));
	}
github wcandillon / can-it-be-done-in-react-native / season3 / src / iPod / ClickWheel / ClickWheel.tsx View on Github external
export default ({ alpha, command }: ClickWheelProps) => {
  const [state, x, y] = useValues([State.UNDETERMINED, 0, 0, 0, 0], []);
  const deltaX = useDiff(x, []);
  const deltaY = useDiff(y, []);
  const gestureHandler = onGestureEvent({ state, x, y });
  const x0 = cond(eq(state, State.ACTIVE), sub(x, deltaX), x);
  const y0 = cond(eq(state, State.ACTIVE), sub(y, deltaY), y);
  const a0 = canvas2Polar({ x: x0, y: y0 }, center).alpha;
  const a = canvas2Polar({ x, y }, center).alpha;
  const da = delta(a0, a);
  useCode(() => block([set(alpha, max(add(alpha, da), 0))]), [alpha, da]);
  return (
    <View style={styles.container}>
      <View style={styles.center} />
      <Buttons {...{ command }}>
        <PanGestureHandler {...gestureHandler}>
          <Animated.View style={StyleSheet.absoluteFill} />
        </PanGestureHandler>
      </Buttons>
      <Stickers />
    </View>
  );
github wcandillon / can-it-be-done-in-react-native / season3 / src / iPod / ClickWheel / Buttons.tsx View on Github external
() =>
      block([
        cond(eq(state, State.END), [
          cond(
            isInRegion(x, y, TOP),
            set(command, Command.TOP),
            cond(
              isInRegion(x, y, BOTTOM),
              set(command, Command.BOTTOM),
              cond(
                isInRegion(x, y, LEFT),
                set(command, Command.LEFT),
                cond(
                  isInRegion(x, y, RIGHT),
                  set(command, Command.RIGHT),
                  cond(
                    isInRegion(x, y, CENTER),
                    set(command, Command.CENTER),
                    set(command, Command.UNDETERMINED)
github FormidableLabs / react-native-interactions-workshop / app / src / components / misc / Header.js View on Github external
return arr.map((_, i) => {
    const offsetX = -1 * i * CELL_WIDTH - theme.sizes.mid;
    const offsetY = -1 * theme.sizes.mid;
    const isZooming = Animated.eq(index, i);

    const translateX = Animated.interpolate(zoom, {
      inputRange: [0, 0.8, 1],
      outputRange: [0, offsetX, offsetX]
    });

    const translateY = Animated.interpolate(zoom, {
      inputRange: [0, 0.8, 1],
      outputRange: [0, offsetY, offsetY]
    });

    return {
      opacity: Animated.cond(isZooming, 1, opacity),
      transform: [
        { translateX: Animated.cond(isZooming, translateX) },
        { translateY: Animated.cond(isZooming, translateY) }
github fram-x / react-native-fluid / src / packages / navigation / src / hooks / useCurrentValue.ts View on Github external
(current, splitProgress, inTransition, duration) =>
    Animated.block([
      Animated.cond(
        Animated.eq(inTransition, 1),
        Animated.set(
          current,
          Animated.divide(splitProgress, Animated.divide(1.0, duration)),
        ),
      ),
    ]),
);