0

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

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

任何帮助深表感谢！

4

1 回答 1

0

使用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 应用了笔画。所以我不得不通过以下方式在css中删除它：

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

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

于 2018-04-11T20:37:24.637 回答