.NET Maui中如何通过代码控制Lottie动画的启停

核心问题 #

当前代码仅设置IsAnimationEnabled = true，但动画播放完毕后该属性仍为true，再次点击时不会触发属性变更事件，因此无法重播。此外，动画结束后停留在最后一帧，未重置到起始位置。

解决方案 #

通过以下步骤实现每次点击都能从头播放动画：

1. 先停止当前动画（若正在播放）
2. 将动画进度重置到起始帧
3. 重新启用动画播放

调整后的XAML代码 #

<skia:SKLottieView
    x:Name="animatedPlusIcon"
    Source="WhiteCheck.json"
    HeightRequest="150"
    WidthRequest="150"
    RepeatCount="0" <!-- 动画仅播放一次 -->
    IsAnimationEnabled="False"> <!-- 初始状态不自动播放 -->
    <skia:SKLottieView.GestureRecognizers>
        <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
    </skia:SKLottieView.GestureRecognizers>
</skia:SKLottieView>

调整后的后台代码 #

void TapGestureRecognizer_Tapped(System.Object sender, System.EventArgs e)
{
    // 停止当前动画
    animatedPlusIcon.IsAnimationEnabled = false;
    // 重置动画到起始帧
    animatedPlusIcon.Seek(0);
    // 重新启动动画
    animatedPlusIcon.IsAnimationEnabled = true;
}

说明 #

• RepeatCount="0"确保动画每次仅播放一次（符合添加任务时的单次反馈需求）
• 初始IsAnimationEnabled="False"避免页面加载时自动播放动画
• Seek(0)强制将动画进度重置到0，保证每次播放都从开头开始
• 先禁用再启用动画，触发属性变更事件，确保动画重新启动

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