Javascript动画插件lottie-web的使用方法
lottie可以将一个json数据渲染成一个动画，而且支持多平台，在不同的平台下使用同一个json文件即可实现相同的效果，非常的方便。这里介绍前端的使用方法。
https://github.com/airbnb/lottie-web
1.配合vue-cli使用
1.npm安装lottie-web
npm install lottie-web
2.创建loading.vue
2.1引入lottie插件和需要的json数据
2.2接收父组件传入的配置参数
2.3在页面渲染完毕后进行初始化
<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: this.options.loop !== false,//是否循环 如果传入的参数options.loop不为false 则一直循环 即默认循环
autoplay: this.options.autoplay !== false,//是否自动播放 如果传入的参数options.autoplay不为false 则自动播放 即默认自动播放
animationData: animationData,//动画数据，这个必须要有
rendererSettings: this.options.rendererSettings
})
}
}
</script>
3.父组件引用loadding.vue
可以为loadding组件设定一个容器，通过空中这个容器的display属性来控制loadding组件的显示和隐藏
<template>
<div class="test_wrap">
<div v-show="show">
<loadding :options="defaultOptions" />
</show>
</div>
</template>
<script>
//引入子组件
import loadding from '@/components/loadding'
export default {
data () {
return {
show:false,
defaultOptions: {
autoplay: true,//自动播放
loop: true,//循环播放
},
}
},
components: {
'loadding': loadding
}
}
</script>
2.在HTML页面中使用
1.引入lottie-web这个插件 可以使用cdn，也可以引入本地的
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.6.8/lottie_svg.min.js"> </script>
2.页面加载完毕后，初始化，并传入相应的配置项
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.6.8/lottie_svg.min.js"></script>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<div class="box"></div>
</body>
</html>
<script>
$(function(){
//getJSON() 方法使用 AJAX 的 HTTP GET 请求获取 JSON 数据
$.getJSON("./betcoin.json",function(result){
//获取到数据后进行初始化
console.log(result)
lottie.loadAnimation({ //初始化
container: document.querySelector('.box'),//在哪个dom容器中生效
renderer: 'svg',//渲染方式svg
loop: true,//循环
autoplay: true,//自动播放
animationData: result,//动画数据
})
})
})
</script>
注意：json数据使用了ajax进行获取，要留意跨域问题。
为了避免跨域或者本地读取时的权限问题，可以讲json文件的数据用 反引号 `` 包裹起来，用一个全局变量保存，然后保存为betcoin2.js，即可使用这个数据了，记得用JSON.parse()将json字符串转换回对象格式
//betcoin2.js var animationData = `省略，里面为原json对象`
<script src="./betcoin2.js"></script>
<script>
window.onload = function(){
lottie.loadAnimation({ //初始化
container: document.querySelector('.box'),//在哪个dom容器中生效
renderer: 'svg',//渲染方式svg
loop: true,//循环
autoplay: true,//自动播放
animationData: JSON.parse(animationData),//动画数据
})
}
</script>
到此这篇关于Javascript动画插件lottie-web的使用方法的文章就介绍到这了,更多相关Javascript动画插件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
详解动画插件wow.js的使用方法
本文介绍了动画插件wow.js的使用方法 ,具体如下,分享给大家 1,下载文件 animate.css 下载地址: http://daneden.github.io/animate.css/ wow.min.js 下载地址: http://www.downyi.com/downinfo/37040.html#address 2,引入文件 <link rel="stylesheet" href="css/animate.css" rel="exter
-
纯JAVASCRIPT图表动画插件Highcharts Examples
What is Highcharts? 下载地址 http://www.jb51.net/jiaoben/24363.htmlHighcharts is a charting library written in pure JavaScript, offering an easy way of adding interactive charts to your web site or web application. Highcharts currently supports line, spl
-
jquery轻量级数字动画插件countUp.js使用详解
CountUp.js是一个无依赖,轻量级的JavaScript"类",可用于快速创建以更有趣的方式显示数字数据的动画. 该JS插件下载地址 展示效果: 详细代码示例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery轻量级数字动画插件</title> <!-- 该特效该引入的js插件 --> <
-
Javascript动画插件lottie-web的使用方法
lottie可以将一个json数据渲染成一个动画,而且支持多平台,在不同的平台下使用同一个json文件即可实现相同的效果,非常的方便.这里介绍前端的使用方法.https://github.com/airbnb/lottie-web 1.配合vue-cli使用 1.npm安装lottie-web npm install lottie-web 2.创建loading.vue2.1引入lottie插件和需要的json数据2.2接收父组件传入的配置参数2.3在页面渲染完毕后进行初始化 <template
-
JavaScript实现写入文件到本地的方法【基于FileSaver.js插件】
本文实例讲述了JavaScript实现写入文件到本地的方法.分享给大家供大家参考,具体如下: 工作中有时需要通过 JavaScript 保存文件到本地,我们都知道 JavaScript 基于安全的考虑,是不允许直接操作本地文件的. IE 可以通过 VB 插件的方式进行,而 Chrome 和 firefox 都不支持 JavaScript 向本地写入文件,所以 VB 插件的方式存在兼容性问题. 那有没有适合的方法呢?答案是肯定的,我们可以通过 FileSaver.js 这个小插件实现我们的需求.下
-
JavaScript实现与web通信的方法详解
web通信,一个特别大的topic,涉及面也是很广的.因最近学习了 javascript 中一些 web 通信知识,在这里总结下.文中应该会有理解错误或者表述不清晰的地方,还望斧正! 一.前言 1. comet技术 浏览器作为 Web 应用的前台,自身的处理功能比较有限.浏览器的发展需要客户端升级软件,同时由于客户端浏览器软件的多样性,在某种意义上,也影响了浏览器新技术的推广.在 Web 应用中,浏览器的主要工作是发送请求.解析服务器返回的信息以不同的风格显示.AJAX 是浏览器技术发展的成果,
-
javascript检测flash插件是否被禁用的方法
本文实例讲述了javascript检测flash插件是否被禁用的方法.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author
-
JavaScript实现动画打开半透明提示层的方法
本文实例讲述了JavaScript实现动画打开半透明提示层的方法.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&g
-
深入探究使JavaScript动画流畅的一些方法
基于Javascript的动画暗中同CSS过渡效果一样,甚至更加快,这怎么可能呢?而Adobe和Google持续发布的富媒体移动网站的性能可媲美本地应用,这又怎么可能呢? 本文逐一遍览了基于Javascript的DOM动画库,如Velocity.js和GSAP,看其是如何比jQuery和CSS动画效果更具性能的. jQuery 让我们先从基础的开始: JavaScript 和 jQuery 被错误的混为一谈了. JavaScript 动画是很快的. jQuery 把它放慢了下来.为什么?因为 -
-
JavaScript动画实例之粒子文本的实现方法详解
1．粒子文本的实现原理 粒子文本的实现原理是:使用两张 canvas,一张是用户看不到的canvas1,用来绘制文本:另一张是用户看到的canvas2,用来根据canvas1中绘制的文本数据来生成粒子. 先在canvas1中用如下的语句绘制待显示的文本. ctx1.font = '100px PingFang SC'; ctx1.textAlign = 'center'; ctx1.baseline = 'middle'; ctx1.fillText('Happy New Year',canva
-
关于JavaScript实现动画时动画抖动的原因与解决方法
目录 使用定时器实现动画出现卡顿的原因 requestAnimationFrame 的前世今生 requestAnimationFrame VS setInterval 参考资料 总结 前段时间在使用 JavaScript 做动画的时候发现做出来的动画会出现卡顿的现象,今天我们主要就来聊一下卡顿的原因以及如何解决这个问题. 使用定时器实现动画出现卡顿的原因 主要原因是浏览器无法确定定时器的回调函数的执行时机.以 setInterval 为例,当一个 setInterval 定时器被创建后,它的回
-
Javascript动画效果（1）
前面我们介绍了Javascript的回到顶部效果,今天呢,我们对Javascript动画做进一步的研究.在这篇博文中我们只介绍简单的匀速运动.简单的缓冲运动和简单的多物体运动后面我们还会介绍任意值变化的运动.链式运动.同时运动,同时我们还会简单的封装一个运动插件并且还会将Javascript方法和jquery方法进行比较. 1.简单的匀速运动 下面我们介绍一个demo,鼠标移入,动画向右移动(即隐藏部分显示):鼠标离开,动画向左运动(继续隐藏)整个过程都是匀速的.有了前面回到顶部效果作为基础,这