Lottie简介 + 结合到vue3中使用

news2025/1/22 21:20:42

Lottie简介 + 结合封装到vue3中使用

  • 前言：
  • 一、Lottie是什么
    • 1. 官方介绍
    • 2. 实现流程
    • 3. 动画资源
  • 二、为什么要选择Lottie
  • 三、lottie-web的使用
    • 1. 安装导入
    • 2. 初始化动画实例
    • 3. lottie-web支持的控制动画的主要方法
    • 4. lottie-web支持的监听动画的常用的事件
  • 四、lottie-web在Vue3中的使用
    • 1. 安装lottie-web
    • 2. 进行简单封装
    • 3. 使用组件，创建动画
  • 五、一个小例子

前言：

  • 文章内容主要介绍Lottie动画相关知识和如何在web端进行使用
  • Lottie的相关网站可见如下：

LottieFiles（一个Lottie动画资源网站） 、 Lottie官方文档 、 lottie-web

一、Lottie是什么

1. 官方介绍

Lottie is a library for Android, iOS, Web, and Windows that parses Adobe After Effects animations exported as json with Bodymovin and renders them natively on mobile and on the web!

Lottie是一个适用于Android，iOS，Web和Windows的库，它解析使用Bodymovin导出为json的Adobe After Effects动画，并在移动设备和网络上本地渲染它们！

2. 实现流程

  • 把动画的设计和渲染工作分离开
  • 设计师通过 AE 设计需求动画
  • 开发人员对 json格式 的动画进行渲染和设置相关事件监听

在这里插入图片描述

3. 动画资源

  • LottieFiles网站 提供了一些免费的动画资源供我们下载使用

在这里插入图片描述

二、为什么要选择Lottie

  • 动画由设计使用专业的动画制作工具Adobe After Effects来实现，使动画实现更加方便，动画效果也更好；
  • 支持跨平台，开发成本较低，一套Lottie动画可以在Android/IOS/Web多端使用。
  • 使用lottie方案，json文件大小会比gif文件或png 序列文件小很多，性能也会更好。

三、lottie-web的使用

1. 安装导入

1）通过cdn引入

<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.10.1/lottie.min.js" type="text/javascript"></script>

2）通过包管理器导入

npm install lottie-web

2. 初始化动画实例

  • 创建渲染动画的dom元素
  • 使用lottie-web中的方法初始化动画实例
<body>
    <div class="animation"></div>
</body>

<script>
    const animation = bodymovin.loadAnimation({
        container: document.querySelector('.animation'), // 需要渲染动画的dom元素
        path: './data.json', // 动画文件
        renderer: 'svg', // 渲染方式
        loop: true, // 是否循环播放
        autoplay: true, // 是否自动播放
        name: "New Year", // 动画参考名称
    })
</script>

效果：
在这里插入图片描述

3. lottie-web支持的控制动画的主要方法

  • 在上面中我们创建了一个动画实例，而该实例中主要包含有以下内置方法：
// 播放
animation.play(); 

// 停止
animation.stop(); 

// 暂停
animation.pause(); 

// 设置播放速度（speed: 1表示正常速度）
animation.setSpeed(speed); 

// 跳到某个时刻/帧并停止（value：数值；isFrame：定义第一个参数是基于时间的值还是基于帧的值（默认为 false））
animation.goToAndStop(value, isFrame); 

// 跳到某个时刻/帧并播放（value：数值；isFrame：定义第一个参数是基于时间的值还是基于帧的值（默认为 false））
animation.goToAndPlay(value, isFrame); 

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

// 播放片段（segments：数组。可以包含 2 个数值，这些数值将用作动画的第一帧和最后一帧。或者可以包含一系列数组，每个数组具有 2 个数值；forceFlag：布尔。如果设置为 false，它将等待当前段完成。如果为 true，它将立即更新值。）
animation.playSegments(segments, forceFlag); 
// 例如：
animation.playSegments([0,30], false); // 播放完之前的片段，播放0-30帧
animation.playSegments([[0,30],[10,40]], true); // 直接播放0-30帧和10-40帧

// 销毁动画，移除dom元素。
animation.destroy(); 

// 获取动画一个周期时间（inFrames：如果为 true，则以帧为单位返回持续时间，如果为 false，则以秒为单位。）
animation.getDuration(inFrames)

4. lottie-web支持的监听动画的常用的事件

  • 可以使用 addEventListener 注册该类事件
// 动画完成播放
animation.addEventListener('complete', () => {}) 

// 循环动画完成单次播放
animation.addEventListener('loopComplete', () => {}) 

