前端使用lottie-web,使用AE导出的JSON动画贴心教程

简介: 前端使用lottie-web,使用AE导出的JSON动画贴心教程

Lottie简介

官方介绍:Lottie是一个库,可以解析使用AE制作的动画(需要用bodymovie导出为json格式),支持web、ios、android、flutter和react native。 在web端,lottie-web库可以解析导出的动画json文件,并将其以svg或者canvas的方式将动画绘制在我们的页面上.

Lottie的优点

  1. 动画由设计使用专业的动画制作工具AE来实现,使动画实现更加方便,且效果更好
  2. 前端可以方便的调用动画,并对动画进行控制,减少前端动画工作量
  3. 设计制作动画,前端展现动画,分工明确
  1. 使用lottie方案,json文件大小比gif文件小很多,性能也会更好

lottie-web 在前端的使用

  1. 安装lottie-web
npm install lottie-web
复制代码
  1. lottie-web的基本用法
import lottie from 'lottie-web'

const animation = lottie.loadAnimation({
  container: document.getElementById('domId'), // 绑定dom节点
  renderer: 'svg', // 渲染方式:svg、canvas
  loop: true, // 是否循环播放,默认:false
  autoplay: true, // 是否自动播放, 默认true
  animationData: // AE动画使用bodymovie导出为json数据
})
  1. json简单解释
{
    "v": "5.1.13",       // bodymovin 版本
    "fr": 30,            // 帧率
    "ip": 0,             // 起始关键帧
    "op": 20,            // 结束关键帧
    "w": 150,            // 视图宽
    "h": 130,            // 视图高
    "nm": "鹅头收起动画",  // 名称
    "ddd": 0,             // 3d
    "assets": [],        // 资源集合 
    "layers": [],        // 图层集合
    "masker": []         // 蒙层集合
}
  1. lottie-web 常用方法 前面我们就初始化了一个lottie对象了. 然后我们介绍它的一些常用方法
animation.play(); // 播放,从当前帧开始播放

animation.stop(); // 停止,并回到第0帧

animation.pause(); // 暂停,并保持当前帧

animation.goToAndStop(value, isFrame); // 跳到某个时刻/帧并停止isFrame(默认false)指示value表示帧还是时间(毫秒)

animation.goToAndPlay(value, isFrame); // 跳到某个时刻/帧并进行播放

animation.goToAndStop(30, true); // 跳转到第30帧并停止

animation.goToAndPlay(300); // 跳转到第300毫秒并播放

animation.playSegments(arr, forceFlag); // arr可以包含两个数字或者两个数字组成的数组,forceFlag表示是否立即强制播放该片段

animation.playSegments([10,20], false); // 播放完之前的片段,播放10-20帧

animation.playSegments([[0,5],[10,18]], true); // 直接播放0-5帧和10-18帧

animation.setSpeed(speed); // 设置播放速度,speed为1表示正常速度

animation.setDirection(direction); // 设置播放方向,1表示正向播放,-1表示反向播放

animation.destroy(); // 删除该动画,移除相应的元素标签等。

Lottie-web 常用的事件

animation.addEventListener('data_ready', () => {}) // 动画数据加载完毕
animation.addEventListener('config_ready', () => {}) // 完成初始配置后
animation.addEventListener('data_failed', () => {}) // 加载动画数据失败
animation.addEventListener('loaded_images', () => {}) // 所有图片加载成功或者失败
animation.addEventListener('DOMLoaded', () => {}) // 将元素添加到DOM后
* complete: 播放完成(循环播放下不会触发)
* loopComplete: 当前循环下播放(循环播放/非循环播放)结束时触发
* enterFrame: 每进入一帧就会触发,播放时每一帧都会触发一次,stop方法也会触发
* segmentStart: 播放指定片段时触发,playSegments、resetSegments等方法刚开始播放指定片段时会发出,如果playSegments播放多个片段,多个片段最开始都会触发。
* data_ready: 动画json文件加载完毕触发
* DOMLoaded: 动画相关的dom已经被添加到html后触发
* destroy: 将在动画删除时触发

Lottie的免费资源

之前我们说过Lottie的动画是通过AE制作好了动画后,再使用bodymovie导出为json格式。其实有一个网站,它提供了一些免费的动画(当然也有付费的)直接有我们需要的动画json数据.


如下面的动图, 我们找到我们想要的动画,然后点击后,弹出窗口,点击下载,格式为JSON。然后就能把这个动画的json数据用到我们自己的项目里边去了.

好了介绍完了它的用法后,我们现在就去vue中去做一个实战

在vue中使用lottie

  1. 使用vite跑vue
npm init @vitejs/app <project-name>
复制代码
  1. 安装lottie-web
