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 ...
随机推荐
- 程序员开发利器：Your Commands网站上线
程序员开发利器:Your Commands网站上线 先上链接: https://www.ycmds.cc 背景 各种命令行工具是我们IT行业日常工作离不开的,但是对于命令行工具的使用有一个痛点:文档上 ...
- NetCore项目发布对前端项目进行打包合并发布
在某个小项目中, api使用asp.net core 3.x 编写, UI页面则使用Vuejs. 正常情况下, 项目右键的发布只会发布api项目,而不会管Vuejs的项目. 所以通过简单的改造,在发布 ...
- 关于uniapp的兼容性的一些问题
.markdown-body { line-height: 1.75; font-weight: 400; font-size: 16px; overflow-x: hidden; color: rg ...
- KubeKey 升级 KubeSphere 和 Kubernetes 补丁版本实战指南
作者:运维有术 前言 知识点 定级:入门级 KubeKey 如何升级 KubeSphere 补丁版本 KubeKey 如何升级 Kubernetes 补丁版本 KubeSphere 和 Kuberne ...
- 自学PHP笔记(四) PHP变量和常量
PHP中变量有普通变量.可变变量和预定义变量,而常量就是普通变量和预定义变量. 1. 变量 在PHP中变量是内存中得一个命名单元,在系统中为程序中每个变量都分配一个存储单元,在这些存储单元中可以存储任 ...
- Git操作【常用操作命令】
Git操作指令 1. git init 初始化一个git 仓库: 2. git add test.txt 添加一个文件到仓库,可以添加多个,一空格隔开: 3. git commit -m " ...
- 题解：CF687C The Values You Can Make
CF687C The Values You Can Make 题解 题目翻译感觉不明不白的(至少我看了几遍没看懂),这里给个较为清晰的题面. 题目描述 给你 \(n\) 个硬币,第 \(i\) 个硬币 ...
- ubuntu 安装使用 mytop
apt搜索一下 $ sudo apt search mytop Sorting... Done Full Text Search... Done mytop/focal,focal,now 1.9.1 ...
- AbstractQueuedSynchronizer源码解析之ReentrantLock(一)
在上一篇笔记中提到concurrent包中semaphores, barriers, and latches等Synchronizer的介绍和使用,于是想深入的了解这些Synchronizer的原理和 ...
- 💥TinyPro Vue v1.1.0 正式发布：增加细粒度权限管理、页签模式、多级菜单，支持 Webpack/Vite/Rspack/Farm 多种构建工具
你好,我是 Kagol,个人公众号:前端开源星球. 视频教程:https://www.bilibili.com/video/BV1SUBRYGECg/ 为了提升前端开发效率,OpenTiny 提供了一 ...