Context
我是lottie-react-native的新手,并且已经成功实现了我的第一个动画:
constructor(props) {
super(props);
this.state = {
progress: new Animated.Value(0),
loop: true
}
}
componentDidMount() {
this.animation.play();
}
render() {
const { progress, loop } = this.state;
return (
<View style={{display:'flex',height:'auto', alignItems: 'center',justifyContent:'center'}}>
<LottieView
ref={animation => {
this.animation = animation;
}}
speed={1}
autoPlay
source={NOACTIVITY}
progress={progress}
loop={loop}
height={300}
width={300}
style={{margin:0,}}
/>
</View>
)
}
问题
我现在尝试使用此动画创建一个循环,向前播放,然后向后播放,然后再次开始该过程。
我做了一些研究并得出结论,这必须使用动画值和时间来完成?我发现了很多例子(在 React Native 文档中! https://facebook.github.io/react-native/docs/animated)向前和向后播放但不能一起播放。
这可以在已安装的组件上完成吗?或者它必须是一个单独的函数?
提前致谢!
我想出的解决方案是在循环内使用序列,如下所示:
AnimateFunction = () => {
Animated.loop(
Animated.sequence([
Animated.timing(
this.state.progress,
{
toValue: 1,
duration: (5000),
//easing: Easing.linear()
}
),
Animated.timing(
this.state.progress,
{
toValue: 0,
duration: (5000),
//easing: Easing.linear()
}
)
])
).start();
}
我发现添加缓动会使应用程序在 0 处重新启动时动画跳跃一点,因此现在将其注释掉。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)