vue-lottie动画效果

vue-lottie动画效果

之前用lottie模仿过san官网的动画效果(没有打广告QAQ)

仓库地址

模仿demo

blog

掘金

vue项目 用到了vue-lottie动画效果

用lottie的好处有很多(.......此处省略ｎ字) 简单来说就是简单高效的还原设计的动画效果

然后在个人项目使用vue-lottie 分享一些小小经验吧

废话不多说～～～ (正经分割线)

---

分析官方demo

先来一个简单的尝尝鲜

vue-lottie仓库

vue-lottie demo

打开仓库可以看见很多很棒的效果（nice

Installation

npm install --save vue-lottie

Usage

这是之前官方给的demo代码 基本上和平时使用没啥不一样(所以只需要复制粘贴就ok了)

# json 动画效果AE转json后的文件
import * as animationData from './assets/pinjump.json';

引入的json需要改！！！

# 这里引入了 lottie组件
import Lottie from './lottie.vue';

# lottie.vue

然后会发现还是有错误(缺少组件！) 其实很简单啦，打开仓库进入src然后打开lottle组件然后复制过去就ok啦hhh(简单)

这是效果图（是不是很简单２３３

使用别的json文件

官方给给了一个很好的效果网站 地址

下载json文件 然后更换引入的json

# json 动画效果AE转json后的文件
import * as animationData from './assets/blood_transfusion_kawaii.json.json';

是不是也很简单！！！

使用vue-lottie模仿san官网的动画效果

先来效果图～～～

因为有多个需要用到lottie动画，想了半天不知道怎么解决调用方法的问题 最后想了一个简单的方法

直接将每一个动画抽到一个组件 组件内依然用之前的方法（稍微改造一下就行

然后利用父子组件传数据的形式传递json文件 子组件props接收

# html

# props
props: {
    animationDataPath: {
      type: Object,
      default: null
    }
  },
  data() {
  return {
    defaultOptions: {
      // animationData: animationDataPath,
      animationData: this.animationDataPath,
      autoplay: false,  # 不自动播放
      loop: false     # 不循环
    }
  }
}

# 事件调用
@mouseenter="lottiePlay" @mouseleave="lottieStop"

lottiePlay: function() {
  this.anim.play()
},
lottieStop: function() {
  this.anim.stop()
}

然后就到了父组件传数据

# 父组件


animationDataPathOne: require('../../../public/json/compass.json')

自己用到了require引入json 然后打包出来 一样可以正常运行 如果大家有很好的方法可以教我！我好学习学习

---

emmmmm 大概就是这么多吧～

如果实在需要这个的源码可以打开我的github仓库 由于项目还是一个半成品 所以地址就放在最后面了

vue-lottie源码

项目地址

自己用到了require引入json 然后打包出来 一样可以正常运行 如果大家有很好的方法可以教我！我好学习学习

---

emmmmm 大概就是这么多吧～

如果实在需要这个的源码可以打开我的github仓库 由于项目还是一个半成品 所以地址就放在最后面了

vue-lottie源码

项目地址

原文发布时间为：2018年06月07日

原文作者：_小田

本文来源： 掘金 如需转载请联系原作者