// 动画片段播放开始
animation.addEventListener('segmentStart', () => {}) 

// 初始配置完成后
animation.addEventListener('config_ready', () => {}) 

// 加载动画的所有部分后
animation.addEventListener('data_ready', () => {}) 

// 当部分动画无法加载时
animation.addEventListener('data_failed', () => {}) 

// 当所有图像加载成功或出错时
animation.addEventListener('loaded_images', () => {}) 

// 当元素已添加到 DOM 时
animation.addEventListener('DOMLoaded', () => {}) 

// 动画销毁
animation.addEventListener('destroy', () => {})

四、lottie-web在Vue3中的使用

1. 安装lottie-web

npm i lottie-web

2. 进行简单封装

  • 简单封装一个组件方便后面调用
  • 封装获取dom和初始化动画实例的部分，并把实例向父组件暴露以方便调用发放

项目结构：
在这里插入图片描述

index.vue：

<template>
    <div class="lottie" ref="dom"></div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import lottie from "lottie-web";
import type { LottieEvent } from "./type";

// 设置组件参数
const props = withDefaults(defineProps<{
    renderer?: 'svg' | 'canvas' | 'html',
    loop?: boolean,
    autoplay?: boolean,
    animationData: any
}>(), {
    renderer: 'svg',
    loop: true,
    autoplay: true,
})

// 创建 lottie接收变量 和 获取dom
const animation = ref<LottieEvent>()
const dom = ref<Element>()

// 创建事件返回初始化lottie对象
const emits = defineEmits<{
    (e: 'getAnimation', value: LottieEvent): void
    (e: 'getDom', value: Element): void
}>()

// 初始化渲染 lottie动画，并返回 lottie对象
onMounted(() => {
    animation.value = lottie.loadAnimation({
        container: dom.value as Element, // 绑定dom节点
        renderer: props.renderer, // 渲染方式:svg、canvas、html
        loop: props.loop, // 是否循环播放，默认：false
        autoplay: props.autoplay, // 是否自动播放, 默认true
        animationData: props.animationData // AE动画使用bodymovie导出的json数据
    })
    emits('getAnimation', animation.value)
})


</script>
 
<style scoped>
.lottie {
    width: 100%;
    height: 100%;
}
</style>

type.ts：

type Segment = [number,number]

export interface LottieEvent {
    play: () => void,
    stop: () => void,
    setSpeed: (speed: number) => void,
    setDirection: (direction: 1 | -1) => void,
    goToAndStop: (value: number, isFrame?: boolean) => void,
    goToAndPlay: (value: number, isFrame?: boolean) => void,
    playSegments: (segments: Segment | Segment[], forceFlag?: boolean) => void,
    destroy:()=>void,
    getDuration: (inFrames:boolean)=>void

    [propname: string]: any;
}

3. 使用组件，创建动画

<template>
    <div class="new-year">
       <Lottie :animation-data="NewYear"></Lottie>
    </div>
</template>

<script setup lang="ts">
import Lottie from "@/components/lottie/index.vue";
import NewYear from "@/assets/lottie/NewYear.json";

</script>
 
<style scoped>
.new-year {
    width: 700px;
    height: 700px;
    margin: 0 auto;
}
</style>

效果：
在这里插入图片描述

五、一个小例子

  • 制作一个交互的点赞动画：
<template>
    <div class="demo">
        <Lottie class="like" :loop="false" :autoplay="false" :animation-data="Like" @get-animation="getAnimation" @click="likeClick"></Lottie>
        <div class="record">点击次数：{{ clickRecord }}</div>
    </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import Lottie from "@/components/lottie/index.vue";
import Like from "@/assets/lottie/like.json";
import type { LottieEvent } from "@/components/lottie/type";

const clickRecord = ref(0)
const like = ref<LottieEvent>()
const likeFlag = ref(false)
const getAnimation = (animation: LottieEvent) => {
    like.value = animation
}
const likeClick = ()=>{
    if(likeFlag.value) {
        like.value!.playSegments([84, 114], true)
    } else {
        like.value!.playSegments([0,68],true)
    }
    likeFlag.value = !likeFlag.value
    clickRecord.value++
}

</script>
 
<style scoped>
.like {
    width: 200px;
    height: 200px;
}

.record {
    width: 200px;
    text-align: center;
}
</style>
  • 效果：
    在这里插入图片描述
提示：文章到此结束，文章为个人学习记录，侵删。

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

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

相关文章

C++字符编码详解及利用string遍历中文字符串

C++字符编码详解及利用string遍历中文字符串

