Question

我正在使用react-native-animatable插件，并且我想对同一文本使用多个动画。基本上，我想做的是zoomIn文本，该文本具有1s和0s的延迟时间，然后完成后，使用1s的延迟和3s的延迟对同一文本执行脉冲动画。然后最后以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

您可以在Text元素上设置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>
  )
}

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

1 个答案: