脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → Javascript动画插件

Javascript动画插件lottie-web的使用方法

 更新时间：2022年02月14日 17:10:09   作者：---空白---  
这篇文章主要介绍了Javascript动画插件lottie-web的使用方法，包括配合vue-cli使用及在HTML页面中使用代码，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

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动画插件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • JavaScript使用指针操作实现约瑟夫问题实例

    JavaScript使用指针操作实现约瑟夫问题实例

    这篇文章主要介绍了JavaScript使用指针操作实现约瑟夫问题,实例分析了javascript模拟数组指针操作的相关技巧,非常具有实用价值,需要的朋友可以参考下
    2015-04-04
  • JavaScript获取网页中第一个图片id的方法

    JavaScript获取网页中第一个图片id的方法

    这篇文章主要介绍了JavaScript获取网页中第一个图片id的方法,涉及javascript中document.images方法的使用技巧,需要的朋友可以参考下
    2015-04-04
  • 前端页面在移动设备上显示不正常的原因及解决方案

    前端页面在移动设备上显示不正常的原因及解决方案

    当页面在移动设备上显示不正常时,通常是由于布局、样式或响应式设计设置不当所引起的,移动设备的屏幕尺寸、分辨率和交互方式与桌面设备有很大的不同,本文将详细介绍常见的导致页面在移动设备上显示不正常的原因,以及如何解决这些问题,需要的朋友可以参考下
    2024-09-09
  • excel操作之Add Data to a Spreadsheet Cell

    excel操作之Add Data to a Spreadsheet Cell

    excel操作之Add Data to a Spreadsheet Cell...
    2007-06-06
  • javascript开发实现贪吃蛇游戏

    javascript开发实现贪吃蛇游戏

    这篇文章主要为大家详细介绍了javascript开发实现贪吃蛇游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-07-07
  • 详解javascript跨浏览器事件处理程序

    详解javascript跨浏览器事件处理程序

    这篇文章主要为大家详细介绍了javascript跨浏览器事件处理机制，感兴趣的小伙伴们可以参考一下
    2016-03-03
  • TypeScript调整数组元素顺序算法

    TypeScript调整数组元素顺序算法

    数组类型在TS中可以使用多种方式,比较灵活,下面这篇文章主要给大家介绍了关于TypeScript调整数组元素顺序算法的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-04-04
  • 解析从小程序开发者工具源码看原理实现

    解析从小程序开发者工具源码看原理实现

    小程序的架构设计与web技术还是有一定的差别，其吸取了web技术的一些优势，同时也摒弃web技术中体验等不好的地方。下面通过问题的形式来说说小程序架构中的一些设计点
    2021-06-06
  • 详解JS实现简单的时分秒倒计时代码

    详解JS实现简单的时分秒倒计时代码

    这篇文章主要介绍了JS时分秒倒计时的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • JavaScript中判断函数、变量是否存在

    JavaScript中判断函数、变量是否存在

    这篇文章主要介绍了JavaScript中判断函数、变量是否存在,本文给出了多个判断函数是否存在的方法,并分别给出代码实例,需要的朋友可以参考下
    2015-06-06

最新评论