How to use the react-native.Animated.spring 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 smallpath / psnine / psnine / container / new / NewQa.tsx View on Github external
_pressButton = (callback) => {
    const { marginTop } = this.state
    let value = marginTop._value
    if (Math.abs(value) >= 50) {
      Animated.spring(marginTop, { toValue: 0, ...config }).start()
      return true
    }
    this.content.clear()
    Keyboard.dismiss()
    // Animated.spring(openVal, { toValue: 0, ...config }).start(() => {
      typeof callback === 'function' && callback()
      this.props.navigation.goBack()
    // });

  }
github futurice / wappuapp-client / app / components / feed / ActionButtons.js View on Github external
BUTTON_POS.forEach((pos, i) => {

      // Animate action buttons, iOS handles delay better
      if (IOS) {
        Animated.parallel([
          Animated.delay(nextState === OPEN ?
            BUTTON_POS.length * BUTTON_DELAY - (i * BUTTON_DELAY) :
            0),
          Animated.spring(this.state.buttons[i],
            { toValue: nextState === OPEN ?
                pos :
                { x: 0, y: 0 } })
        ]).start();
      } else {
        Animated.spring(this.state.buttons[i],
          { toValue: nextState === OPEN ?
              pos :
              { x: 0, y: 0 } }).start();
      }

      // Animate action button labels, 200ms later than buttons
      Animated.parallel([
        Animated.delay(nextState === OPEN ?
          200 + BUTTON_POS.length * BUTTON_DELAY - (i * BUTTON_DELAY) :
          0),
        Animated.timing(this.state.labels[i],
          {duration:200, toValue: nextState === OPEN ? 1 : 0})
      ]).start();
    });
    Animated.spring(this.state.plusButton, { toValue: nextState === OPEN ? 1 : 0 }).start();
github crownstone / CrownstoneApp / js / views / components / RoomCircle.tsx View on Github external
handleTouch(data) {
    // stop any animation this node was doing.
    this.state.scale.stopAnimation();
    this.state.opacity.stopAnimation();

    this.scaledUp = true;

    let tapAnimations = [];
    tapAnimations.push(Animated.spring(this.state.scale, { toValue: 1.25, friction: 4, tension: 70 }));
    tapAnimations.push(Animated.timing(this.state.opacity, {toValue: 0.2, duration: 100}));
    Animated.parallel(tapAnimations).start();

    this.touching = true;
    this.touchTimeout = setTimeout(() => { this._onHoldAnimation(); }, 250);
  }
github azeemhassni / react-native-animated-hamburger / Hamburger.js View on Github external
spinArrow() {
        if (!this.state.active) {
            Animated.spring(this.containerAnim, {
                toValue: 1
            }).start();
            Animated.spring(this.topBar, {
                toValue: 1
            }).start();
            Animated.spring(this.bottomBar, {
                toValue: 1
            }).start();
            Animated.spring(this.width, {
                toValue: 14
            }).start();
            Animated.spring(this.marginLeft, {
                toValue: -13
            }).start();
            Animated.spring(this.bottomBarMargin, {
                toValue: 2
github ethantran / react-native-examples / src / screens / SvgAnimation.js View on Github external
Animated.spring(this.angle, {
                toValue: randomNumber(0, 2 * Math.PI)
            }),
            Animated.spring(this.startAngle, {
                toValue: randomNumber(0, Math.PI)
            }),
            Animated.spring(this.endAngle, {
                toValue: randomNumber(2 * Math.PI, 3 * Math.PI)
            }),
            Animated.spring(this.padAngle, { toValue: Math.random() }),

            Animated.spring(this.radius, { toValue: randomNumber(50, 100) }),
            Animated.spring(this.innerRadius, {
                toValue: randomNumber(50, 100)
            }),
            Animated.spring(this.outerRadius, {
                toValue: randomNumber(110, 150)
            }),
            Animated.spring(this.cornerRadius, { toValue: randomNumber(0, 5) }),
            Animated.spring(this.padRadius, { toValue: randomNumber(0, 5) }),

            Animated.spring(this.padding, { toValue: randomNumber(0, 5) }),

            Animated.spring(this.nodeWidth, { toValue: randomNumber(5, 15) }),
            Animated.spring(this.nodePadding, { toValue: randomNumber(5, 10) }),

            Animated.spring(this.bandwidth, { toValue: randomNumber(40, 80) })
        ]).start(() => this.animate());
    };
github oblador / react-native-progress / withAnimation.js View on Github external
} else {
          Animated.spring(this.state.rotation, {
            toValue: this.rotationValue > 0.5 ? 1 : 0,
          }).start(endState => {
            if (endState.finished) {
              this.state.rotation.setValue(0);
            }
          });
        }
      }
      const progress = this.props.indeterminate
        ? indeterminateProgress || 0
        : Math.min(Math.max(this.props.progress, 0), 1);
      if (progress !== this.progressValue) {
        if (this.props.animated) {
          Animated.spring(this.state.progress, {
            toValue: progress,
            bounciness: 0,
          }).start();
        } else {
          this.state.progress.setValue(progress);
        }
      }
    }
github TheBrainFamily / TheBrain2.0 / mobile / components / Hamburger.js View on Github external
duration: 30
      }).start()
      this.setState({
        active: true
      })
    } else {
      Animated.spring(this.containerAnim, {
        toValue: 0
      }).start()
      Animated.spring(this.topBar, {
        toValue: 0
      }).start()
      Animated.spring(this.bottomBar, {
        toValue: 0
      }).start()
      Animated.spring(this.bottomBarMargin, {
        toValue: 4
      }).start()
      Animated.timing(this.middleBarOpacity, {
        toValue: 1,
        duration: 600
      }).start()
      this.setState({
        active: false
      })
    }
  }
github rilyu / teaset / components / Overlay / OverlayPullView.js View on Github external
get disappearAnimates() {
    let animates = super.disappearAnimates;
    animates.push(
      Animated.spring(this.state.marginValue, {
        toValue: this.marginSize,
        friction: 9,
      })
    );
    return animates;
  }
github akveo / react-native-ui-kitten / src / components / ui / menu / subMenu.component.tsx View on Github external
private subItemsExpandAnimate = (toValue: number): void => {
    Animated.spring(this.subItemsAnimation, {
      toValue: toValue,
    }).start();
  };