前端使用lottie-web，使用AE到处的JSON动画贴心教程

news2024/10/6 1:41:47

Lottie简介

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

Lottie的优点

  1. 动画由设计使用专业的动画制作工具AE来实现，使动画实现更加方便，且效果更好
  2. 前端可以方便的调用动画，并对动画进行控制，减少前端动画工作量
  3. 设计制作动画，前端展现动画，分工明确
  4. 使用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后

Lottie的免费资源

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

image.png

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

好了介绍完了它的用法后，我们现在就去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，如之前我们看到的效果 QQ20210711-211633-HD.gif 先把下载的动画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,
},
});
复制代码

具体效果如下

QQ20210711-214951-HD.gif

结语

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

写在最后

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/149630.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

02_FreeRTOS移植

02_FreeRTOS移植

目录 获取FreeRTOS源码 FreeRTOS源码内容 FreeRTOS内核 Demo文件夹 Source文件夹 portable文件夹 FreeRTOS移植 移植步骤 移植详解 实验源码: 获取FreeRTOS源码 FreeRTOS官网:https://www.freertos.org/ FreeRTOS源码内容 FreeRTOS内核 Demo文件夹 Demo文件夹里面就…
阅读更多...
《Protein Actions Principles and Modeling》-《蛋白质作用原理和建模》中文分享（15）

《Protein Actions Principles and Modeling》-《蛋白质作用原理和建模》中文分享（15）

《Protein Actions Principles and Modeling》-《蛋白质作用原理和建模》 本人能力有限&#xff0c;如果错误欢迎批评指正。 第四章&#xff1a;Protein Binding Leads to Biological Actions &#xff08;蛋白质的结合会产生生物作用&#xff09; 如果我们想要对一个结合过…
阅读更多...
Java 泛型中的通配符详解

Java 泛型中的通配符详解

目录 1、如何定义和使用上界通配符&#xff1f; 2、如何定义和使用无界通配符&#xff1f; 3、如何定义和使用下界通配符&#xff1f; 4、如何使用通配符定义泛型类或接口之间的子类型关系&#xff1f; 5、通配符的捕获和辅助方法 6、通配符使用指南 在泛型代码中&#x…
阅读更多...
C++ txt文本文件处理系统（c++学习小例子）

C++ txt文本文件处理系统（c++学习小例子）

C++ txt文本文件处理系统（c++学习小例子） 一、界面示例二、 要求2.1 数据格式2.2 实现功能三、代码3.1 classfi.h3.2 classfi.cpp3.3 main.cpp四、 使用说明一、界面示例 二、 要求 2.1 数据格式 现有DEM数据，其格式为DEM_data.txt，可在文章末尾下载。文本存储格式如下： …
阅读更多...
用javascript分类刷leetcode19.数组(图文视频讲解)

用javascript分类刷leetcode19.数组(图文视频讲解)

数组操作的时间复杂度 Access&#xff1a;O(1) Search&#xff1a;O(n) Insert&#xff1a; 平均O(n)&#xff0c;最好的情况下O(1)&#xff0c;也就是在数组尾部插入O(1)&#xff0c;最坏的情况下O(n) Delete&#xff1b;平均O(n)&#xff0c;最好的情况下O(1)&#xff0c;…
阅读更多...
力扣刷题记录——367. 有效的完全平方数、383. 赎金信、387. 字符串中的第一个唯一字符、389. 找不同

力扣刷题记录——367. 有效的完全平方数、383. 赎金信、387. 字符串中的第一个唯一字符、389. 找不同

本专栏主要记录力扣的刷题记录&#xff0c;备战蓝桥杯&#xff0c;供复盘和优化算法使用&#xff0c;也希望给大家带来帮助&#xff0c;博主是算法小白&#xff0c;希望各位大佬不要见笑&#xff0c;今天要分享的是——《367. 有效的完全平方数、383. 赎金信、387. 字符串中的第…
阅读更多...
LightDB单机安装

LightDB单机安装

LightDB单机安装 LightDB官网&#xff1a;https://www.hs.net/lightdb 下载安装包&#xff1a;lightdb-x-13.8-22.3-7953-el7.x86_64.zip 前置准备 防火墙配置(选择一种操作) firewall防火墙 firewall-cmd --permanent --add-port5432/tcp firewall-cmd --permanent --add-p…
阅读更多...
（深度学习快速入门）第三章第三节2：深度学习必备组件之损失函数和激活函数

（深度学习快速入门）第三章第三节2：深度学习必备组件之损失函数和激活函数

文章目录一&#xff1a;损失函数&#xff08;1&#xff09;均方误差损失&#xff08;MSE&#xff09;&#xff08;2&#xff09;交叉熵损失&#xff08;Cross Entropy&#xff09;二&#xff1a;激活函数&#xff08;1&#xff09;tanh&#xff08;2&#xff09;ReLU&#xff0…
阅读更多...
SpringBoot数据响应与内容协商

SpringBoot数据响应与内容协商

