vue-lottie动画效果
之前用lottie模仿过san官网的动画效果(没有打广告QAQ)
仓库地址
模仿demo
blog
掘金
用lottie的好处有很多(…….此处省略n字) 简单来说就是简单高效的还原设计的动画效果
然后在个人项目使用vue-lottie 分享一些小小经验吧
废话不多说~~~ (正经分割线)
分析官方demo
先来一个简单的尝尝鲜
vue-lottie仓库
vue-lottie demo
打开仓库可以看见很多很棒的效果(nice
Installation
1
| npm install --save vue-lottie
|
Usage
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52
| <template> <div id="app"> <lottie :options="defaultOptions" :height="400" :width="400" v-on:animCreated="handleAnimation"/> <div> <p>Speed: x{{animationSpeed}}</p> <input type="range" value="1" min="0" max="3" step="0.5" v-on:change="onSpeedChange" v-model="animationSpeed"> </div> <button v-on:click="stop">stop</button> <button v-on:click="pause">pause</button> <button v-on:click="play">play</button> </div> </template>
<script> import Lottie from './lottie.vue'; import * as animationData from './assets/pinjump.json';
export default { name: 'app', components: { 'lottie': Lottie }, data() { return { defaultOptions: {animationData: animationData}, animationSpeed: 1 } }, methods: { handleAnimation: function (anim) { this.anim = anim; },
stop: function () { this.anim.stop(); },
play: function () { this.anim.play(); },
pause: function () { this.anim.pause(); },
onSpeedChange: function () { this.anim.setSpeed(this.animationSpeed); } } } </script>
|
这是之前官方给的demo代码 基本上和平时使用没啥不一样(所以只需要复制粘贴就ok了)
1 2
| import * as animationData from './assets/pinjump.json';
|
引入的json需要改!!!
1 2
| import Lottie from './lottie.vue';
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40
| <template> <div :style="style" ref="lavContainer"></div> </template>
<script> import lottie from 'lottie-web' export default { props: { options: { type: Object, required: true }, height: Number, width: Number }, data() { return { style: { width: this.width ? `${this.width}px` : '100%', height: this.height ? `${this.height}px` : '100%', overflow: 'hidden', margin: '0 auto' } } }, mounted() { this.anim = lottie.loadAnimation({ container: this.$refs.lavContainer, renderer: 'svg', loop: this.options.loop !== false, autoplay: this.options.autoplay !== false, animationData: this.options.animationData, rendererSettings: this.options.rendererSettings } ) this.$emit('animCreated', this.anim) } } </script>
|
然后会发现还是有错误(缺少组件!) 其实很简单啦,打开仓库进入src然后打开lottle组件然后复制过去就ok啦hhh(简单)
这是效果图(是不是很简单233
使用别的json文件
官方给给了一个很好的效果网站 地址
下载json文件 然后更换引入的json
1 2 3
| import * as animationData from './assets/blood_transfusion_kawaii.json.json';
|
是不是也很简单!!!
使用vue-lottie模仿san官网的动画效果
先来效果图~~~
因为有多个需要用到lottie动画,想了半天不知道怎么解决调用方法的问题 最后想了一个简单的方法
直接将每一个动画抽到一个组件 组件内依然用之前的方法(稍微改造一下就行
然后利用父子组件传数据的形式传递json文件 子组件props接收
1 2 3 4 5 6 7 8 9 10 11 12
| <template> <div class="card-panel" @mouseenter="lottiePlay" @mouseleave="lottieStop"> <div class="card-panel-icon-wrapper icon-shoppingCard"> <lottie :options="defaultOptions" :height="80" :width="80" v-on:animCreated="handleAnimation" /> </div> <div class="card-panel-description"> <div class="card-panel-text">今日活跃</div> <div class="card-panel-num">2600</div> </div> </div> </template>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
| props: { animationDataPath: { type: Object, default: null } }, data() { return { defaultOptions: { // animationData: animationDataPath, animationData: this.animationDataPath, autoplay: false, loop: false } } }
|
1 2 3 4 5 6 7 8 9
| @mouseenter="lottiePlay" @mouseleave="lottieStop"
lottiePlay: function() { this.anim.play() }, lottieStop: function() { this.anim.stop() }
|
然后就到了父组件传数据
1 2 3 4
| <panel-lottie :animationDataPath="animationDataPathOne"></panel-lottie>
animationDataPathOne: require('../../../public/json/compass.json')
|
自己用到了require引入json 然后打包出来 一样可以正常运行 如果大家有很好的方法可以教我!我好学习学习
emmmmm 大概就是这么多吧~
如果实在需要这个的源码可以打开我的github仓库 由于项目还是一个半成品 所以地址就放在最后面了
vue-lottie源码
项目地址
如果大家觉得不错的话 可以点star哦(厚脸皮233