LottieJS动画在项目上的基本使用_lottie js_司徒小北的博客-程序员信息网

技术标签：动画效果 lottiejs动画 lottie lottie-web JavaScript LottieJS

一、简单介绍：

lottie是一个跨平台的动画库，通过AE（After Effects）制作动画，再通过AE插件Bodymovin导出Json文件，最终各个终端解析这个Json文件，还原动画。本文中我只介绍前端用到的库lottie-web。

lottie是一个不太占体积，还原度高，对于初学者友好的库。设计师制作好动画，并且利用Bodymovin插件导出Json文件。而前端直接引用lottie-web库即可，它默认的渲染方式是svg，原理就是用JS操作Svg API。但是前端完全不需要关心动画的过程，Json文件里有每一帧动画的信息，而库会帮我们执行每一帧。

注：开发拿到的动画文件基本上都一样，有data.json和images文件夹，接下来说一下具体的用法和配置项

二、安装lottie-web插件

npm install lottie-web

三、使用

import lottie from 'lottie-web';
import animationData from "./loading.json"; //引入你的json动画数据

let animationDom = document.getElementById('animation'); //获取渲染的dom元素
if (animationDom) {
   let fireworkLeft = lottie.loadAnimation({
        container: animationDom,
        renderer: "svg",
        name: "fireworkLeft",
        loop: true, //循环
        autoplay: true, //自动播放
        // assetsPath: "images/",
        // animationData: animationData,//动画数据
        animationData: JSON.parse(JSON.stringify(animationData))
   })
   fireworkLeft.addEventListener("complete", () => {
       fireworkLeft.destroy();
   });
}

属性的意思：

container：当前需要渲染的DOM
renderer：渲染方式，默认是Svg，还有Html和Canvas方案。
loop：是否循环播放
autoplay：是否自动播放
animationData ：AE导出的Json文件，使用import引入，如 import animationData from './xxx/data.json';

以上基本的用法就可以了，动画就可以预览了，如果出现图片加载不出来的情况，可以修改下图片路径或者手动替换json文件中的图片地址为base64的图片地址：如下

去掉图片路径，替换p为base64的图片，base64地址需要自己将图片转换一下，转换地址：在线图片转Base64编码-BeJSON.com

四、动画的播放与暂停，如果动画需要用户触发与暂停，需要有一个切换操作（toggle）

this.animation.play();
this.animation.pause();

五、动画执行过程中的钩子，可以对动画有一定的控制权

complete
loopComplete
enterFrame
segmentStart
config_ready(初始配置完成)
data_ready（所有动画数据加载完成）
DOMLoaded（元素已添加到DOM节点）
destroy

// 动画播放完成触发
anm.addEventListener('complete', anmLoaded);

// 当前循环播放完成触发 
anm.addEventListener('loopComplete', anmComplete);

// 播放一帧动画的时候触发 
anm.addEventListener('enterFrame', enterFrame);

Lottie原理与源码解析

交流

1、QQ群：可添加qq群共同进阶学习：进军全栈工程师疑难解群： 856402057

2、公众号：公众号「进军全栈攻城狮」，对前端技术保持学习爱好者。我会经常分享自己所学所看的干货，在进阶的路上，共勉！

本文链接：https://blog.csdn.net/weixin_42333548/article/details/107764787

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

android studio使用高德地图sdk_qq_33638017的博客-程序员信息网

1、使用sdk a)注册高德地图，申请key(http://lbs.amap.com/dev/key/app) b)显示地图：第一步，配置AndroidManifest.xml//地图SDK（包含其搜索功能）需要的基础权限&lt;!--允许程序打开网络套接字--&gt;&lt;uses-permission android:name="android.permission.I...

宝塔php管理没有phpinfo,宝塔安装php不显示_weixin_39759918的博客-程序员信息网

宝塔安装php不显示,宝塔,根据提示,指令,发现,却没有宝塔安装php不显示易采站长站，站长之家为您整理了宝塔安装php不显示的相关内容。在使用宝塔安装php扩展时，显示php扩展安装成功，但用phpinfo函数查看却没有。解决办法：进入ssh，输入以下指令wget -O ext.sh http://125.88.182.172:5880/ext/ext.sh && sh ext....

Hibernate Criteria 查询---addOrder用法添加排序_addorder(new trimorder(_sunywz的博客-程序员信息网

Hibernate Criteria 查询—addOrder用法添加排序用于分页查询根据条件去查询~

Java程序员从笨鸟到菜鸟之（九十四）深入java虚拟机（三）——类的生命周期(下）类的初始化..._peizhe12321的博客-程序员信息网

上接深入java虚拟机——深入java虚拟机（二）——类加载器详解（上），在上一篇文章中，我们讲解了类的生命周期的加载和连接，这一篇我们接着上面往下看。类的初始化:在类的生命周期执行完加载和连接之后就开始了类的初始化。在类的初始化阶段，java虚拟机执行类的初始化语句，为类的静态变量赋值，在程序中，类的初始化有两种途径：（1）在变量的声明处赋值。（2）在静态代码块处赋值...

python 用pyinstaller打包多进程multiprocessing、tkinter scrapy爬取豆瓣TOP250部电影信息_multiprocessing pyinstaller start program_行者刘6的博客-程序员信息网

参考文章：https://blog.csdn.net/La_vie_est_belle/article/details/79017358https://blog.csdn.net/weixin_42052836/article/details/82315118https://blog.csdn.net/zm147451753/article/details/85850526常规py...

ftp搭建之匿名登录_宝塔添加匿名ftp登录_会写bug的程序猿的博客-程序员信息网

安装配置参见：ftp搭建之本地用户验证登录匿名登录参数设置：anonymous_enable=YESwrite_enable=YESlocal_umask=022anon_upload_enable=YES #容许匿名用户上传文件anon_mkdir_write_enable=YES #容许匿名用户建立目录anon_other_write_enable=YES #容许匿名用户除了新建和上传外的其他权限如果文件浏览访问出现无权限：打开IE-》inter...