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

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()采用回调函数，如下所示：

Animate.spring完成后调用函数

这是我的最终解决方案：

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

这是正确答案。 在 Android 上测试[电子邮件受保护]

Animated.sequence([
  Animated.timing(someParam, {...}),
  {
     start: cb => {
       //Do something
       console.log(`I'm wored!!!`)
       cb({ finished: true })
     },
     stop: () => {}
  },
  Animated.timing(someOtherParam, {...}),
]).start();