Question

我在屏幕中间有一个按钮。 onScroll我希望按钮缩小到0消失，然后再放大到1重新出现在屏幕底部的新位置。我希望能够在缩小和放大动画之间调用setState（控制按钮的位置）。类似于下面的代码。您是否知道在这两个动画之间添加函数调用的最佳方法？还是更好的方法呢？

animateScale = () => {
 return (
   Animated.sequence([
     Animated.timing(
       this.state.scale,
       {
         toValue: 0,
         duration: 300
       }
     ),
     this.setState({ positionBottom: true }),
     Animated.timing(
       this.state.scale,
       {
         toValue: 1,
         duration: 300
       }
     )
   ]).start()
 )

}

Answer 1

经过更多研究，我发现answer.start（）具有一个回调函数，如下所示：

Calling function after Animate.spring has finished

这是我的最终解决方案：

    export default class MyAnimatedScreen extends PureComponent {
    state = {
     scale: new Animated.Value(1),
     positionUp: true,
     animating: false
    }

    animationStep = (toValue, callback) => () => (
     Animated.timing(this.state.scale, {
       toValue,
       duration: 200
     }).start(callback)
    )

    beginAnimation = (value) => {
     if (this.state.animating) return

     this.setState({ animating: true }, this.animationStep(0, () => {
      this.setState({ positionUp: value, animating: false }, 
      this.animationStep(1))
     }))
    }

    handleScrollAnim = ({ nativeEvent }) => {
     const { y } = nativeEvent.contentOffset

     if (y < 10) {
      if (!this.state.positionUp) {
        this.beginAnimation(true)
      }
    } else if (this.state.positionUp) {
      this.beginAnimation(false)
    }
  }

  render() {
    return (
      <View>
        <Animated.View
          style={[
            styles.buttonWrapper,
            { transform: [{ scale: this.state.scale }] },
            this.state.positionUp ? styles.buttonAlignTop : 
            styles.buttonAlignBottom
          ]}
        >
          <ButtonCircle />
        </Animated.View>
        <ScrollView
          onScroll={this.handleScrollAnim}
        >
        // scroll stuff here
        </ScrollView>
      </View>
     )
    }
  }

Answer 2

我今天遇到了这个问题。为了解决这个问题，我模拟了一个动画对象，其中包含一个start函数。我发现在完成true中返回的start之后，序列可以继续到下一个动画。

Animated.sequence([
  Animated.timing(someParam, {...}),
  {
    start: () => {
      /** Do some stuff **/
      return true;
    }
  },
  Animated.timing(someOtherParam, {...}),
]).start();

如何在React Native中向Animated.sequence添加函数调用

2 个答案: