微信二维码
微博二维码
qq号二维码

Lottie动画基础使用

王伟平 2022.06.29 196人浏览
Lottie动画基础使用

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

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

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

  1. 产出某种物料:让对色彩、交互更专业的UI同学完成动画的设计、实现、优化,产出一种可供识别的物料;

  2. 以某种形式直接识别、使用物料:前端研发通过某种形式直接识别该物料,调用后页面直接渲染动画,无须再配置路径动画、描边动画等;

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

二、Lottie介绍

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

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

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

该示例代码如下:


Lottie{
      : : }
  lottieAnimationItem = lottie.loadAnimation({
    : document.(): : : })

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

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

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




文来源,掘金社区:链接:https://juejin.cn/post/7101629986427109383


分享到:
微信小程序之wx.uploadFile
  • 2019.11.30
  • 天津插画培训,0基础学插画到底要不要报班?
  • 2022.08.12