前端使用lottie-web，使用AE导出的JSON动画贴心教程_ae导出lottie_球球不吃虾的博客

link之家
链接快照平台
输入网页链接，自动生成快照
标签化管理网页链接
Lottie简介

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

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

安装lottie-web
npm install lottie-web
 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数据
json简单解释 
    "v": "5.1.13",       // bodymovin 版本
    "fr": 30,            // 帧率
    "ip": 0,             // 起始关键帧
    "op": 20,            // 结束关键帧
    "w": 150,            // 视图宽
    "h": 130,            // 视图高
    "nm": "鹅头收起动画",  // 名称
    "ddd": 0,             // 3d
    "assets": [],        // 资源集合 
    "layers": [],        // 图层集合
    "masker": []         // 蒙层集合
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 
使用vite跑vue 
npm init @vitejs/app <project-name>
安装lottie-web 
npm install lottie-web
封装一个基础的组件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: \dotsta</span>, }̲) <span cla\dots$ emit(‘animCreated’, this.anim)
 }, 
unmounted () {
 this.anim && this.anim.destroy()
 }
 }
 </script> 
基于上面的组件，我们封装一个更具象一点的组件clickIcon,这个组件也是通用组件，增加了点击后，动画交互需要怎么走向等逻辑. 
<template>
  <div class="clickIcon">
      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文件那个窗口下面的进度去看到的. 
使用喜欢组件 
<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, 然后在写组件的时候，添加一个插槽作为一个默认组件. 
大家可以给个点赞鼓励一下萌新嘛? 哈哈哈, 先谢过了~
                    官方介绍：Lottie是一个库，可以解析使用AE制作的动画（需要用bodymovie导出为json格式）,支持web、ios、android、flutter和react native。在web端，lottie-web库可以解析导出的动画json文件，并将其以svg或者canvas的方式将动画绘制在我们的页面上.以上就是利用Lottie在vue中实现一个喜欢组件了。
				乐透播放器Web组件
这是一个Web组件，用于在网站中轻松嵌入和播放Lottie动画和基于Lottie的Telegram Sticker（tgs）动画。
在HTML中，从CDN或本地安装中导入：
乐透播放器：
 从CDN导入。
 < script src =" https://unpkg.com/@lottiefiles/lottie-player@0.4.0/dist/lottie-player.js " > </ script >
 从本地node_modules目录导入。
 < script src =" /node_modules/@lottiefiles/lottie-player/dist/lottie-player.js " > </ script >
电报贴纸（TGS）播放器：
 从CDN导入。
 < script src =" https://un




    

有些动画效果 要很逼真的效果,不管是原生的css 还是 gif动图 可能效果都不是太理想吧
选来选去  最后选择使用了。lottie-web 这个插件
他这个是根据一个json文件渲染动画
如果json中有引用的图片的话,你用ae做出来的图片最好放到静态服务器上,然后更换json中的本地图片路径换成删除原来u的那个字段
使用方法
npm i lottie-web --save 
yarn add lottie-web --save
import lottie 
二、在main.js中引入vue-lottie
import lottie from 'vue-lottie'
Vue.component('lottie',lottie)
三、在组件中注册使用
1、引入json
import * as animationData from '@/assets/lottie/data.json'
2、使用组件
<lottie :options="defaultOptions" v
				在之前的项目需求中，有几个页面需要用到许多动效，开始想自己写，但是后面看动画的实际效果有点麻烦，同时4个页面就有16个不一样的动效，如果自己画的话，周期长，性能和用户体验上可能都不太好，也可能达不到ui的需求，首选考虑是使用gif图的，但是由于设计上的效果特殊，ui说一些特效用gif图也弄不出来，然后继续找方案，就找到lottie-web，最后在协同合作下，完成动效，按期交付。
yarn add lottie-web
在需要设置动画的页面引入
import Vue from "vue";
impor
提供了很多回调、监听方法。eg:每帧回调、每次循环回调、循环开始的回调。
提供了一个时间轴概念，赋予其属性继承和控制动画执行顺序的能力。
https://www.animejs.cn/documentation/#cssSelector
lottie - web
以往实现动画方式有三种（不谈游戏）：keyframe、transform、gif。痛点是我们很难实现复杂动画，而js 
				适用于Android，  ，  ， 和Lottie
 Lottie是适用于Android和iOS的移动库，它可以使用解析以json导出的动画，并在移动设备上进行本地渲染！
 第一次，设计人员可以创建和发布精美的动画，而无需工程师费心地手工制作。 他们说一张图片值1,000字，所以这里有13,000字：
