我是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>
)
}
我现在正在尝试使用此动画创建一个循环,将其向前播放,然后向后播放,然后再次开始该过程。
我已经进行了一些研究,得出的结论是必须使用动画值和时间来完成此工作吗?我发现了很多向前和向后播放而不是一起播放的示例(in the react native docs!)。
这可以在安装了组件的组件上完成吗?还是必须是一个单独的功能?
提前谢谢!
答案 0 :(得分:1)
因此,您可以做的一件事是对此state.progress使用Animated.loop(),然后在每次迭代时反转动画的速度。
AnimateFunction = () => {
Animated.loop(
Animated.timing(
this.state.progress,
{
toValue: 1,
duration: (your duration of anim),
easing: Easing.linear()
}
)
).start(
() => {
this.animation.setSpeed(this.animation.speed * -1);
}
);
}
,然后将componentDidMount更改为:
componentDidMount() {
this.AnimateFunction();
}
我不确定是否需要测试,但可能需要在设置速度的同时重置this.state.progress.setValue(0) 每个循环之后。请记住这一点,以防它一开始不起作用。
尽管我很想知道您是否有与我相同的以下问题。当我出于某种原因在React Native中循环播放Lottie动画时,它们会在循环之间暂停...无论如何希望它对您有用
答案 1 :(得分:1)
我想出的解决方案是在循环内使用如下序列:
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重新启动时,添加缓动会使动画略微跳动,因此暂时将其注释掉。
答案 2 :(得分:0)
const defaultEvent = {
eventName: 'complete',
callback: () => {
alert("loopComplete")
/*Insert your handlers here*/
},
};
然后在您的 Lottie 组件上:
<Lottie
options={defaultOptions}
height={400}
width={400}
eventListeners={[defaultEvent]}
/>
您可以使用的事件名称:complete
、loopComplete
、enterFrame
、segmentStart
、config_ready
、data_ready
、loaded_images
, DOMLoaded
, destroy
(编辑)我后来读到这是针对本机的,不幸的是,我很抱歉,这是一个 react-js 解决方案