npm install lottie-web
复制代码
  1. 封装一个基础的组件lottie.vue, 主要就是初始化好lottie对象,然后把对象传递出去给其他组件用
<template>
  <div :style="style" ref="lavContainer"></div>
</template>

<script>
import lottie from ‘lottie-web’

export default {

name: ‘lottie’,

props: {

options: {

type: Object,

required: true,

},

height: Number,

width: Number,

},

computed: {

style() {

return {

width: this.width ?

<span class="hljs-subst">${<span class="hljs-variable language_">this</span>.width}</span>px : ‘100%’,

height: this.height ? <span class="hljs-subst">${<span class="hljs-variable language_">this</span>.height}</span>px : ‘100%’,

}

},

},

mounted() {

this.anim = lottie.loadAnimation({

container: this.KaTeX parse error: Expected 'EOF', got '}' at position 798: …ta</span>, }̲) <span cla…emit(‘animCreated’, this.anim)
},

unmounted () {

this.anim && this.anim.destroy()

}

}

</script>

复制代码

  1. 基于上面的组件,我们封装一个更具象一点的组件clickIcon,这个组件也是通用组件,增加了点击后,动画交互需要怎么走向等逻辑.
<template>
  <div class="clickIcon">
    <div
      class="iconBox"
      :style="{ width: width + 'px', height: height + 'px' }"
    >
      <slot name="svg" v-bind:data="{ toggle, flag, iconWidth, iconHeight }"></slot>
      <lottie
        @click="toggle"
        :class="{ show: flag === true || !defaultSlot }"
        class="like"
        style="display: none;"
        :options="options"
        :height="height"
        :width="width"
        v-on:animCreated="handleAnimation"
      />
    </div>
  </div>
</template>

<script>
import { computed, ref, defineComponent } from “vue”;
import Lottie from “./lottie.vue”;
let anim = null
/**

  • 点击icon然后播放一段动画的组件
  • 适合收藏、点赞等小功能
    */


export default defineComponent({
name: “clickIcon”,
props: {
// 宽度
width: {
type: Number,
default: 100,
},
// 高度
height: {
type: Number,
default: 100,
},
// 初始化Lottie需要的参数
options: {
type: Object,
default: () => {},
},
// 是否需要一个插槽,显示一个默认的图标
defaultSlot: {
type: Boolean,
default: true
},
// 从外面传递的一个点击后需要的交互效果
toggleFun: {
type: Function,
default: null
}
},
components: {
lottie: Lottie,
},
emits: [‘init’],
setup(props, { emit }) {
// 动画速度
const animationSpeed = 2
// 点击交互标识
let flag = ref(false);
// 图标高度
const iconWidth = computed(() => {
return props.width;
});
// 图标宽度
const iconHeight = computed(() => {
return props.height;
});
// 点击图标交互
const toggle = function() {
if (!props.defaultSlot) {
props.toggleFun && props.toggleFun(anim)
} else {
flag.value = !flag.value;
if (flag.value) {
anim.play();
} else {
anim.stop();
}
}
};
// 获取anim对象
const handleAnimation = function(animated) {
anim = animated;
onSpeedChange()
emit(‘init’, animated)
}
// 停止动画
const stop = function() {
anim.stop();
}
// 播放动画
const play = function() {
anim.play();
}
// 暂停动画
const pause = function() {
anim.pause();
}
// 控制播放速度
const onSpeedChange = function() {
anim.setSpeed(animationSpeed);
}
return {
iconWidth,
iconHeight,
handleAnimation,
flag,
toggle,
stop,
play,
pause
};
},
});
</script>

