都2202年了,一个还不知道Lottie动画的前端已经OUT啦!

  • A+

这是一篇可以释放前端同学压力,解放人力,提高生产力的文章。

一、为什么会有Lottie动画呢?

前端程序员根据UI视觉稿实现页面效果时一直存在这样的一种“矛盾” - 动画效果更完美与工期成本的矛盾。一般来说,页面中包含的动画效果越复杂,前端程序员在实现时需要的工期成本越大,尤其是在官网、大促活动、活动拉新等包含巨多动画效果的场景中,动画实现需要的时间占据了大部分工期时间,而工期往往是非常紧凑的。同时后期还经常伴随着与UI设计师的反复“拉扯” - 动画方向要改变下,运动的路径曲线要再调整下,这个圆角值不太圆,这个图片辛苦再替换下。诸如此类,都是让程序员脑袋变秃的罪魁祸首之一!

都2202年了,一个还不知道Lottie动画的前端已经OUT啦!

在反复的拉扯“折磨”中,有一批程序员就在不停的思索,将动画的设计实现与使用进行物理分割,让专业的人做更专业的事儿!

  1. 产出某种物料:让对色彩、交互更专业的UI同学完成动画的设计、实现、优化,产出一种可供识别的物料;
  2. 以某种形式直接识别、使用物料:前端研发通过某种形式直接识别该物料,调用后页面直接渲染动画,无须再配置路径动画、描边动画等;

基于这样的思考与探索,Lottie动画应运而生!

二、Lottie介绍

Lottie是一款由airbnb开源的跨平台动画渲染库,支持Android, iOS, Web, Windows平台。是专门用于解析从AE(Adobe After Effects)中通过Bodymovin插件导出的JSON文件,直接渲染动画。

Lottie官网的传送门在此点我你将见证神奇

本文的重点在于如何使用导出的JSON文件,在AE中如何开发动画以及插件Bodymovin的使用欢迎查阅其他相关资料~

一图胜千言 ~ 代码片段

该示例代码如下:

开发人员进行简单的配置,引入Lottie,加载相应的JSON文件,动画就实现了!简不简单,神不神奇!

专业的人做专业的事儿,后期即使UI设计MM又多动画做出了调整,做为开发的你唯一需要做的就是将文件替换一下即可!是不是又可以挽救几根头发了~

Lottie Files是一个专门针对Lottie动画设计、分享的网站。你可以在这个网站上上传自己制作的lottie动画,也可以浏览其他设计师上传的lottie动画,也可以快速体验,方便而有趣。

三、Lottie常见属性和方法

loadAnimation参数配置

属性名描述
container渲染动画所需容器
renderer动画渲染类型,svg/canvas/html
loop是否循环播放,布尔值
autoplay是否自动播放,布尔值
path一个指定的JSON文件路径,注意这里会发起一个http请求json文件
animationDataJSON动画数据,与path属性不共存

TIPS: 当设置path属性的时候,并不是简单的一个相对路径或者是绝对路径引入,而是lottie会发送一个http请求,访问这个json文件。如果是在vue/react项目中要注意最终的打包访问路径。

考虑页面性能更优,建议使用svg渲染方式,通过path加载远程JSON文件,使用animationData会让json文件打包到JS中,

loadAnimation方法返回的对象

属性名类型描述
play() => void播放动画
pause() => void暂停动画
stop() => void停止动画
play() => void播放动画
setSpeed(number) => void设置播放速度
destroy() => void销毁动画

四、封装Lottie - React Hooks版

为了在项目中能够快速复用,将Lottie动画渲染简易封装成react组件Lottie

安装依赖

Lottie组件封装:

五、Lottie组件的引入与调用

  1. 指定path或animationData

codesandbox地址:codesandbox.io/s/funny-res…

效果图:

都2202年了,一个还不知道Lottie动画的前端已经OUT啦!

作者:稀土掘金_胡哥有话说

weinxin
我的微信公众号
微信扫一扫关注公众号,不定时更新
Thinkin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: