循环播放本地反应动画动画

  • Z时代
  • 2024-01-10
  • 分类：问答

我试图把下面的动画无限循环，直到发生特定的状态：在这里循环播放本地反应动画动画

class MyModal extends Component { 
    constructor() { 
     super() 
     this.springValue = new Animated.Value(0.3) 
    } 
    spring =() => { 
     this.springValue.setValue(0.3) 
     Animated.spring(
      this.springValue, 
      { 
       toValue: 1, 
       friction: 1, 
       tension: 1, 
       duration:5000 
      } 
     ).start() 
    } 
    componentDidMount() { 
     this.spring() 
    } 
    render() { 
     return (
      <View> 
       <Modal 
        animationType="none" 
        transparent={false} 
        visible={this.state.modalVisible} 
        onRequestClose={() => null} 
       > 
        <View style={styles.backgroundStyle}>      
         <Animated.Image 
          source={require("./my-awesome-image.png")} 
          style={{ width: 143, height: 125, top: 100, transform: [{scale: this.springValue}]}} 
         /> 
        </View> 
       </Modal> 
      </View> 
     ); 
    } 
}

一切的伟大工程，在动画完成一次（因为我不是循环任何地方）。

如何保持我的Animated.Image循环，直到达到特定状态？我只是想要它无限循环，并且能够在我准备好时停止动画或开始另一个动画。

回答：

将回调传递给启动函数以检查是否重新启动动画。你可以访问，只是包装你的动画与Animated.loop()可变

onSpringCompletion =() => { 
    if (arbitraryCondition) { 
    this.spring(); 
    } 
} 
spring =() => { 
     this.springValue.setValue(0.3) 
     Animated.spring(
      this.springValue, 
      { 
       toValue: 1, 
       friction: 1, 
       tension: 1, 
       duration:5000 
      } 
    ).start(this.onSpringCompletion); 
    }

回答：

您可以使用setInterval保持播放动画并随时删除间隔。我会这样做：

componentDidMount() { 
    this.interval = setInterval(() => this.spring(), 5000) // Set this time higher than your animation duration 
} 
... 
// Some where in your code that changes the state 
clearInterval(this.interval) 
...

回答：

商店动画：你可以把它分解到这样的事情。然后你可以随意使用.start()和.stop()这个变量来保存动画。

所以这样的事情应该做的：

this.springAnimation = Animated.loop(
    Animated.spring(
    this.springValue, 
    { 
     toValue: 1, 
     friction: 1, 
     tension: 1, 
     duration:5000 
    } 
).start() 
)

您可以找到有关这里的更多信息：

https://facebook.github.io/react-native/docs/animated.html#loop

以上是 循环播放本地反应动画动画 的全部内容， 来源链接： utcz.com/qa/257751.html

回到顶部