时间戳

首页 > 解决方案 > 如何将 PanResponder 与动画值一起使用？

javascript - 如何将 PanResponder 与动画值一起使用？

问题描述

我一直在尝试使用 PanResponder 和 React Animated API 制作一个简单的动画。这是我到目前为止所拥有的：

export default class Main extends Component {

  constructor(props) {
    super(props)
    this.state = {
      y: new Animated.Value(0)
    }

    this._panResponder = PanResponder.create({
      onMoveShouldSetResponderCapture: () => true,
      onMoveShouldSetPanResponderCapture: () => true,

      onPanResponderMove: Animated.event([
        null,               
        {
          dy: this.state.y
        }
      ]),

    });
  }


  render() {
    let { y } = this.state;
    return (
      <View  {...this._panResponder.panHandlers} style={{ flex: 1 }} >
        <LinearGradient start={{ x: 1.0, y: 0 }} end={{ x: 0.0, y: 1.0 }} colors={['rgba(0,187,9,0.575)', 'rgba(255, 217, 0 , 0.719)']} style={{ alignItems: "center", justifyContent: "center", margin: 0, flex: 1, padding: 20, width: "100%" }}>
          <ResponsiveImage  style={{ transform: [{ rotateZ: y + " deg" }, { perspective: 1000 }], marginBottom: 100 }} source={require('./assets/images/logo.png')} initWidth="225" initHeight="220" />
       </LinearGradient>
      </View>


    );
  }
}

使用上面附加的代码，旋转动画不起作用。它仅在我使用以下代码代替当前的 onPanResponderMove 方法时才有效。

onPanResponderMove: (a,b)=>{this.setState({y: b.dy}) }

为什么 Animated.Event 方法不起作用？

标签： javascriptreact-nativemobile-developmentreact-animated

解决方案

推荐阅读