作者&#xff1a;非妃是公主 专栏&#xff1a;《笔记》《C》 个性签&#xff1a;顺境不惰&#xff0c;逆境不馁&#xff0c;以心制境&#xff0c;万事可成。——曾国藩 文章目录C遍历英文字符串C遍历中文字符串&#xff08;不会出问题情况&#xff09;C遍历中文字符串&#xff…
阅读更多...
Linux基础——进程的概念和控制（操作系统级讲解）

Linux基础——进程的概念和控制（操作系统级讲解）

前言 我们经常会听到一个概念——进程。但是进程并不是一个孤立的概念&#xff0c;需要对操作系统有比较深入的了解。所以这篇博客将在读者的脑中先对操作系统构建一个大概的印象&#xff0c;再对进程做了解。 冯诺依曼结构 冯诺依曼结构也称普林斯顿结构&#xff0c;是一种…
阅读更多...
微信小程序|智能停车系统中车牌计费功能实现

微信小程序|智能停车系统中车牌计费功能实现

&#x1f4cc;个人主页&#xff1a;个人主页 ​&#x1f9c0; 推荐专栏&#xff1a;小程序开发成神之路 --【这是一个为想要入门和进阶小程序开发专门开启的精品专栏&#xff01;从个人到商业的全套开发教程&#xff0c;实打实的干货分享&#xff0c;确定不来看看&#xff1f; …
阅读更多...
数据结构基础篇》》约瑟夫环

数据结构基础篇》》约瑟夫环

数据结构开讲啦&#xff01;&#xff01;&#xff01;&#x1f388;&#x1f388;&#x1f388; 本专栏包括&#xff1a; 抽象数据类型线性表及其应用栈和队列及其应用串及其应用数组和广义表树、图及其应用存储管理、查找和排序将从简单的抽象数据类型出发&#xff0c;深入浅出…
阅读更多...
python 基础入门

python 基础入门

文章目录前言python 基础入门一、python环境如何搭建、开发工具pycharm如何破解01 python下载02 python 安装03 python开发工具安装(pycharm )03::01 安装pycharm03::02 多次试用二、python 常规基础01 python 规范02 python中的关键字03 python缩进04 python注释哈哈哈前言 如…
阅读更多...
07-JVM 类加载机制?

07-JVM 类加载机制?

1.JVM 类加载机制分为五个部分&#xff1a;加载&#xff0c;验证&#xff0c;准备&#xff0c;解析&#xff0c;初始化。 2.一个类型从被加载到虚拟机内存中开始&#xff0c;到卸载出内存为止&#xff0c;它的整个生命周期将会经历加载&#xff08;Loading、验证&#xff08;V…
阅读更多...
分布式版本控制Git

分布式版本控制Git

从基本的环境配置与安装到Git的基本操作&#xff0c;轻松应对Git在使用时遇到的常见问题。 https://blog.csdn.net/a18307096730/article/details/124586216?spm1001.2014.3001.550202_版本控制器的方式03_svn(过时)_git04git工作流程简述05git环境配与安装06 获取本地仓库Git…
阅读更多...
P3375 【模板】KMP字符串匹配

P3375 【模板】KMP字符串匹配

题目描述 给出两个字符串 s_1s1​ 和 s_2s2​&#xff0c;若 s_1s1​ 的区间 [l, r][l,r] 子串与 s_2s2​ 完全相同&#xff0c;则称 s_2s2​ 在 s_1s1​ 中出现了&#xff0c;其出现位置为 ll。 现在请你求出 s_2s2​ 在 s_1s1​ 中所有出现的位置。 定义一个字符串 ss 的 bor…
阅读更多...
概率论【离散型二维变量与连续性二维变量（上）】--猴博士爱讲课

概率论【离散型二维变量与连续性二维变量（上）】--猴博士爱讲课

5.离散型二维变量与连续性二维变量&#xff08;上&#xff09; 1/8 已知二维离散型分布律&#xff0c;求??? 离散型直接看表 【做题方法参考如下】 2/8 已知二维离散型分布律&#xff0c;判断独立性 如果满足p(xy) p(x) * p(y)&#xff0c;那么相互独立 则我们只需要验证每…
阅读更多...
C 程序设计教程（12）—— C 语言顺序结构程序设计

C 程序设计教程（12）—— C 语言顺序结构程序设计

C 程序设计教程&#xff08;12&#xff09;—— C 语言顺序结构程序设计 该专栏主要介绍 C 语言的基本语法&#xff0c;作为《程序设计语言》课程的课件与参考资料&#xff0c;用于《程序设计语言》课程的教学&#xff0c;供入门级用户阅读。 目录C 程序设计教程&#xff08;1…
阅读更多...
深入探索Flutter性能优化

