在vue项目中使用Lottie动画(随看随用)

前言：

Lottie是一个IOS，Android和React Native库，可以实时渲染动画，动画被转化成JSON文件，节省了很多资源，允许应用程序像使用静态图像一样轻松使用动画。网上也有丰富的动画资源，点此进入LottieFiles，里面可以直接下载JSON格式的动画文件，很炫酷。还有可以自己编辑Lottie动画的工具LottieEditor。

先上图看效果，是不是感觉很不错！

从LottileFiles获取json动画资源

点击进入官网：

LottileFiles

注册

点击右上角的Sign up

输入名称、邮箱、密码和确认密码随后点击：Sign up with Email（使用邮箱注册）

你的邮箱会受到一份来信，点击verify验证，验证成功后便可以正常使用了

寻找需要的动画

点击这个按钮（发现动画）

进入后你会出现这个界面，都是作者们自己做的上传到了官网，我们可以拿来用

点击需要的动画

点击下载，json文件

将json文件保存在vue项目中的assets目录下

使用vue-lottie组件

安装和引用

1.安装：

npm install --save vue-lottie

2.在main.js文件中引用：

import lottie from 'vue-lottie';

Vue.component('lottie', lottie)

在组件中使用

<template><div class="home"><div class="p1"><lottie:options="defaultOptions":height="200":width="200"@animCreated="handleAnimation"class="pp1"/><button @click="stop">停止</button><button @click="pause">暂停</button><button @click="play">播放</button></div></div>
</template><script>
import * as lottieJson from "../assets/json/104853-thinking.json";
export default {data() {return {defaultOptions: {animationData: lottieJson.default /*文件资源*/,},animationSpeed: 1 /*动画速度*/,};},methods: {handleAnimation: function (anim) {this.anim = anim;},//停止stop: function () {this.anim.stop();},//暂停pause: function () {this.anim.pause();},//播放play: function () {this.anim.play();},//当滑块控件值发生改变时，改变动画的速度onSpeedChange: function () {this.anim.setSpeed(this.animationSpeed);},},
};
</script>
<style lang="less" scoped>.p1 {margin-left: 200px;
}
.pp1 {margin: 0 0 !important;
}
</style>

关于登录国外网址显示无法加载reCaptcha问题

使用Firefox浏览器解决无法加载reCaptcha验证码的方法教程

在vue项目中使用Lottie动画(随看随用)相关推荐

VUE项目中集成AnimateCSS动画（2020.6.28 亲测可用）
目录在 Vue 项目中使用 animate.css 第一步:安装第二步:引入及使用第三步:页面中使用(相比网上搜到的教程,有改动的地方) 如何找到想要的动画题外话 vue 方式给元素绑定进入动 ...
Vue项目中如何使用动画特效
一.安装在命令行中执行:使用npm或者cnpm安装 npm install animate.css --save 或 cnpm install animate.css --save 二.引入在ma ...
vue项目中使用百度地图轨迹动画
在上篇博客中,介绍了如何在vue项目中集成百度地图,这篇博客主要是说如何在vue项目中使用轨迹动画在项目开发过程中,比如你需要实时的观察一个人的行走路线,行走过程. 这个时候我们就需要在地图上使用 ...
在vue项目中使用gsap，实现极佳的2d动画效果
在vue项目中使用gsap,实现极佳的2d动画效果一.GSAP是什么? 二.使用步骤 1.引入库 2.在vue中使用 3.vue组件使用gsap完整代码总结一.GSAP是什么? GSAP全称是G ...
在VUE中使用Lottie动画
Lottie简介官方介绍:Lottie is a mobile library for Web, and iOS that parses Adobe After Effects animations ...
Vue项目中particles的使用，来实现屏幕飘浮小星星动画（满天星）
Vue项目中particles的使用,来实现屏幕飘浮小星星动画(满天星) 下载包可采用npm/cnpm npm/cnpm install particles.js --save 这里附上git地址:h ...
zdog实现三维立体动画，并应用到vue项目中去
1.进入zdog官方网站在这里附上链接https://zzz.dog/ 2.下载原型代码在这里选择一个你自己感兴趣的3D立体模型,然后点进去然后就会出来原型代码,这里我们点击下载整个原型代码下 ...
vue项目中遇到的一些问题
或访问:https://github.com/littleHiuman/experiences-about-vue 欢迎补充! vuex 状态 vue-cli 命令行 vue vue vue-rou ...
Swiper4.5在vue项目中的使用方法
一. 效果图 · 渐变式 · gif 动画演示: 二.首先,npm 安装 swiper 用swiper,所以要先在框架内npm install --save swiper安装它. 安装完成之后,你会在 ...