Question

与Lottie一起在网上播放动画。文档看起来相当简单，但我无法在javascript中找到任何基本工作流程的文档/示例：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计算出来。创建动画时，我会检查用户是否喜欢（热心）帖子并相应地显示动画的第一帧或最后一帧：

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.
    }   
}

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

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

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

我想提一下，以防万一发生在其他人身上。仅供参考我在ng-lottie使用ionic库。

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

1 个答案: