前端实现lottie案例_html-js-css

目录 Lottie简介相关链接一、lottie-web的使用1.原生html写法源码如下2.vue写法写法源码如下二、vue-lottie的使用1.原生html写法和lottie-web写法一样，插件换一下就行2.vue写法写法源码如下三、其他常用配置及API1.常用属性如下2.常用方法如下3.监听事件：

Lottie简介

Lottie 是Airbnb开源的一个面向 iOS、Android、React Native 的动画库，能分析 Adobe After Effects 导出的动画，并且能让原生 App 像使用静态素材一样使用这些动画，完美实现动画效果。

相关链接

官网

文档

第一种:lottie-web

第二种:vue-lottie

一、lottie-web的使用 1.原生html写法源码如下

DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>title>
head>
<style>
style>
<body>
  <div id="app">
    <div id="lottie_box">div>
      <button @click="startFun">播放button>
      <button @click="suspendFun">暂停button>
    div>
body>

<script src="./js/vue.js">script> 




<script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.9.4/lottie.min.js"
  integrity="sha512-ilxj730331yM7NbrJAICVJcRmPFErDqQhXJcn+PLbkXdE031JJbcK87Wt4VbAK+YY6/67L+N8p7KdzGoaRjsTg=="
  crossorigin="anonymous" referrerpolicy="no-referrer">script>    
<script>
  var app = new Vue({
    el: '#app',
    data: {
      lottie: {},
    },
    mounted() {
      this.lottie = lottie.loadAnimation({
        container: document.getElementById('lottie_box'),                                                                          // 需要绑定的div
        renderer: 'svg',                                                                                                           // 渲染方式:svg：支持交互、不会失帧、canvas、html：支持3D，支持交互
        loop: true,                                                                                                                // 循环播放，默认：true
        autoplay: true,                                                                                                            // 自动播放 ，默认true
        path: 'https://uploads-ssl.webflow.com/624181072db315237608dddf/62442d1d0099b981e929e0e5_black%20squares.json'             // 现在用的线上json 路径(或者自己有json动画文件修改自己本地路径)
      })
    },
    methods: {
      startFun: function () {
        this.lottie.play()                     //  点击播放
      },
      suspendFun: function () {
        this.lottie.pause();                  //  点击暂停播放
      },
    },
    watch: {}
  })
script>

html>

2.vue写法写法源码如下

(1)首先安装lottie-web插件

npm install lottie-web

(2)源码如下

<template>
  <div class="box">
    <div id="lottie_box">div>
    <button @click="startFun">播放button>
    <button @click="suspendFun">暂停button>
  div>
template>

<script>
import lottie from 'lottie-web';

export default {
  name: 'Lottie',
  data () {
    return {
      lottie: {},
    }
  },
  mounted () {
    this.lottie = lottie.loadAnimation({
      container: document.getElementById('lottie_box'),                                                                          // 需要绑定的div
      renderer: 'svg',                                                                                                           // 渲染方式:svg：支持交互、不会失帧、canvas、html：支持3D，支持交互
      loop: true,                                                                                                                // 循环播放，默认：true
      autoplay: true,                                                                                                            // 自动播放 ，默认true
      path: 'https://uploads-ssl.webflow.com/624181072db315237608dddf/62442d1d0099b981e929e0e5_black%20squares.json'             // 现在用的线上json 路径(或者自己有json动画文件修改自己本地路径)
    })
  },
  methods: {
    suspendFun: function () {
      this.lottie.pause();
    },
    startFun: function () {
      this.lottie.play()
    }
  },
}
script>

<style>
.box {
  width: 100%;
  height: 100%;
}
#bm {
  width: 100%;
  height: 100%;
  margin: 0px auto;
}
style>

二、vue-lottie的使用 1.原生html写法和lottie-web写法一样，插件换一下就行 2.vue写法写法源码如下

(1)首先安装vue-lottie插件

npm install --save vue-lottie

(2)在main.js全局挂载一下

import lottie from 'vue-lottie';
Vue.component('lottie', lottie)

(3)代码如下和lottie-web一样

<template>
  <div class="box">
    <div id="lottie_box">div>
    <button @click="startFun">播放button>
    <button @click="suspendFun">暂停button>
  div>
template>

<script>
import lottie from 'lottie-web';

export default {
  name: 'Lottie',
  data () {
    return {
      lottie: {},
    }
  },
  mounted () {
    this.lottie = lottie.loadAnimation({
      container: document.getElementById('lottie_box'),                                                                          // 需要绑定的div
      renderer: 'svg',                                                                                                           // 渲染方式:svg：支持交互、不会失帧、canvas、html：支持3D，支持交互
      loop: true,                                                                                                                // 循环播放，默认：true
      autoplay: true,                                                                                                            // 自动播放 ，默认true
      path: 'https://uploads-ssl.webflow.com/624181072db315237608dddf/62442d1d0099b981e929e0e5_black%20squares.json'             // json 路径
    })
  },
  methods: {
    suspendFun: function () {
      this.lottie.pause();
    },
    startFun: function () {
      this.lottie.play()
    }
  },
}
script>

<style>
.box {
  width: 100%;
  height: 100%;
}
#bm {
  width: 100%;
  height: 100%;
  margin: 0px auto;
}
style>

三、其他常用配置及API 1.常用属性如下

下面列一些常用的配置属性，更多配置项请看：https://github.com/airbnb/lottie-web

animationData: 动画 jsonpath: 可直接指定动画 json // 路径loop: true / false / number //循环autoplay: true / false // 自动播放name: // 给动画取名字,方便方法调用renderer: ‘svg’ / ‘canvas’ / ‘html’ //渲染方式container: the dom element on which to render the animation // 可直接指定
dom 节点渲染 2.常用方法如下 animation.play() 播放，从当前帧开始播放animation.stop() 停止，并回到第0帧animation.pause()暂停，并保持当前帧animation.setSpeed(speed) – 播放速度，1 为正常速度。animation.goToAndStop(value, isFrame)
跳转到某一时间（或帧）并停在那。第一个参数(value)是数值。第二个参数是布尔值，"true"则第一个参数表示“帧”，“false”则表示“时间”。animation.goToAndPlay(value, isFrame)
跳转到某一时间（或帧）并播放。第一个参数(value)是数值。第二个参数是布尔值，"true"则第一个参数表示“帧”，“false”则表示“时间”。

animation.goToAndStop(30, true)     // 跳转到第30帧并停止
animation.goToAndPlay(300)          // 跳转到第300毫秒并播放

animation.setDirection(direction)** 设置播放方向，1表示正向播放，-1表示反向播放animation.playSegments(segments, forceFlag) –
以帧为单位，播放指定段落。第一个参数是一个数组，形式为[(a,b),(c,d),(e,f)…]则播放第a帧到b帧，然后第c帧到d帧，e到f……
，第二个参数为布尔值，“true”则立刻播放参数一中的片段，“false”则播放完当前动画后再开始播放片段。

animation.playSegments([10,20], false)          // 播放完之前的片段，播放10-20帧
animation.playSegments([[0,5],[10,18]], true)   // 直接播放0-5帧和10-18帧

animation.destroy() 删除该动画，移除相应的元素标签等 3.监听事件： complete: 播放完成后触发（循环播放下不会触发）loopComplete: 当前循环下播放（循环播放/非循环播放）结束时触发onEnterFrame: 播放一帧动画的时候触发enterFrame: 每进入一帧就会触发，播放时每一帧都会触发一次，stop方法也会触发data_ready:动画json文件加载完毕触发

 animation.addEventListener('data_ready', () => { console.log('(111)'); });

destroy: 将在动画删除时触发onSegmentStart: 开始播放一个动画片段的时候触发config_ready：完成初始配置后data_failed：当无法加载动画的一部分时loaded_images：当所有图像加载成功或错误时DOMLoaded：将元素添加到DOM时

感觉文章好的话记得点个心心和关注和收藏，有错的地方麻烦指正一下，如果需要转载,请标明出处，多谢！！！

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1321215.html

前端实现lottie案例

发表评论

评论列表（0条）