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 ...
随机推荐
- 让查询可以使用 json path
记录一下最近sv.db的完善 1. 让查询可以使用 json path 有时候我们会存储 json 到 db,也有时会只取json部分数据,或者通过json部分数据进行过滤 所以sv.db 也支持这些 ...
- 云原生周刊：Gateway API v1.1 发布 ｜ 2024.6.3
开源项目推荐 Grafana Tanka Tanka 是 Grafana 开发的一款用于 Kubernetes 的灵活.可重用和简洁的配置工具,是使用 YAML 进行 Kubernetes 配置的一种 ...
- css超出部分...显示
首先需要设置宽 white-space: nowrap;// 文字不换行 overflow: hidden;// 超出隐藏 text-overflow: ellipsis; 实现移入后正常显示的可 ...
- OGRE 渲染引擎 Windows 平台构建及编译
0 OGRE 机器人领域常见的Rviz和Gazebo可视化的渲染后端. 1 无数的坑 这东西真的可恶,官方教程文档以及项目构建的方式是真的繁琐,在Windows上. CMake 的构建必须要使用 CM ...
- 学习JavaScript第六天
文章目录 1. JavaScript 中的垃圾回收机制(GC) 1.1 垃圾回收相关概念 ① 什么是垃圾 ② 什么是垃圾回收 ③ 垃圾没有及时回收的后果 ④ JavaScript 垃圾回收的常见算法 ...
- Nuxt.js 应用中的 components：dirs 事件钩子详解
title: Nuxt.js 应用中的 components:dirs 事件钩子详解 date: 2024/10/31 updated: 2024/10/31 author: cmdragon exc ...
- 题解：CF888G Xor-MST
题解:CF888G Xor-MST 题目大意:给定 \(n\) 个点的点权, 任意两点间边权是点权的异或和.求这张完全图的 MST 的权值. 思路: Boruvka + Trie树 + 按位贪心. 关 ...
- flutter TabBarView 动态添加删除页面
在TabBarView 动态添加页面后删除其中一个页面会导致后面的页面状态错误或删除的页面不正确.出现这种问题是由于创建子页面时没有为子页面设置唯一的key导致的. 1 void addNewPage ...
- SqlSugarClient 代码优先建表， 根据给定的实体类，创建SQL语句, 之后创建MySQL表
using SqlSugar; using System; using System.Collections.Generic; using System.Reflection; using Syste ...
- WebUI自动化框架-playwright
(持续更新) 一.环境准备 安装playwright:playwright是基于python3.7开发的第三方包,所以需要使用的python版本是3.7及其以上的 pip install playwr ...