目录 数据响应与内容协商 1、响应JSON 1.1、jackson.jarResponseBody 1.2、SpringMVC到底支持哪些返回值 2、内容协商 1、引入xml依赖 2、postman分别测试返回json和xml 3、开启浏览器参数方式内容协商功能 数据响应与内容协商 1、响应JSON 1.1、jackson.jarResponseBo…
阅读更多...
区块链北大肖老师学习笔记6

区块链北大肖老师学习笔记6

第七节 比特币的挖矿难度调整 H(block header) < target 目标(target)预值越小&#xff0c;挖矿的难度越大。调整挖矿的难度就是调整目标空间在整个输出空间中所占的比例。 比特币用的哈希算法是SHA-256&#xff0c;这个产生的哈希值是256位。所以整个输出空间是2的256次…
阅读更多...
[JavaEE]synchronized 与 死锁

[JavaEE]synchronized 与 死锁

专栏简介: JavaEE从入门到进阶 题目来源: leetcode,牛客,剑指offer. 创作目标: 记录学习JavaEE学习历程 希望在提升自己的同时,帮助他人,,与大家一起共同进步,互相成长. 学历代表过去,能力代表现在,学习能力代表未来! 目录 1.synchronized 的特性 2. synchronized 使用示例:…
阅读更多...
new做了什么

new做了什么

function structure (name, age) {this.name namethis.age age}// 给构造函数--prototype加上一个方法structure.prototype.sayName function () {console.log(this.name, 调用打印);return this.name}structure.one 5const person new structure(张龙, 188)// 打印构造函…
阅读更多...
【基础算法】前缀和 与 差分

【基础算法】前缀和 与 差分

前缀和 用来求解一段区间&#xff08;一维&#xff09;的总和 或者一块矩形区域&#xff08;二维&#xff09;的总和 一维前缀和 原数组a[N]&#xff0c;前缀和数组s[N]// ---读入数组a[N] // ---// 处理前缀和数组 s[N] s[0] 0; //定义在全局变量&#xff0c;不用写这一句 f…
阅读更多...
SOA 和微服务有何区别？

SOA 和微服务有何区别？

玩过 Dubbo 的小伙伴应该都有听说过一个概念叫做 SOA&#xff0c;每当我们说起微服务的时候&#xff0c;很多人就会去纠结这和 SOA 有啥关系呀&#xff1f;感觉换汤不换药呀。 今天松哥来稍微和小伙伴们讨论下这个话题&#xff0c;我们一起来看看 SOA 和微服务到底有何异同。 …
阅读更多...
c语言进阶（3）——指针进阶笔试题详解

c语言进阶（3）——指针进阶笔试题详解

1.指针和数组笔试题解析 关键&#xff1a;数组名在两种情况下是指整个数组&#xff1a; &#xff08;1&#xff09;sizeof&#xff08;数组名&#xff09;&#xff08;2&#xff09;&数组名 其它的情况下&#xff0c;都是代表数组的首元素地址。 例题 1 &#xff1a;一维…
阅读更多...
【算法面试】算法在面试中考察的是什么（金三银四面试专栏启动）

【算法面试】算法在面试中考察的是什么（金三银四面试专栏启动）

&#x1f4eb;作者简介&#xff1a;小明java问道之路&#xff0c;专注于研究 Java/Liunx内核/C及汇编/计算机底层原理/源码&#xff0c;就职于大型金融公司后端高级工程师&#xff0c;擅长交易领域的高安全/可用/并发/性能的架构设计与演进、系统优化与稳定性建设。 &#x1f4…
阅读更多...
Kafka消息中间件

Kafka消息中间件

Kafka消息中间件 同时市场上也发展处ActiveMq、RabbitMQ、Kafka、RocketMQ、Pulsar等众多优秀的框架&#xff1b;在大数据领域中Kafka目前是使用较多的框架。Kafka作为内部消息通知的框架&#xff0c;可以适应项目中大数据量的高吞吐、实时流计算等功能实现。 分布式消息中间…
阅读更多...
【自学C++】C++整型

【自学C++】C++整型

C整型 C整型教程 C 的整型用来存放整数 类型 的数字&#xff0c;即不可以带小数&#xff0c;C 整型可以分为短整型 short&#xff0c;整型 int&#xff0c;长整型 long 和 long long 类型。 C整型取值范围 数据类型取值范围字节数short-32768 ~ 327672int-2147483648 ~ 214…
阅读更多...
小米万兆路由器里的Docker安装drawio

小米万兆路由器里的Docker安装drawio

小米2022年12月份发布了万兆路由器&#xff0c;里面可以使用Docker。 今天尝试在小米的万兆路由器里安装drawio 20.8.3。 准备工作 请参考https://engchina.blog.csdn.net/article/details/128515422的准备工作。 查看Docker Hub镜像信息 访问https://hub.docker.com/r/jgr…
阅读更多...
axios系列之并发

axios系列之并发

文章の目录一、axios.all(iterable)二、axios.spread(callback)写在最后处理并发请求的助手函数 一、axios.all(iterable) function a() {return axios.get("http://localhost/a"); } function b() {return axios.get("http://localhost/b"); }axios.all…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023