lottie-web动画库在HTML5页面中和在vue项目中的两种使用方式
本文主要介绍lottie-web动画库在HTML5页面中和在vue项目中的两种使用方式。
1、在HTML5页面中的使用方式
具体使用步骤详见下面的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>lottie 极简Demo</title>
<!-- 第一步: 引入CDN -->
<script src="https://gw.alipayobjects.com/os/lib/lottie-web/5.5.6/build/player/lottie.min.js"></script>
</head>
<body>
<!-- 第二步: 创建容器 -->
<div id="container"></div>
<div id="status">循环播放3次后停止</div>
<div id="loop"></div>
</body>
<script>
// 第三步: 实例化
var anim = lottie.loadAnimation({
container: document.getElementById("container"), // 容器
renderer: "svg",
loop: true,
autoplay: true,
// animationData: {}, //如果使用的是JSON
path:
"https://gw.alipayobjects.com/os/sage/10726a69-0e6a-484f-a784-d57a812af9a6/lottie.json" // the path to the animation json
});
var loopCount = 0;
anim.onLoopComplete = function() {
loopCount += 1;
document.getElementById("loop").textContent = `播放了${loopCount}次`;
if (loopCount >= 3) {
anim.stop();
}
};
</script>
</html>
在HBuilder.exe编译器中切换到“边改边看模式”或者直接点击
按钮在chrome浏览器，会自动显示页面动画效果：是一个跳动的红心。
但是在搜狗浏览器中会报出“跨域访问”的问题，稍后再解决。
2、在vue项目中的使用方式
2.1 按照常规的流程创建Vue项目，具体步骤省略（如在指定的目录打开命令行窗口，使用vue create 项目铭创建项目，然后用VSCode打开项目文件夹，即可进行相关编辑和开发）。
2.2 安装 Lottie
npm install lottie-web -S
2.3引入动画库
import lottie from 'lottie-web';
2.4使用动画库
this.anim = lottie.loadAnimation({
container: this.$refs[`animation${i}`][0], //渲染的容器
renderer: 'svg', // 渲染方式:svg、canvas
loop: false, //循环播放，默认：false
autoplay: true, //自动播放 ，默认true
animationData: data, //动画json
});
2.5具体的使用步骤：
1、在components目录下面创建组件loadding.vue，内部代码如下：
<template>
<!-- 为容器绑定样式 -->
<div :style="style" ref="lavContainer"></div>
</template> <script>
//引入lottie
import lottie from 'lottie-web'
//引入json数据
// import animationData from '../../static/bitcoin.json' export default {
props: { //接收父元素传入的参数
options: {
type: Object,
required: true
},
height: Number,
width: Number
},
data() {
return {
style: { //设置容器的样式
width: this.width ? `${this.width}px` : '40%', //如果父元素有传参则使用传参的值，没有则=40%
height: this.height ? `${this.height}px` : '100%',//如果父元素有传参则使用传参的值，没有则=100%
overflow: 'hidden',//超出容器隐藏
margin: '0 auto' //水平居中
}
}
},
mounted() {
lottie.loadAnimation({ //初始化
container: this.$refs.lavContainer,//在哪个dom容器中生效
renderer: 'svg',//渲染方式svg
loop: true,//this.options.loop !== false,//是否循环 如果传入的参数options.loop不为false 则一直循环 即默认循环
autoplay: true,//this.options.autoplay !== false,//是否自动播放 如果传入的参数options.autoplay不为false 则自动播放 即默认自动播放
// animationData: animationData,//动画数据，这个必须要有
path: "/packages/lf20_sF7uci.json",
rendererSettings: this.options.rendererSettings
})
}
}
</script>
2、修改home.vue组件，修改后的代码如下：
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<!-- 显示动画的容器 -->
<div class="test_wrap">
<loadding :options="defaultOptions" />
</div>
</div>
</template> <script>
// @ is an alias to /src
// import lottie from 'lottie-web' //引入子组件
import loadding from '@/components/loadding.vue' export default {
name: 'Home',
components: {
'loadding': loadding
}, data () {
return {
show:true,
defaultOptions: {
autoplay: true,//自动播放
loop: true,//循环播放
height: 512,
width: 512
},
}
}
}
</script>
3、解决跨域访问的问题。在vue项目中添加vue.config.js文件，内部代码如下：
module.exports = {
// 代理配置
devServer: {
port: 8080,
proxy: {
'/': {
target: 'https://assets7.lottiefiles.com',
changeOrigin: true,
}
}
}
};
注意：其中，https://assets7.lottiefiles.com/packages/lf20_sF7uci.json是在线json资源链接。当然了也可以用将path: "/packages/lf20_sF7uci.json"更换为animationData:animationData，以便使用本地的json动画资源。
运行结果如下：
参考链接：
4、vue项目中使用 lottie-web 实现tab栏点击动效
lottie-web动画库在HTML5页面中和在vue项目中的两种使用方式的更多相关文章
- html5异步单图片多图片上传两种实现方式 后台.net mvc接收
Asp.net mvc上传多张图片后台存储 前台页面通过<file name="img">标签数组上传图片,后台根据Request.Files["img&qu ...
- web 开发之js---ajax 中的两种提交方式ajax post 和 ajax get 实例
()post http://04101334.iteye.com/blog/637695/ ()get function serializeElement(element) { var method ...
- 百度Web富文本编辑器ueditor在ASP.NET MVC3项目中的使用说明
====================================================================== [百度Web富文本编辑器ueditor在ASP.NET M ...
- vue项目中使用Lodop实现批量打印html页面和pdf文件
1.Lodop是什么? Lodop(标音:劳道谱,俗称:露肚皮)是专业WEB控件,用它既可裁剪输出页面内容,又可用程序代码直接实现复杂打印.控件功能强大,却简单易用,所有调用如同JavaScript扩 ...
- Web APi之认证（Authentication）两种实现方式【二】（十三）
前言 上一节我们详细讲解了认证及其基本信息,这一节我们通过两种不同方式来实现认证,并且分析如何合理的利用这两种方式,文中涉及到的基础知识,请参看上一篇文中,就不再叙述废话. 序言 对于所谓的认证说到底 ...
- 转 Web APi之认证（Authentication）两种实现方式【二】（十三）
前言 上一节我们详细讲解了认证及其基本信息,这一节我们通过两种不同方式来实现认证,并且分析如何合理的利用这两种方式,文中涉及到的基础知识,请参看上一篇文中,就不再废叙述废话. 序言 对于所谓的认证说到 ...
- vue 项目中当访问路由不存在的时候默认访问404页面
前言: 在Vue项目中,当访问的页面路由不存在或错误时,页面显示为一片空白.然而,通常我们需要对访问url不存在或者错误的情况下添加默认的404页面,即not found页面. 一般的处理方法是: 在 ...
- 解决在Vue项目中时常因为代码缩进导致页面报错的问题
前言 如果我们初次使用vue-cli来构建单页SPA应用,在撸代码的过程中有可能会遇到这种因为代码缩进导致 页面报错的问题,导致我们烦不胜烦.接下来我们就来看一看如何解决这个小问题... erro原因 ...
- 利用来JS控制页面控件显示和隐藏有两种方法
利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: 1 2 document.getEle ...
- vue 项目中如何在页面刷新的状态下保留数据
1.问题:在vue项目中,刷新页面之后,我当前打开的所有菜单,都消失,我如何实现刷新之后页面仍然是刷新之前的状态 效果图: 解决方法: 使用vuex作状态管理: 将vuex里面的数据同步更新到loca ...
随机推荐
- 使用Radzen Blazor组件库开发的基于ABP框架炫酷UI主题
一.项目简介 使用过ABP框架的童鞋应该知道它也自带了一款免费的Blazor UI主题,它的页面是长这样的: 个人感觉不太美观,于是网上搜了很多Blazor开源组件库,发现有一款样式非常不错的组件库, ...
- SpringMvc请求注解@RequestBody请求体/@PathVaribale/@RequestParam【支持Ajax】
一.@RequestBody请求体 注意请求体只有form表单才有,而对于链接来说不使用 1).在Controller中写 @RequestBody String body是基本用法 另外可以封装对象 ...
- 每日学学Java开发规范，OOP规约(附阿里巴巴Java开发手册（终极版）)
前言 每次去不同的公司,码不同的代码,适应不同的规范,经常被老大教育规范问题,我都有点走火入魔的感觉,还是要去看看阿里巴巴Java开发规范,从中熟悉一下,纠正自己,码出高效,码出质量. 想细看的可以去 ...
- C221027B
B 抽 \(n\) 次卡, 连续 \(i\) 次没有抽中时, 第 \(i+1\) 次抽中的概率是 \(p_i\), 规定\(p_k=1\), 求期望抽中次数. 标签:矩阵加速递推, 动态规划. 暴力: ...
- 0基础读顶会论文—Kappa：一种用于无服务器计算的编程框架
原文链接 代码:快速使用kappa 首先的首先,可以先去了解一下lambda架构 Abstract 在本文中提出了Kappa,一个简化无服务器开发的框架.它使用检查点来处理lambda函数超时,并提供 ...
- 问题：深度学习时代的初期最为火热的AI安全问题已经很少有人讨论了，那么是不是已经解决该问题了呢？
答案: 先说结果,该问题并没有被解决. 之所以该问题已经不是最初的那么火热的讨论和研究热点了,其主要原因是大家发现这个神经网络在深度学习时代是十分的work的,虽然AI安全问题一直没有解决,但是比较发 ...
- 2.12 Linux两种远程管理工具（PuTTY和SecureCRT）
通过<Linux远程管理协议>一节可以知道,Linux远程管理服务器多基于 SSH 协议.本节给大家介绍 2 种常见的基于 SSH 协议的远程管理工具,分别是 PuTTY 和 Secure ...
- c++11新增内容
记录一下c++11新特性方便以后回忆 1.nullptr (对标NULL) 2.auto ,decltype(根据表达式推断类型,表达式不执行) decltype(func()) sum = 5; / ...
- 基于Java+SpringBoot心理测评心理测试系统功能实现七
一.前言介绍: 1.1 项目摘要 心理测评和心理测试系统在当代社会中扮演着越来越重要的角色.随着心理健康问题日益受到重视,心理测评和心理测试系统作为评估个体心理状态.诊断心理问题.制定心理治疗方案的工 ...
- 定位模组LuatOS快速入门:源UART串口通信
合宙Air201资产定位模组--是一个集成超低功耗4G通信.语音通话.超低功耗定位.计步.震动.Type-C.充电.放音.录音等功能的超小PCBA. 内部集成高效.简单.可靠的LuatOS语言,旨在帮 ...