vue-lottie加载json动画

时间：2025-04-08 15:13:38

vue-lottie加载json动画

  • 为什么用
  • 怎么用
    • 1.安装
    • 2.引用
    • 3.引入动画json
    • 4.引入lottie插件
    • 5.添加属性和方法

为什么用

针对目前页面的一些设计样式，为了达到一定的视觉效果，难免会有一些动态效果的情况，一般首先想到的是动图，gif或者apng 但是动态图的帧数越多 图片越大 加载也就会更慢。
于是就有一种将动画数据导出json的形式加载到页面中。优点诸多

1.文件非常小，通常以json加载到页面中，加载更快
2.可以前进，后退，是否循环播放动画等，最重要的是可以对动画进行编程以响应手动操作的一些交互。
3.支持好，目前支持实体，形状图层，蒙版，alpha遮罩，修剪路径和虚线图案，效果会更好
  • 1
  • 2
  • 3

怎么用

1.安装

npm install --save vue-lottie
  • 1

2.引用

import lottie from 'vue-lottie';
('lottie', lottie)
  • 1
  • 2

3.引入动画json

const animationData = require('@/assets/animate/')
  • 1

4.引入lottie插件

<lottie :options="defaultOptions" :height="200" :width="200" v-on:animCreated="handleAnimation" />
  • 1

5.添加属性和方法

//里面加上defaultOptions的属性，参数是animationData 就是动画资源json
data(){
    return {
        defaultOptions: { animationData: animationData,loop:true,},
        animObj: {} //动画对象，可进行前进后退等操作
    }
}
//中添加创建好之后的回调handleAnimation方法
methods: {
    handleAnimation: function(animate) {
        = animate;
        (animate); //这里可以看到 lottie 对象的全部属性
    },
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

以上操作即可在页面加载出动画效果
有两个小坑，亲踩过的，此处顺提一下

1.引入json的时候 用的是require 而不是import , import引入的话json动画无法显示出来。
	具体原因可以去查下import和require的区别
2,json对象里面的图片地址是针对服务器项目目录的，
	默认是images目录，可修改，图片目录需要放置在项目根目录下
  • 1
  • 2
  • 3
  • 4

vue-lottie具体说明可查git地址 /chenqingspring/vue-lottie

相关文章