react原生如何在单个元素上使用多个动画

Question

我使用的是react-native-animatable插件，我想对同一文本使用多个动画。基本上，我想要做的是zoomIn一个文本，它的持续时间是1s，延迟是0s，然后当它完成后，用1s的持续时间和3s的延迟对相同的文本执行脉冲动画。然后最后zoomOut相同的文本，持续时间为1s，延迟为5s

到目前为止，只有最后一个动画执行

以下是我的代码

import * as Animatable from 'react-native-animatable';

<View style={{ backgroundColor: '#203546', flex: 1, alignItems: 'center', }}>
    <Animatable.Text animation="zoomIn" duration={1000} delay={0} 
                     animation="pulse" duration={1000} delay={3000} 
                     animation="zoomOut" duration={1000} delay={5000} 
                    style={{ color: 'white', fontSize: 20, position: 
                         'absolute', bottom: 0 }}>my text
   </Animatable.Text>
 </View>

Answer 1

您可以在文本元素上设置ref并通过Imperative Usage触发动画。

示例：

componentDidMount() {
  this.textRef.zoomIn(1000).then(() => {
    setTimeout(() => {
        this.textRef.pulse(1000).then(() => {
          setTimeout(() => {
              this.textRef.zoomOut(1000)
          }, 5000)
      }, 3000)
    })
  });
}

render() {
  return (
    <Animatable.Text
        ref={el => this.textRef = el}
        style={{ color: 'white', fontSize: 20, position: 'absolute', bottom: 0 }}
      >
        my text
      </Animatable.Text>
  )
}