vue 翻牌子动画_vue-lottie动画效果

本文介绍了如何在Vue项目中使用vue-lottie实现翻牌子动画和各种lottie动画效果。通过分析官方demo,展示从安装、导入到自定义组件的详细步骤,并提供了一种处理多个lottie动画的方法,利用父子组件通信完成动画控制。
摘要由CSDN通过智能技术生成

vue-lottie动画效果

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

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

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

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

分析官方demo

先来一个简单的尝尝鲜

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

Installation

npm install --save vue-lottie

Usage

Speed: x{{animationSpeed}}

v-on:change="onSpeedChange" v-model="animationSpeed">

stop

pause

play

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);

}

}

}

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

# json 动画效果AE转json后的文件

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

引入的json需要改!!!

# 这里引入了 lottie组件

import Lottie from './lottie.vue';

# lottie.vue

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)

}

}

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

效果图

这是效果图(是不是很简单233

使用别的json文件

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

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

# json 动画效果AE转json后的文件

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

效果图

是不是也很简单!!!

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

先来效果图~~~

效果图

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

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

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

# html

今日活跃
2600

# 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仓库 由于项目还是一个半成品 所以地址就放在最后面了

如果大家觉得不错的话 可以点star哦(厚脸皮233

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值