乐天在晚上和周末得到维护和改善。 如果您在应用程序中使用Lottie，请考虑赞助它，以确保我们可以继续改进我们喜欢的项目。 点击上方的赞助商按钮以了解更多信息
牵头赞助商
在查看文档，常见问题解答，帮助，示例等
Gradle是唯一受支持的构建配置，因此只需将依赖项添加到项目的build.gradle文件中： 
dependencies {
  implementation ' com.airbnb.android:lottie:$lottieVersion '
 最新的Lottie版本是： 
 最新的稳定版本是： 单击以获取有关Lottie-Compose的更多信息。
 Lottie 2.8.0及更高版本仅支持已迁移到。 有关更多信息，请阅读Google的。
 请注意，此自述文件将动画显示为GIF，因为我无法在自述文件中加载Lottie脚本。
等一下，只是第一帧？
 是的，只是第一帧。 这在将Lottie动画脚本完全加载之前以SVG形式显示动画预览很有用。
 如果您因为要将完整的抽奖动画转换为SVG动画而找到了这个项目，对不起，我无法为您提供帮助。 我什至会争辩说您不应该这样做。 关于CSS动画（动画SVG将使用）是否比JS动画更好/更快/更强，存在争议。 。 继续使用彩票。 要开心。
 如果您仍然不确定，那么还有其他项目可以将完整的抽奖动画转换为其他文件类型：
npm install lottie-to-svg
 const fs = require ( "fs" ) ;
addValueCallback：向动画属性添加回调
recalculateSize：如果元素被调整大小，则调用此方法
toContainerPoint：将点从动画坐标转换为全局坐标
fromContainerPoint：将点从全局坐标转换为动画坐标
toKeypathLayerPoint：将点从全局动画坐标转换为属性动画坐标
fromKeypathLayerPoint：将点从属性动画坐标转换为全局动画坐标
getCurren
				### 回答1：
Android Lottie是一个用于Android、iOS和Web的开源库，它可以加载和渲染Adobe After Effects动画导出的JSON文件。使用Lottie，开发者可以轻松地将复杂的动画效果集成到自己的应用程序中，而无需编写复杂的动画代码。要加载JSON动画，只需将JSON文件放置在assets文件夹中，并使用LottieAnimationView加载即可。Lottie还提供了许多自定义属性，可以让开发者更好地控制动画的行为和外观。   
### 回答2：
Android Lottie是由Airbnb开源的一个动画库，可用于加载和渲染Adobe After Effects创建的Lottie动画文件，这些动画文件存储为JSON格式。与传统的GIF、WebP和MP4格式相比，Lottie动画文件更小，可缩放并且无损失，是完美的UI动画解决方案。
下面是一个简单的步骤，让您轻松加载JSON动画文件：
1. 在您的Android项目中添加依赖项：添加以下dependency到您的build.gradle文件中。
dependencies {
  implementation 'com.airbnb.android:lottie:3.4.1'
2.将Lottie动画文件放在assets文件夹中：将动画JSON文件放在您的Android项目的assets文件夹下。
3. 在布局文件中添加LottieView：在布局文件中添加LottieView并设置宽度和高度。您可以使用app:lottie_file指定动画的文件名。例如以下代码：
<com.airbnb.lottie.LottieAnimationView
      android:id="@+id/animation_view"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      app:lottie_file="your_animation.json"
4. 在Activity中加载动画：在您的Activity的onCreate方法中加载动画文件，并开始播放动画。
 LottieAnimationView animationView = (LottieAnimationView) findViewById(R.id.animation_view);
        animationView.setAnimation("your_animation.json");
        animationView.loop(true);
        animationView.playAnimation();
通过上述步骤，您就能够成功地加载JSON动画文件，并将其渲染在您的Android app中。Lottie提供了许多自定义属性，以及可在运行时访问的API，可以让您在呈现动画时，获得更多的自由度和控制权限。   
### 回答3：
Android Lottie是一个用于渲染矢量动画的库，由Airbnb开源。该库可以加载由Adobe After Effects导出的json文件，并将其渲染为原生Android视图中的动画效果。Lottie使用了高效而轻量级的渲染引擎来实现这一点，从而为开发人员提供了一种快速而简便的方式来实现优秀的矢量动画效果。
为了加载json动画，首先我们需要在项目中引入Lottie库，这可以通过在build.gradle文件中添加以下依赖项来完成：
implementation 'com.airbnb.android:lottie:3.6.1'
完成之后，我们可以在布局文件中添加一个LottieAnimationView视图，并在java代码中使用以下代码加载json动画：
LottieAnimationView animationView = (LottieAnimationView) findViewById(R.id.animationView);
animationView.setAnimation("your_animation.json");
animationView.playAnimation();
在这里，我们将LottieAnimationView的文件名设置为“your_animation.json”，但是您应该将其替换为实际的json文件名。
此外，Lottie也提供了其他一些方法和属性，可用于与动画交互和控制。例如，您可以使用以下方法暂停和恢复动画：
animationView.pauseAnimation();
animationView.resumeAnimation();
还可以使用以下方法将动画设置为循环播放：
animationView.setRepeatMode(LottieDrawable.RESTART);
animationView.setRepeatCount(LottieDrawable.INFINITE);
总的来说，Lottie是一种简单而有力的工具，可以帮助我们在Android应用程序中实现高质量的矢量动画效果。通过加载json文件并使用LottieAnimationView视图，我们可以轻松地将动画集成到我们的应用程序中。同时，Lottie还提供了一系列方法和属性，使我们可以对动画进行精细的控制和交互，以生成更加生动和有趣的用户体验。