vue3中lottie动画的实现

2022-10-11  本文已影响0人  苏苏哇哈哈

背景
👏最近在工作过程中遇到一些用css3不好实现的动画，gif又满足不了需求，那么就试试lottie动画吧（需要你们的ui小伙伴提供动画的json文件哦~）
🥇文末分享源代码。记得点赞+关注+收藏！

1.实现效果

GIF.gif

2.实现原理

2.1 lottie

lottie：
Lottie适用于Android、iOS、Web、React Native和Windows，通过Bodymovin解析Adobe After Effects动画导出的json，并在移动端和Web上原生渲染它们!
前端直接引用lottie-web库即可，默认的渲染方式是svg，前端无需关心动画的过程。

官方文档：http://airbnb.io/lottie/#/
源码地址：https://github.com/airbnb/lottie
lottie-web地址：https://github.com/airbnb/lottie-web
npm地址：npm地址：https://www.npmjs.com/package/lottie-web

2.2 使用

静态CDN引入：https://cdnjs.com/libraries/lottie-web
本地引入：https://github.com/airbnb/lottie-web/tree/master/build/player

image.png

NPM安装：

npm install lottie-web

2.3 参数详解

调用lottie.loadAnimation()来启动动画。它接受一个对象作为唯一参数：

参数 含义
container 用于渲染动画的HTML元素，需确保在调用loadAnimation时该元素已存在
renderer 渲染器，可选值为'svg'（默认值）/'canvas'/'html'。svg支持的功能最多，但html的性能更好且支持3d图层。各选项值支持的功能列表在此
loop 默认值为true。可传递需要循环的特定次数 true / false / number
autoplay true/false 是否自动播放 ，一旦准备好，它就会开始播放
path 动画对象的相对路径。与animationData 互斥，传入网络路径，如https://labs.nearpod.com/bodymovin/demo/markus/halloween/markus.json
animationData 带有导出动画数据的JSON数据，与path互斥，优先级更高，animationData为本地路径的json，需要import * as ** from "xx.json"
name 传递该参数后，可在之后通过lottie命令引用该动画实例
rendererSettings 可传递给renderer实例的特定设置，具体可看
assetsPath Json文件里资源的绝对路径

eg：

lottie.loadAnimation({
  container: element, // the dom element that will contain the animation
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'data.json' // the path to the animation json
});

动画实例有以下主要方法:

Lottie提供了用于监听动画执行情况的事件：

可使用addEventListener监听事件

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

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

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

2.4 优缺点分析

lottie优点
Lottie方法方案是由设计师出动画，导出为json，给前端播放。所以，使用Lottie方案的好处在于：

lottie不足
使用Lottie方案有以下不足之处：

2.5 其他

在线预览JSON动画网站：https://app.lottiefiles.com/preview

image.png

codepen在线链接：https://codepen.io/airnan

image.png

3.实现步骤

3.1 JSON文件的获取

注意：文中实现动画的json文件来自阿里巴巴矢量图标库

 path: props.path,//网络路径
 animationData: props.src,//本地路径，当二者同时实现优先级更高

3.2使用lottie-web封装一个动画组件

<template>
  <div ref="lottieBox"></div>
</template>


<script setup>
import lottie from "lottie-web";
import { onMounted, ref } from "vue";
const props = defineProps({
  src: {
    type: Object,
    default: ()=>{},
  },
  path: {
    type: String,
    default: "",
  },
  loop: {
    type: Boolean,
    default: true,
  },
  autoplay: {
    type: Boolean,
    default: true,
  },
});
const lottieBox = ref(null);
onMounted(() => {
  if (lottieBox.value) {
    const animation = lottie.loadAnimation({
      container: lottieBox.value,
      renderer: "svg", // 渲染方式:svg：支持交互、不会失帧、canvas、html：支持3D，支持交互
      loop: props.loop, // 循环播放，默认：true
      autoplay: props.autoplay, // 自动播放 ，默认true
      path: props.path,//网络路径
      animationData: Object.keys(props.src).length == 0 ? "" : props.src,//本地路径，优先级更高
    });
  }
});
</script>

3.3 实现一个lottie动画

import dataJson1 from "@/assets/json/data6.json";
import LottieAni from "@/components/lottie.vue";

<div class="ani-box">
    <LottieAni :src="dataJson1" />
</div>
<div class="ani-box">
    <LottieAni
       path="https://labs.nearpod.com/bodymovin/demo/markus/halloween/markus.json"
     />
</div>

.ani-box {
  width: 200px;
  height: 300px;
  border: 1px solid #ccc;
  border-radius: 20px;
  box-shadow: 0px 2px 2px 1px #abb3cf;
  transition: all 0.5s;
  margin-right: 30px;
  margin-bottom: 30px;
  display: flex;
  align-items: center;
  &:hover {
    transform: scale(1.1);
  }
}

4.写在最后:cherries:

看完本文如果觉得有用，记得点赞+关注+收藏鸭 :pizza:
更多内容相关，关注 苏苏的bug，苏苏的github，苏苏的码云~

参考链接：

1.Lottie-前端实现AE动效
2.Lottie—简介
3.在线预览JSON动画网站
4.codepen在线链接

上一篇 下一篇

猜你喜欢

热点阅读