How to use the rax-animated.event function in rax-animated

To help you get started, we’ve selected a few rax-animated 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 alibaba / rax / examples / drag / src / index.js View on Github external
_handleMoveShouldSetPanResponder(e, gestureState) {
    // Should we become active when the user moves a touch over the circle?
    return true;
  }

  _handlePanResponderGrant = (e, gestureState) => {
    this.state.pan.setOffset({x: this.state.pan.x._value, y: this.state.pan.y._value});
    this.state.pan.setValue({x: 0, y: 0});
    Animated.spring(
      this.state.scale,
      { toValue: 1.1, friction: 3 }
    ).start();
  };

  _handlePanResponderMove = Animated.event([
    null, {dx: this.state.pan.x, dy: this.state.pan.y},
  ]);

  _handlePanResponderEnd = (e, gestureState) => {
    this.state.pan.flattenOffset();
    Animated.spring(
      this.state.scale,
      { toValue: 1, friction: 3 }
    ).start();
  };
}

var styles = {
  container: {
    flex: 1,
    paddingTop: 64,
github alibaba / rax / examples / profile / index.js View on Github external
outputRange: [1, 1, 0.6, 0.6],
      extrapolate: 'clamp',
    });
    const titleOpacity = this.state.scrollY.interpolate({
      inputRange: [0, 220, 250],
      outputRange: [0, 0, 1],
    });
    const titleTranslate = this.state.scrollY.interpolate({
      inputRange: [-1, 0, 220, 250, 251],
      outputRange: [20, 20, 20, 0, 0],
      extrapolate: 'clamp',
    });

    let scrollHandler;
    if (isWeb) {
      scrollHandler = Animated.event(
        [{ target: { scrollTop: this.state.scrollY } }],
        { useNativeDriver: true }
      );
    }

    return (

rax-animated

Declarative Animations Library for Rax.

BSD-3-Clause
Latest version published 6 years ago

Package Health Score

60 / 100
Full package analysis

Similar packages