vue-lottie实现前端动画

最新推荐文章于 2024-10-12 08:20:19 发布

想吃变态辣条

最新推荐文章于 2024-10-12 08:20:19 发布

阅读量988

点赞数

分类专栏： vue 文章标签： vue 前端动画

本文链接：https://blog.csdn.net/Vanilla1119/article/details/124272792

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Lottie简介

官方文档：https://lottiefiles.com/
Lottie是一个库，可以解析使用AE制作的动画（需要用bodymovin导出为json格式），支持web、ios、android和react native。在web侧，lottie-web库可以解析导出的动画json文件，并将其以svg或者canvas的方式将动画绘制到我们页面中。
交互性非常好，动画支持倍速播放，倒放，暂停等功能，能熟练使用的话，交互性能提升很多。
其优点：

动画由设计使用专业的动画制作工具Adobe After Effects来实现，使动画实现更加方便，动画效果也更好；
前端可以方便的调用动画，并对动画进行控制，减少前端动画工作量；
设计制作动画，前端展现动画，专业人做专业事，分工合理；
卖家秀即买家秀，还原程度百分之百；
使用lottie方案，json文件大小会比gif文件小很多，性能也会更好

不足：

lottie-web文件本身仍然比较大，lottie.js大小为513k，轻量版压缩后也有144k，经过gzip后，大小为39k。所以，需要注意lottie-web的加载。目前H5项目有离线包，PC项目也会上PWA，会对其进行缓存，保证加载速度。
lottie动画其实可以理解为svg动画/canvas动画，不能给已存在的html添加动画效果；
动画json文件的导出，目前是将AE里面的参数一一导出成json内容，如果设计师建了很多的图层，可能仍然有json文件比较大（20kb）的问题。需要设计师遵循一定的规范。
有很少量的AE动画效果，lottie无法实现，有些是因为性能问题，有些是没有做。比如：描边动画等

vue-lottie

官方github:https://github.com/chenqingspring/vue-lottie
示例demo:https://chenqingspring.github.io/vue-lottie
vue-lottie是将lottie封装后支持vue框架，简单易行。下面介绍使用步骤

使用前的准备

准备好动画 json 文件。可以让 UI 处理好:

UI 使用 AE–安装 bodymovin 插件 - 将 AE 中的动画工程文件通过 bodymovin 转换为.json 文件–发给开发 - 开发集成 Lottie 框架 - 直接在项目中使用。
或者是在官方库里找:链接。

安装

npm install --save vue-lottie

组件引入

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

文件中使用

下面是基本使用

<template>
    <div ref="animArea">
        <Lottie :options="defaultOptions" v-on:animCreated="handleAnimation" />
    </div>
</template>
<script>

import * as animeData from '../assets/anime.json'//引入动画资源文件
export default {
  name: 'animate',
  data () {
    return {
        // ... some code
        defaultOptions: { container: this.$refs.animArean, animationData: animationData.default, loop: false, autoplay: false },
      	anim: {},
    }
  },
  methods: {
    //
    handleAnimation: function (anim) {
      console.log('动画', anim) // 这里可以看到 lottie 对象的全部属性
      this.anim = anim
    },
    // 动画开始
    animPlay () {
      console.log('animPlay')
      this.anim.play()
    },
    // 动画结束
    animStop () {
      console.log('animStop')
      this.anim.stop()
    },
    // 动画暂停
    animPause () {
      console.log('animPause')
      this.anim.pause()
    },
  }
}
</script>