<style scoped>
.iconBox {
position: relative;
}
.show {
display: inline-block !important;
}
.hidden {
display: none !important;
}
.like {
cursor: pointer;
}
.icon {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
 

接下来我们就写一个喜欢组件like.vue,如之前我们看到的效果 先把下载的动画json文件,放到资源文件目录,然后我们再用代码调用它使用.

<template>
  <lottie
    class="like"
    :options="defaultOptions"
    :height="height"
    :defaultSlot="false"
    :width="width"
    @init="init"
    :toggleFun="toggle"
    ref="lottie"
  >
  </lottie>
</template>
<script>
import Lottie from “…/common/clickIcon.vue”;
import animationData from “/public/like.json”;

export default {
name: “app”,
components: {
lottie: Lottie,
},
props: {
width: {
type: Number,
default: 60,
},
height: {
type: Number,
default: 60,
},
},
methods: {
init (animation) {
animation && animation.goToAndStop(0, true)
},
toggle (animation) {
if (this.toggleFlag) {
animation.playSegments([50, 90], true); // 从50帧播放到最后
} else {
animation && animation.playSegments([0, 50], true); // 从第0帧播放到50帧
}
this.toggleFlag = !this.toggleFlag
}
},
data() {
return {
toggleFlag: false,
defaultOptions: {
name: “like”,
animationData: animationData,
autoplay: false,
loop: false,
}
};
}
};
</script>

<style scoped>
.hidden {
display: none;
}
</style>
 

上边的效果之所以这样做,是因为我们下载的‘喜欢’动画的json文件,它是由两个状态组成的, 0-50帧是由未选中到选中状态的动画,50->90帧是选中状态->未选中状态的动画. 具体多少帧到多少帧可以从网站下载json文件那个窗口下面的进度去看到的.

  1. 使用喜欢组件
<template>
  <div id="app">
    <like></like>
  </div>
</template>
<script>
import { defineComponent } from “vue”;
import like from “./components/like/index.vue”;

export default defineComponent({
components: {
like,
},
});
 

结语

以上就是利用Lottie在vue中实现一个喜欢组件了。 其实目前只是写了这么一个demo而已,大家有兴趣的话,可以把它再实现完一下,现在组件还没有去记录一下组件的默认状态, 它可能默认就是被选中的状态. 另外我们这一次拿到的动画组件刚好是有选中和未选中两种状态的,在之前给大家介绍的免费下载动画json文件的网站里边还有一些动画是只给到一个选中的动画效果,并没有未选中的状态,这时候我们可以自己去找一个类似的svg图标,然后作为默认的图标,点击后,触发选中的动画效果. 这种场景碰到的极少,如果是公司项目的话,可以要求美工去做两个状态的动画效果,如果是自己的个人项目,然后碰到了很喜欢的免费动画,然而它只提供了一个状态的话,这时候才有用。 我在组件其实也把这种情况考虑进去了,就是defaultSlot把这个属性设置成true, 然后在写组件的时候,添加一个插槽作为一个默认组件.


写在最后

大家可以给个点赞鼓励一下萌新嘛? 哈哈哈, 先谢过了~

相关文章
|
13天前
|
XML 存储 JSON
51. 【Android教程】JSON 数据解析
51. 【Android教程】JSON 数据解析
21 2
|
26天前
|
缓存 前端开发 JavaScript
使用Web前端性能优化提高网站加载效率
前端性能优化关键在于提高用户体验和降低资源消耗,Webpack是重要工具。基础优化策略包括减少HTTP请求、资源压缩与缓存、异步加载。Webpack优化配置涉及Tree Shaking、代码分割。高级策略涵盖Long-term Caching、缓存提升和插件优化。打包部署时,自动化流程和环境管理也至关重要。通过这些方法,可提升Web应用速度和体验。
114 0
|
2天前
|
前端开发 JavaScript 数据处理
前端新手指南:如何解决JavaScript导出CSV文件不完整的问题
【6月更文挑战第4天】在JavaScript中处理CSV文件时,需要特别注意一些特殊字符,例如逗号、双引号、换行符等。这些字符可能会影响CSV文件的解析,导致数据错乱。
12 0
|
3天前
|
XML 数据格式 Python
Python基础教程(第3版)中文版 第15章 python和web(笔记)
Python基础教程(第3版)中文版 第15章 python和web(笔记)
|
3天前
|
前端开发 JavaScript 测试技术
web前端语言框架:探索现代前端开发的核心架构
web前端语言框架:探索现代前端开发的核心架构
15 4
|
3天前
|
前端开发 JavaScript 开发工具
Web网页前端教程免费:引领您踏入编程的奇幻世界
Web网页前端教程免费:引领您踏入编程的奇幻世界
8 3
|
10天前
|
Web App开发 资源调度 JavaScript
【保姆级】前端使用node.js基础教程
【6月更文挑战第3天】Node.js 是基于 Chrome V8 引擎的 JavaScript 运行环境,用于服务器端编程。常用命令包括:安装 Node.js,通过 `node -v` 查看版本;使用 npm(Node 包管理器)进行初始化、安装/卸载包、查看版本和更新;运行 `.js` 脚本;使用 `node inspect` 调试;借助 nodemon 实现自动重启;通过 `npm list` 管理包;
5 0
|
11天前
|
SQL 前端开发 关系型数据库
28. Python Web 编程:Django 基础教程
28. Python Web 编程:Django 基础教程
17 2
|
13天前
|
JavaScript 编译器 IDE
36.【TypeScript 教程】tsconfig.json 配置
36.【TypeScript 教程】tsconfig.json 配置
10 0
|
15天前
|
JavaScript 前端开发 Java
基于SpringBoot+Vue+uniapp的在线开放课程的Web前端的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的在线开放课程的Web前端的详细设计和实现(源码+lw+部署文档+讲解等)