How to use the react-native.Animated.parallel function in react-native

To help you get started, we’ve selected a few react-native 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 crownstone / CrownstoneApp / js / views / overlays / LocalizationSetupStep1.tsx View on Github external
Animated.timing(this.state.c2_top,     {toValue: this.targets2.c2_top,  duration: duration}),
            Animated.timing(this.state.homeOpacity, {toValue: 0, duration: duration}),
            Animated.timing(this.state.smallHomeOpacity, {toValue: 1, duration: 0.5*duration}),
          ];
          let c3 = [
            Animated.timing(this.state.c3_left,    {toValue: this.targets2.c3_left, duration: 0.75*duration}),
            Animated.timing(this.state.c3_top,     {toValue: this.targets2.c3_top,  duration: 0.75*duration}),
          ];
          let c4 = [
            Animated.timing(this.state.c4_left,    {toValue: this.targets2.c4_left, duration: 0.5*duration}),
            Animated.timing(this.state.c4_top,     {toValue: this.targets2.c4_top,  duration: 0.5*duration}),
          ];

          animations2.push(Animated.parallel(c1));
          animations2.push(Animated.parallel(c2));
          animations2.push(Animated.parallel(c3));
          animations2.push(Animated.parallel(c4));
          animations2.push(Animated.timing(this.state.textOpacity, {toValue: 1, duration: 0.75*duration}));

          Animated.sequence(animations2).start();
        }
        else {
          let newState = {innerCirclesAmount: this.state.innerCirclesAmount, outerCircleAmount: this.state.outerCircleAmount};
          if (this.state.innerCirclesAmount < 1 && innerCircleFinished === false)
            newState.innerCirclesAmount += 0.01;
          else if (this.state.outerCircleAmount >= 1.75) {
            innerCircleFinished = true;
            newState.innerCirclesAmount = 0;
          }
          if (this.state.innerCirclesAmount > 0.05 || innerCircleFinished === true)
            newState.outerCircleAmount += 0.005 + 0.02 * newState.outerCircleAmount;
          this.setState(newState);
github codypearce / material-bread / src / Components / BottomNavigation / BottomNavigationItem / BottomNavigationItem.js View on Github external
_animateActive(show) {
    const { scaleText } = this.state;
    let scale = show ? 14 : 0;

    if (this.props.showLabels || this.props.showLabel) {
      scale = show ? 14 : 12;
    }

    Animated.parallel([
      Animated.timing(scaleText, {
        toValue: scale,
        duration: 150,
      }),
    ]).start();
  }
github TheBrainFamily / TheBrain2.0 / mobileClient / components / Animator.js View on Github external
_.forEach(this.animations, (animatedStyle) => {
      const initialValue = this.firstPhase ? animatedStyle.initial : animatedStyle.final
      const finalValue = this.firstPhase ? animatedStyle.final : animatedStyle.initial

      animatedStyle.animatedValue.setValue(initialValue)
      const animation = Animated.spring(
        animatedStyle.animatedValue,
        {
          toValue: finalValue,
          friction: animatedStyle.friction
        }
      )
      animationsContainer.push(animation)
    })

    Animated.parallel(animationsContainer).start()

    if (twoPhase) this.firstPhase = !this.firstPhase
  }
}
github kiwicom / mobile / app / hotels / src / allHotels / RenderSearchResults.js View on Github external
function animateToList() {
      Animated.parallel([
        Animated.timing(mapAnimation, {
          toValue: topValue,
          duration: transitionDuration,
          useNativeDriver: true,
        }),
        Animated.timing(listAnimation, {
          toValue: 0,
          duration: transitionDuration,
          useNativeDriver: true,
        }),
        Animated.timing(listOpacity, {
          toValue: 1,
          duration: transitionDuration,
          useNativeDriver: true,
        }),
      ]).start(() => {
github webdevstar / react-native-snap-carousel / src / pagination / PaginationDot.js View on Github external
_animate (toValue = 0) {
        const { animOpacity, animTransform } = this.state;

        Animated.parallel([
            Animated.timing(animOpacity, {
                toValue,
                duration: 250,
                easing: Easing.linear,
                isInteraction: false,
                useNativeDriver: true
            }),
            Animated.spring(animTransform, {
                toValue,
                friction: 4,
                tension: 50,
                isInteraction: false,
                useNativeDriver: true
            })
        ]).start();
    }
github thanhtungdp / react-native-gift-app / src / containers / checkout-success / index.js View on Github external
componentDidMount(){
        Animated.parallel([
            Animated.timing(this.state.textAnimate, {
                toValue: 1,
                duration: 800
            }),
            Animated.timing(this.state.flowerAnimate, {
                toValue: 1,
                duration: 600
            }),
        ]).start()
    }
github tienph6m / react-native-animated-spinkit / src / Swing.tsx View on Github external
render() {
    const { size, color, style, ...rest } = this.props
    const circleStyle = {
      width: size * 0.45,
      height: size * 0.45,
      backgroundColor: color,
      borderRadius: (size * 0.45) / 2,
    }
    return (
      
github cloudle / ruui / src / components / connectionMask.js View on Github external
playAnimation = (toValue: Number, callback) => {
		if (this.animation) this.animation.clear();

		const easing = toValue === 0
				? Easing.out(Easing.bezier(0, 0, 0.58, 1))
				: Easing.in(Easing.bezier(0, 0.48, 0.35, 1)),
			animations = [
				Animated.timing(this.state.enterAnimation, {
					toValue,
					duration: 500,
					easing,
				}),
			];

		this.animation = Animated.parallel(animations).start(callback);
	}
}
github mxck / react-native-material-menu / src / Menu.js View on Github external
() => {
        Animated.parallel([
          Animated.timing(this.state.menuSizeAnimation, {
            toValue: { x: width, y: height },
            duration: this.props.animationDuration,
            easing: EASING,
          }),
          Animated.timing(this.state.opacityAnimation, {
            toValue: 1,
            duration: this.props.animationDuration,
            easing: EASING,
          }),
        ]).start();
      },
    );
github jeanregisser / react-native-popover / Popover.js View on Github external
_startDefaultAnimation({show, doneCallback}) {
    var animDuration = 300;
    var values = this.state.defaultAnimatedValues;
    var translateOrigin = this.getTranslateOrigin();

    if (show) {
      values.translate.setValue(translateOrigin);
    }

    var commonConfig = {
      duration: animDuration,
      easing: show ? Easing.out(Easing.back()) : Easing.inOut(Easing.quad),
    }

    Animated.parallel([
      Animated.timing(values.fade, {
        toValue: show ? 1 : 0,
        ...commonConfig,
      }),
      Animated.timing(values.translate, {
        toValue: show ? new Point(0, 0) : translateOrigin,
        ...commonConfig,
      }),
      Animated.timing(values.scale, {
        toValue: show ? 1 : 0,
        ...commonConfig,
      })
    ]).start(doneCallback);
  },
  _getDefaultAnimatedStyles() {