React Native Moti动画如何随状态启停？当前实现致动画异常

问题原因 #

用playbackState === State.Playing作为条件渲染包裹动画组件时，即便playbackState保持Playing状态，Moti的循环动画在第一次完成后，会因为组件未触发重新渲染，导致内部动画控制器无法重启循环；或者条件渲染的方式干扰了Moti的动画生命周期管理，使得循环逻辑失效。

解决方案 #

方案1：通过状态控制动画属性（推荐） #

不通过卸载/挂载组件控制播放，直接在SoundWave组件内用playbackState控制动画目标状态和循环属性：

[...Array(3).keys()].map((index) => {
    return (
        <SoundWave
            top={height * 0.365}
            from={{ opacity: 1, scale: 1 }}
            animate={playbackState === State.Playing ? { opacity: 0, scale: 2 } : { opacity: 1, scale: 1 }}
            transition={{
                type: 'timing',
                duration: 4400,
                easing: Easing.out(Easing.ease),
                delay: index * 1400,
                repeatReverse: false,
                loop: playbackState === State.Playing,
            }}
            key={index}
        />
    );
})

组件持续挂载，playbackState为Playing时动画启动并循环，切换为其他状态时动画重置并停止。

方案2：修改组件key强制重新挂载 #

如果必须保留条件渲染，给每个SoundWave添加包含playbackState的key，每次playbackState变为Playing时强制组件重新挂载，确保动画循环重启：

{playbackState === State.Playing &&
[...Array(3).keys()].map((index) => {
    return (
        <SoundWave
            top={height * 0.365}
            from={{ opacity: 1, scale: 1 }}
            animate={{ opacity: 0, scale: 2 }}
            transition={{
                type: 'timing',
                duration: 4400,
                easing: Easing.out(Easing.ease),
                delay: index * 1400,
                repeatReverse: false,
                loop: true,
            }}
            key={`${index}-${playbackState}`}
        />
    );
})}

内容的提问来源于stack exchange，提问作者Onyx