在vue添加lottie动画

在vue中引入lottie非常非常简单

1.安装vue-lottie包

npm install --save vue-lottie

2.全局引入vue-lottie

在main.js引入并注册全局组件即可

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

当然也可以局部引入

3.引入你的lottie资源

// 第一步：script中引入资源，将ui发的json放到项目文件夹（也可以在lottie资源网站可以下载相应的资源）
import animationData from "../../../assets/lottie/data.json";

// 第二步：使用组件
<lottie :options="defaultOptions" :height="200" :width="200" v-on:animCreated="handleAnimation" />

// 第三步：data里面添加相应属性
data(){return {defaultOptions: { animationData: animationData },animationSpeed: 1,anim: {}}
}

//第四步：定义方法
methods: {handleAnimation: function(anim) {this.anim = anim;console.log(anim); //这里可以看到 lottie 对象的全部属性},
}

在vue添加lottie动画相关推荐

如何在 Joomla 网站上配置交互式 Lottie 动画
Lottie 基本上是一种用于矢量图形动画的文件格式,它在吸引访问者注意力方面比您网站的静态资产非常有效.它以德国剪影动画先驱 Charlotte Lotte Reiniger 的名字命名. Lott ...
在VUE中使用Lottie动画
Lottie简介官方介绍:Lottie is a mobile library for Web, and iOS that parses Adobe After Effects animations ...
在vue里使用Lottie动画（实现 json 格式的动画）
一.Lottie简介与作用 Lottie是一个库,可以解析使用AE制作的动画(需要用bodymovin导出为json格式),支持web.ios.android和react native.在前端使用,l ...
在vue项目中使用Lottie动画(随看随用)
前言: Lottie是一个IOS,Android和React Native库,可以实时渲染动画,动画被转化成JSON文件,节省了很多资源,允许应用程序像使用静态图像一样轻松使用动画.网上也有丰富的动画 ...
lottie 动画_使用After Effects和Lottie制作网络动画而不会损失质量
lottie 动画 A quick getting started guide 快速入门指南 I recently took on a project where the team wanted to ...
lottie 动画播放
lottie 动画播放注意: lottie官网: http://airbnb.io/lottie/#/README lottiefiles文件:https://lottiefiles.com/fea ...
Vue 中 CSS 动画原理
下面这段代码,是点击按钮实现hello world显示与隐藏 <div id="root"><div v-if="show">hello ...
android jason动画,Android 动画之Lottie动画使用
Android 动画之Lottie动画使用一:简介 Lottie是Airbnb开源的一套跨平台的完整解决方案,设计师只需要使用After Effects(简称AE)设计动画之后,使用Lottic提供 ...
vue中过渡动画（类名实现方式）
vue中过渡动画分为两类,一类是进场动画,一类是出场动画要实现上面的进场动画,主要有三种方式:类名,css动画库,js函数类名本质就是动态添加类名实现动画在进入/离开的过渡中,会有 6 个 c ...

在vue添加lottie动画

在vue添加lottie动画相关推荐

最新文章

热门文章