Lottie控制动画片段循环及播放-动效-UICN用户体验设计平台

恭喜你成为UI中国推荐设计师（详情）

查看全部热门榜单

全部

常用搜索：作品集 AE ui设计 aigc icon logo app

您的意见是我们 UI 中国进步的动力！

点击立即反馈按钮，发表您的意见！

立即反馈

QQ群反馈

您也可以加入UI中国官方反馈群进行反馈！

群号：302892100

备注：反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作，请填写需求表单，我们会在第一时间与您联系！

0/20

0/200

设计大赛

设计大赛
发布广告
发布招聘
其它需求

取消发送需求

提交完成
感谢您对UI中国的支持和信赖！

我知道了

Lottie控制动画片段循环及播放

0.0°

2019-12-06 临摹练习 动效举报 6028 3 4 0

ZhangEEEl 关注

在网上看到这个实例，打算用Lottie临摹下，Lottie教程：https://zhuanlan.zhihu.com/p/25935006。

这个实例包括了一些Lottie的相对高级的用法，这个动画只用到了一个JSON文件，先进行拳手出场动画的自动播放，再通过绑定JS事件来实现点击浏览器左右边来播放不同的人物出拳-回撤-待命的循环、动作完成再播放拳手待命的循环。相信能给你很多动效上的启发，打破之前只能从头到尾的播放循环模式。

我把JS代码粘贴上来，[0,65]为出场动画，[65,75]为待命循环，[75,95]/[95/115]为拳手出拳的动作，通过控制帧数来控制动画的播放顺序和事件绑定。

json文件在压缩包里，大家可以下载试试。相信这个实例过后，大家都能对Lottie有更多应用上的创作和灵感上的启发。

更新：2019-12-06

下载

3人已收藏

ZhangEEEl

这个人很懒什么都不想写

3

作品
7

粉丝
13

关注

猜你喜欢

2019-12-06 临摹练习 动效举报 6028 3 4 0

Lottie控制动画片段循环及播放

0.0°

添加收藏！

您还可以进行分类收藏

您确认要推荐？

该作品发布时间：2019年12月06日

评分

完整度

启发性

勤奋性

排版布局

提交需求

猜你喜欢

举报理由:

您确认要推荐？

评分

推荐心得