在vue里使用Lottie动画(实现 json 格式的动画)

一、Lottie简介与作用

Lottie是一个库,可以解析使用AE制作的动画(需要用bodymovin导出为json格式),支持web、ios、android和react native。在前端使用,lottie-web库可以解析导出的动画json文件,并将其以svg、canvas或者html的方式将动画绘制到页面中。

特点:
Lottie实现原理是由设计师出动画,导出为json,给前端展示。动画由设计使用制作工具Adobe After Effects来实现,然后前端不仅可以节约开发成本,而且可以高度还原设计的动画,且json文件大小比gif文件小很多,性能相对而言也更好

二、相关文档链接

Lottie官方文档:https://lottiefiles.com
vue-lottie 相关Github地址:https://github.com/chenqingspring/vue-lottie

三、在vue中使用

1、下载vue-lottie

npm install --save vue-lottie

2、引入使用

(1)全局引入

import lottie from 'vue-lottie'
Vue.component('lottie',lottie)

(2)在需要的组件内引入

import lottie from 'vue-lottie'
 
export default{
...
components:{
 lottie
}
...
}

(3)在需要的组件内引入需要实现动画的json文件

import * as animationData from '../../assets/data_loop.json';

3、在需要的组件内使用Lottie

<template>
<lottie :options="defaultOptions" :height="400" :width="400" @animCreated="handleAnimation" />
</template>
<script>
import * as animationData from '../../assets/data_loop.json';
export default {
  data() {
    return {
      defaultOptions: { animationData: animationData }
    }
  },
  methods: {
    handleAnimation: function (anim) {
      this.anim = anim;
    },
  },
}
</script>

说明:lottie初始化时,需要指定一个options配置项,设置宽高,animCreated方法用于创建lottie动画,它的方法返回一个anim对象,里面包含这个动画的所有属性。我们可以根据它返回的这个对象,来对lottie动画做一系列的控制。

lottie的参数options说明:

  animationData: animationData,   //需要引入的json动画对象
  renderer: 'svg',    //渲染方式,svg、canvas、html(轻量版仅svg渲染)
  loop: true,    //是否循环播放,true表示循环,false表示不循环
  autoplay: true,   //是否自动播放,true表示自动播放

常用方法

Anim.play(); // 播放该动画,从目前停止的帧开始播放
Anim.stop(); // 停止播放该动画,回到第0帧
Anim.pause(); // 暂停该动画,在当前帧停止并保持
 
Anim.goToAndStop(value, isFrame); // 跳到某个时刻/帧并停止。isFrame(默认false)指示value表示帧还是时间(毫秒)
Anim.goToAndPlay(value, isFrame); // 跳到某个时刻/帧并从该帧往后进行播放
Anim.goToAndStop(30, true); // 跳转到第30帧并停止
Anim.goToAndPlay(300); // 跳转到第300毫秒并从300毫秒开始向后播放
 
Anim.playSegments(arr, forceFlag); // 播放片段,arr可以包含两个数字或者两个数字组成的数组,forceFlag表示是否立即强制播放该片段,如果是false则需等前一个动画结束后开始播放,如果是true,则立即开始播放
Anim.playSegments([10,20], false); // 播放完之前的片段,播放10-20帧
Anim.playSegments([[0,5],[10,18]], true); // 直接播放0-5帧和10-18帧
 
Anim.setSpeed(speed); // 设置播放速度,speed为1表示正常速度
Anim.setDirection(direction); // 设置播放方向,1表示正向播放,-1表示反向播放
Anim.destroy(); // 删除该动画,移除相应的元素标签等。在unmount的时候,需要调用该方法

lottie常用监听方法,我们可以在mounted时为动画添加监听器

Anim.addEventListener('data_ready', () => {
  console.log('animation data has loaded');
})

// 其他监听事件:
// complete: 播放完成后触发(循环播放下不会触发)
// loopComplete: 当前循环下播放(循环播放/非循环播放)结束时触发
// enterFrame: 每进入一帧就会触发,播放时每一帧都会触发一次,stop方法也会触发
// segmentStart: 播放指定片段开始时触发,playSegments、resetSegments等方法刚开始播放指定片段时会发出,如果playSegments播放多个片段,多个片段最开始都会触发。
// data_ready: 动画json文件加载完毕触发
// DOMLoaded: 动画相关的dom已经被添加到html后触发
// destroy: 将在动画删除时触发

  • 11
    点赞
  • 35
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue项目中使用requestAnimationFrame实现动画效果的步骤如下: 1. 在Vue组件中,创建一个方法来处理动画效果。例如,我们可以创建一个名为`animate`的方法。 2. 在`animate`方法中,使用`requestAnimationFrame`函数来循环执行动画效果。在每一帧中,你可以更新组件中的数据或者操作DOM元素来实现动画效果。 3. 在`animate`方法中,使用`this.$refs`来获取需要操作的DOM元素。例如,如果你想旋转一个3D模型,你可以使用`this.$refs`来获取模型的引用。 4. 在`animate`方法中,使用`this.$nextTick`来确保DOM元素已经更新完毕。这样可以避免在更新DOM元素之前执行动画效果。 5. 在`animate`方法中,使用`this.$refs`来更新DOM元素的样式或属性。例如,你可以使用`this.$refs.element.style.transform`来旋转一个元素。 6. 在`animate`方法中,使用`requestAnimationFrame`函数来递归调用`animate`方法,以实现动画的连续播放。 下面是一个示例代码,演示了如何在Vue项目中使用requestAnimationFrame实现动画效果: ```javascript <template> <div ref="element" class="box"></div> </template> <script> export default { mounted() { this.animate(); }, methods: { animate() { // 更新动画效果 // this.$refs.element.style.transform = 'rotate(45deg)'; // 更新数据 // this.data = 'new data'; // 执行其他操作 // 确保DOM元素已经更新完毕 this.$nextTick(() => { // 更新DOM元素的样式或属性 // this.$refs.element.style.transform = 'rotate(90deg)'; // 执行其他操作 // 递归调用animate方法,实现动画的连续播放 requestAnimationFrame(this.animate); }); } } } </script> <style> .box { width: 100px; height: 100px; background-color: red; } </style> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值