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 ...
随机推荐
- PLSQL安装配置与汉化
一.下载安装 1.官方安装包下载链接:https://www.allroundautomations.com/plsqldev.html 如下图所示,可自行选择32位或者64位 2.下载后双击安装至指 ...
- 【2024.10.03】NOIP2024 赛前集训-刷题训练（5）
[2024.10.03]NOIP2024 赛前集训-刷题训练(5) NOIP2017 提高组 小凯的疑惑 形式化题面:求最大的正整数 \(w\),满足 \(ax + by = w\) 不存在一对非负整 ...
- 重温c语言之，7天开整，就是随便的写写，第二天
一:操作符 除法: 如果都是整数,除数,被除数都是整数,那么结果:就是整数的商(没有小数部分的),例如:7/2=3: 如果除数或者被除数其中一个是浮点数,那么结果就是(条件是:能除尽的,并且小数在基础 ...
- Linux再学！
第三篇Linux入门 一.linux基本指令 1.Linux根目录为/,后续路径用/分隔,如/home/admin 2.Linux命令 基础格式: command: 命令本身 -options:[可选 ...
- Linux中find命令详解
find命令 find 命令用于查找文件或目录 语法格式: find ./ -type f -name '文件名' 参数依次是:find命令,这里的./指的是当前路径,-type是选择文件类型,文件类 ...
- Python基础：Python的变量和对象
一.基本原理 Python中一切都是对象,变量中存放的是对象的引用.这是一个普遍的法则.我们举个例子来说,Python是如何来处理的. x = 'blue' y = 'green' z = x 当p ...
- Java深度历险（三）——Java线程：基本概念、可见性与同步
开发高性能并发应用不是一件容易的事情.这类应用的例子包括高性能Web服务器.游戏服务器和搜索引擎爬虫等.这样的应用可能需要同时处理成千上万个请求.对于这样的应用,一般采用多线程或事件驱动的架构.对于J ...
- k8s之Helm
官方文档: https://helm.sh/zh/docs/intro/using_helm/ Helm 帮助您管理 Kubernetes 应用-- Helm Chart,Helm 是查找.分享和使用 ...
- CSS 变量与运算
1.变量 变量声明:变量名使用 "--" 为前缀,且区分大小写 /* 全局变量 */ :root{ --bgColor: red; } /* 布局变量 */ p{ --bgColo ...
- vue 适配不同分辨率显示问题
新建 js 文件 rem.js class DevicePixelRatio { constructor() { // this.flag = false; } // 获取系统类型 _getSyste ...