前端实现json动画(附带示例)

前端实现json动画(附带示例)

使用lottie制作动画。

1.json动画

复制代码
 废话不多说,直接看效果图

2.实现效果

3.git仓库

https://gitee.com/chaiachai/lottie

4.运行

bash 复制代码
npm install
npm run serve

5.json动画天堂

https://lottiefiles.com/

可以下载想要的json动画


显示json的帧数详情

6.代码

javascript 复制代码
<template>
  <div class="home">
    <div class="wrap" ref="lavContainer" @click="changeAnimal"></div>
    <button v-on:click="change('wink')">wink</button>
    <button v-on:click="change('cry')">哭泣</button>
    <button v-on:click="change('laugh')">大笑</button>
    <button v-on:click="change('rolleyes')">转眼睛</button>
  </div>
</template>

<script>
import lottie from 'lottie-web'
import * as animationData from '@/assets/lottie/AnimationLong.json'
import * as animationData1 from '@/assets/lottie/AnimationDate.json'//json 引入的json可能也会有问题,json文件下载的过程中丢失了?
export default {
  name: 'app',
  components: {
  },
  data() {
    return {
      anim: null,
      changeFlag: false
    }
  },
  mounted() {
    this.anim = lottie.loadAnimation({
      container: this.$refs.lavContainer,
      renderer: 'svg',
      loop: false,//是否循环
      autoplay: true,//自动播放  倘若只需要一打开页面就直接播放动画,可以设置为true。如果动画播放完,需要执行其他的操作,可以设置动画播放多少秒结束(和制作动画的人配合,他会告诉你动画多长时间,或者在lottie网站下的动画,进到编辑页面可以查看到动画的帧数时长),直接进行其他的逻辑。
      animationData: animationData,//这里有的可能会报错,可以使用require的方式
    }
    )
    this.anim.addEventListener('complete', () => { console.log('animation data has loaded') })//监听动画播放完,进行操作
  },
  methods: {
    changeAnimal() {
      this.anim.destroy()
      this.anim = lottie.loadAnimation({
        container: this.$refs.lavContainer,
        renderer: 'svg',
        loop: this.changeFlag ? false : true,
        autoplay: this.changeFlag ? false : true,
        animationData: this.changeFlag ? animationData : animationData1,
      }
      )
      this.changeFlag = !this.changeFlag
    },
    change(type) {
      switch (type) {
        case 'rolleyes':
          this.anim.playSegments([[0, 23], [99, 105]], true)//播放片段  因为没有ui制作的json,所以直接自己假装构建一个比较自然的动画
          break
        case 'cry':
          this.anim.playSegments([[28, 48], [99, 105]], true)
          break

        case 'laugh':
          this.anim.playSegments([[50, 79], [99, 105]], true)
          break
        case 'wink':
          this.anim.playSegments([80, 100], true)
          break

      }
    }
  }
}
</script>

<style>
.home{
 
}
.wrap{
  width: 200px;
  height: 200px;
  overflow: hidden;
  margin: 0 auto;
}
</style>

7. 经常使用的方法

lottie-web提供了很多的控制动画播放的方法,下面是一些常用的方法。

javascript 复制代码
animation.play(); // 播放该动画,从目前停止的帧开始播放

animation.stop(); // 停止播放该动画,回到第0帧

animation.pause(); // 暂停该动画,在当前帧停止并保持

animation.goToAndStop(value, isFrame); // 跳到某个时刻/帧并停止。isFrame(默认false)指示value表示帧还是时间(毫秒)

animation.goToAndPlay(value, isFrame); // 跳到某个时刻/帧并进行播放

animation.goToAndStop(30, true); // 跳转到第30帧并停止

animation.goToAndPlay(300); // 跳转到第300毫秒并播放

animation.playSegments(arr, forceFlag); // arr可以包含两个数字或者两个数字组成的数组,forceFlag表示是否立即强制播放该片段

animation.playSegments([10,20], false); // 播放完之前的片段,播放10-20帧

animation.playSegments([[0,5],[10,18]], true); // 直接播放0-5帧和10-18帧

animation.setSpeed(speed); // 设置播放速度,speed为1表示正常速度

animation.setDirection(direction); // 设置播放方向,1表示正向播放,-1表示反向播放

animation.destroy(); // 删除该动画,移除相应的元素标签等。在unmount的时候,需要调用该方法

//监听
//eg
 this.anim.addEventListener('complete', () => { console.log('animation data has loaded') })//监听动画播放完,进行操作

complete: 播放完成(循环播放下不会触发)

loopComplete: 当前循环下播放(循环播放/非循环播放)结束时触发

enterFrame: 每进入一帧就会触发,播放时每一帧都会触发一次,stop方法也会触发

segmentStart: 播放指定片段时触发,playSegments、resetSegments等方法刚开始播放指定片段时会发出,如果playSegments播放多个片段,多个片段最开始都会触发。

data_ready: 动画json文件加载完毕触发 * DOMLoaded: 动画相关的dom已经被添加到html后触发

destroy: 将在动画删除时触发
相关推荐
艾小逗1 小时前
vue3中的effectScope有什么作用,如何使用?如何自动清理
前端·javascript·vue.js
明似水5 小时前
Flutter 弹窗队列管理:支持优先级的线程安全通用弹窗队列系统
javascript·安全·flutter
Simaoya6 小时前
【vue】【element-plus】 el-date-picker使用cell-class-name进行标记,type=year不生效解决方法
前端·javascript·vue.js
Dnn016 小时前
vue3+element-push 实现input框粘贴图片或文本,图片上传。
前端·javascript·vue.js
Nuyoah.6 小时前
《Vue3学习手记5》
前端·javascript·学习
曹牧7 小时前
Java 调用webservice接口输出xml自动转义
java·开发语言·javascript
天天扭码7 小时前
2025年了,npm 与 pnpm我们该如何选择
前端·javascript·npm
烛阴7 小时前
10个JavaScript编程技巧,助你成为高效开发高手!
前端·javascript
s9123601018 小时前
rust REGEX和lazy_static 和struct 混用
java·前端·javascript
天天扭码8 小时前
在项目中常见的main.js和main.mjs有什么区别,我们该如何选择?
前端·javascript·面试