Lottie简介 + 结合到vue3中使用

Lottie简介 + 结合到vue3中使用.文章内容主要介绍Lottie动画相关知识和如何在web端进行使用Lottie的相关网站可见如下：LottieFiles（一个Lottie动画资源网站）Lottie官方文档lottie-webLottie是一个适用于Android，iOS，Web和Windows的库，它解析使用Bodymovin导出为json的Adobe After Effects动画，并

大橘为重¨

3102人浏览 · 2023-01-09 14:09:17

大橘为重¨ · 2023-01-09 14:09:17 发布

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

前言：
一、Lottie是什么
二、为什么要选择Lottie
三、lottie-web的使用
四、lottie-web在Vue3中的使用
五、一个小例子

前言：

文章内容主要介绍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动画具有较丰富全面的控制方法和事件监听的支持

三、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>