深入探索Flutter性能优化

前言 Flutter 作为目前最火爆的移动端跨平台框架&#xff0c;能够帮助开发者通过一套代码库高效地构建多平台的精美应用&#xff0c;并支持移动、Web、桌面和嵌入式平台。对于 Android 来说&#xff0c;Flutter 能够创作媲美原生的高性能应用&#xff0c;但是&#xff0c;在较…
阅读更多...
【nvivo11plus教程】02_编码与节点

【nvivo11plus教程】02_编码与节点

1、对文档进行编码(1)建立节点(2)使用快速编码栏进行编码(3)将整个文件编码为一个代码(4)范围编码(5)在vivo中编码(6)使用节点昵称加快编码速度2、取消、增加和查看编码(1)编码带(2)删除编码(3)查看编码邻近区(4)增加编码(5)查看编码信息3、组织节点(1)节点结构化(2)移动归类节…
阅读更多...
leetcode-每日一题-还原排列的最少操作步数(中等，数学逻辑)

leetcode-每日一题-还原排列的最少操作步数(中等，数学逻辑)

回家了很少看了&#xff0c;今天突然心血来潮做了今天的每日一题&#xff0c;还不错&#xff0c;最后是一次AC&#xff0c;说明这么长时间没看实力没有下降多少&#xff0c;哈哈哈哈&#xff0c;自恋一下&#xff0c;后面我会更新一些课设和实验作业&#xff0c;进入正题。给你…
阅读更多...
密码学_ECC椭圆曲线加密算法

密码学_ECC椭圆曲线加密算法

算法介绍 椭圆加密算法&#xff08;ECC&#xff09;是一种公钥加密体制&#xff0c;最初由Koblitz和Miller两人于1985年提出&#xff0c;其数学基础是利用椭圆曲线上的有理点构成Abel加法群上椭圆离散对数的计算困难性。公钥密码体制根据其所依据的难题一般分为三类&#xff1a…
阅读更多...
【jQuery】常用API——jQuery样式操作

【jQuery】常用API——jQuery样式操作

一、操作 css 方法 jQuery 可以使用 css 方法来修改简单元素样式。1. 参数只写属性名&#xff0c;则是返回属性值$(this).css(color);2. 参数是属性名&#xff0c;属性值&#xff0c;逗号分隔&#xff0c;是设置一组样式&#xff0c;属性必须加引号&#xff0c;值如果是数字可以…
阅读更多...
Go基础学习

Go基础学习

文章目录回看下历史环境安装和开发工具&#xff1a;基础语法&#xff1a;go的注释&#xff1a;变量定义&#xff1a;简短定义模式Go的变量交换匿名变量&#xff08;空白标识符&#xff09;&#xff1a;变量的作用域&#xff1a;iota常量计数器数据类型布尔类型数值型整数浮点数…
阅读更多...
新冠COVIN-19流感病患轨迹追溯

新冠COVIN-19流感病患轨迹追溯

实验背景 冬季是流感的高发季节&#xff0c;现已知某流感病毒的传播力很强&#xff0c;政府部门也陆续公开了部分流感确诊患者&#xff08;后续简称“病患”&#xff09;的非隐私信息&#xff0c;这部分数据为相关研究人员研究该流感病毒的传播与防控提供了重要的数据支撑。 然…
阅读更多...
Linux网站服务实操练习

Linux网站服务实操练习

作者简介&#xff1a;一名99年软件运维应届毕业生&#xff0c;正在自学云计算课程。宣言&#xff1a;人生就是B&#xff08;birth&#xff09;和D&#xff08;death&#xff09;之间的C&#xff08;choise&#xff09;&#xff0c;做好每一个选择。创作不易&#xff0c;动动小手…
阅读更多...
python：打包package

python：打包package

简介 把模块打包成package&#xff0c;可以进行分发和安装。 packaged的打包和安装一、package层次架构二、 package的打包和安装1. 创建setup.py2. 打包package3. 安装package一、package层次架构 其中mypackage为进行打包的文件夹&#xff0c;文件夹下包含多个脚本&#xff1…
阅读更多...
钢铁行业应用APS生产排产系统的好处

钢铁行业应用APS生产排产系统的好处

1 钢铁行业APS生产排产系统设计的主要业务流程 全局一体化计划&#xff1a;主要负责订单交期评审与应答、销产转换、主生产计划、铁水需求计划&#xff0c;该计划的最终目标是对各个分厂的日计划提出整体要求。主要对口业务部门为公司生产计划排程部门。 各个工段厂区的一体化…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023