网络的 Lottie 事件侦听器和状态 - javascript

Question

为了在网络上播放动画而与 Lottie 打交道。该文档似乎很容易上手，但我在 javascript 中找不到任何非常基本的工作流程 documentation/examples：show pre-animation state => animate => detect animation complete => show post-anim state。这是我使用喜欢的系统所做的示例：

Unliked Post:
1: Display default state thumb graphic
2: User clicks thumb, play thumb animation
3: Animation completes, display liked state thumb graphic

Liked Post:
4: If user clicks already liked thumb...play reverse animation
5: Reverse animation complete, display default thumb graphic

非常感谢任何帮助！

Answer 1

使用 goToAndStop 计算出来。创建动画后，我会检查用户是否喜欢（喜欢）post 并相应地显示动画的第一帧或最后一帧：

handleAnimation(anim: any) {
    this.anim = anim;

    if (this.isHearted) {
        this.anim.goToAndStop(25, true); //last frame. on state.
    }
    else {
        this.anim.goToAndStop(0, true); //first frame. off state.
    }   
}

所以当用户喜欢 post 我会播放心形动画 this.anim.play() 如果用户不喜欢 post 我会将动画状态设置为第一帧 this.anim.goToAndStop(0, true)。使用动画帧的好处是我不需要单独的图形来表示图标的关闭和打开状态，我可以只使用如图所示的动画对象。

最后一点...我还注意到我的动画对象中添加了一个奇怪的粉红色描边，使它们看起来有点模糊。似乎 lottie 插件从 json 数据创建了一个 SVG，并且出于某种原因正在对 svg 应用笔画。所以我不得不通过以下方式在 css 中删除它：

lottie-animation-view {
    stroke: none !important;
}

只是想我会提到这一点，以防其他人发生这种情况。仅供参考，我在 ionic 中使用 ng-lottie 库。

网络的 Lottie 事件侦听器和状态 - javascript

Lottie event listeners and states for web - javascript

javascript

animation

web

lottie