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

news2024/11/13 22:00:00

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

  • 使用lottie制作动画。
    • 1.json动画
    • 2.实现效果
    • 3.git仓库
    • 4.运行
    • 5.json动画天堂
    • 6.代码
    • 7. 经常使用的方法

使用lottie制作动画。

1.json动画

 废话不多说,直接看效果图

2.实现效果

在这里插入图片描述

3.git仓库

https://gitee.com/chaiachai/lottie

4.运行

npm install
npm run serve

5.json动画天堂

https://lottiefiles.com/
可以下载想要的json动画
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
显示json的帧数详情

6.代码

<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提供了很多的控制动画播放的方法,下面是一些常用的方法。

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: 将在动画删除时触发

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2236704.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Ubuntu实现双击图标运行自己的应用软件

我们知道在Ubuntu上编写程序&#xff0c;最后编译得到的是一个可执行文件&#xff0c;大致如下 然后要运行的时候在终端里输入./hello即可 但是这样的话感觉很丑很不方便&#xff0c;下边描述一种可以类似Windows上那种双击运行的实现方式。 我们知道Ubuntu是有一些自带的程序…

【GPTs】Email Responder Pro:高效生成专业回复邮件

博客主页&#xff1a; [小ᶻZ࿆] 本文专栏: AIGC | GPTs应用实例 文章目录 &#x1f4af;GPTs指令&#x1f4af;前言&#x1f4af;Email Responder Pro主要功能适用场景优点缺点 &#x1f4af;小结 &#x1f4af;GPTs指令 Email Craft is a specialized assistant for cra…

阿里云ECS服务器使用限制及不允许做的事情

阿里云ECS&#xff08;Elastic Compute Service&#xff09;是一种高性能的弹性计算服务&#xff0c;允许用户在云端创建和管理虚拟服务器。尽管ECS提供了强大的功能&#xff0c;但在使用过程中&#xff0c;阿里云有一些限制和不允许的行为。以下是一些主要的使用限制和禁止行为…

《Atomic Picnic》进不去游戏解决方法

Atomic Picnic有时候会遇到进不去游戏的情况&#xff0c;这可能是由多种原因造成的&#xff0c;玩家可以采取很多解决方法&#xff0c;比如检查电脑配置、更新系统和驱动或验证游戏文件。 Atomic Picnic进不去游戏怎么办 检查电脑配置 查看自己的电脑配置是否达到了游戏的要求…

Fastify Swagger:自动化API文档生成与展示

在现代软件开发中&#xff0c;API文档的生成和维护是一个不可或缺的环节。Fastify Swagger 是一个专为 Fastify 框架设计的插件&#xff0c;它能够自动生成符合 Swagger&#xff08;OpenAPI v2 或 v3&#xff09;规范的文档&#xff0c;从而帮助开发者轻松创建和维护API文档。本…

Nuxt3之使用lighthouse性能测试及性能优化实操

lighthouse性能测试工具 什么是 LightHouse 呢 Lighthouse 是一个开源的自动化工具&#xff0c;用于提高网页的质量。可以通过浏览器的开发者工具运行&#xff0c;也可以作为命令行工具或 Node.js 模块集成到持续集成系统中。Lighthouse 可以帮助开发者&#xff1a; 性能优化…

基于单片机的自动充电蓝牙智能台灯的设计

本设计以单片机为主要控制芯片&#xff0c;主要包括主控模块&#xff0c;显示模块&#xff0c;蓝牙模块&#xff0c;ADC转换信号模块&#xff0c;红外感应模块&#xff0c;光敏模块&#xff0c;充电模块等多功能设计。台灯分为自动模式与手动模式&#xff0c;自动模式开启时&am…

Linux操作系统:学习进程_对进程概念的深入了解

目录 前言 开篇 一、进程概念 二、进程的描述与管理 1、如何描述与管理 2、Linux中的PCB-task_struct 3、对进程组织的理解 三、进程的属性 1、系统创建进程 2、查看进程 3、进程的标识符 4、退出进程 1>ctrlc 2>kill命令杀死进程 5、用户进程的创建方式…

PointMamba: A Simple State Space Model for Point Cloud Analysis——点云论文阅读(10)

此内容是论文总结&#xff0c;重点看思路&#xff01;&#xff01; 文章概述 这篇文章提出了PointMamba&#xff0c;一种基于状态空间模型&#xff08;SSM&#xff09;的点云分析方法&#xff0c;通过引入线性复杂度算法来实现高效的全局建模。与传统基于Transformer的点云方…

【LLM】【LLaMA-Factory】:Qwen2.5-Coder-7B能力测评

1 前期准备工作 1.1 环境概述 大模型框架&#xff1a;LLaMA-Factory CG客户端镜像&#xff1a;hiyouga/LLaMA-Factory/LLaMA-Factory / v4 cpu 架构 核心数 线程数 频率 内存使用情况 操作系统 GPU&#xff1a;四张4090显卡 CUDA python 以及相关依赖包 pytorch 1.2 数据准…

OpenAI CEO阿尔特曼预测AGI可能在五年内出现 对社会的影响远小于预期

OpenAI 不断探索人工智能及其所蕴含的技术可能性的工作已经引起了相当大的反响&#xff0c;用户和科技界都对其新发布的模型及其所蕴含的先进性着迷。 在公司大力发展 AGI&#xff08;人工通用智能&#xff09;的同时&#xff0c;许多知名公司的关键员工也加入了 OpenAI&#x…

AI周报(11.3-11.9)

AI应用--商务会议旅游必备 AI同传翻译耳机 作为一个经常出差和旅游的人&#xff0c;我深知语言不通带来的困扰。每次在国外旅行&#xff0c;面对不同语言的环境&#xff0c;总是让人头疼不已。幸好&#xff0c;现在有了AI同传翻译耳机&#xff0c;出门在外也能轻松交流。 时空…

qt QCompleter详解

1、概述 QCompleter是Qt框架中的一个类&#xff0c;用于为文本输入提供自动完成功能。它可以与Qt的输入控件&#xff08;如QLineEdit、QTextEdit等&#xff09;结合使用&#xff0c;根据用户的输入实时过滤数据源&#xff0c;并在输入控件下方或内部显示补全建议列表。用户可以…

为什么分布式光伏规模是6MW为界点

安科瑞 华楠 近日&#xff0c;能源局发布定义分布式光伏6MW及以上的光伏电站必须自发自用&#xff0c;自行消纳。多省能源局规定大于6MW的电站必须按集中式管理&#xff0c;另外大于6MW&#xff08;包含&#xff09;要省级审批&#xff0c;小于则由市级审批&#xff0c;10kV线…

【青牛科技】GC8549替代LV8549/ONSEMI在摇头机、舞台灯、打印机和白色家电等产品上的应用分析

引言 在现代电子产品中&#xff0c;控制芯片的性能直接影响到设备的功能和用户体验。摇头机、舞台灯、打印机和白色家电等领域对控制精度、功耗和成本等方面的要求日益提高。LV8549/ONSEMI等国际品牌的芯片曾是这些产品的主要选择&#xff0c;但随着国内半导体技术的进步&…

分析报告、调研报告、工作方案等的提示词

什么是提示词&#xff1f; 提示词的英文是Prompt&#xff0c;是你与人工智能&#xff08;AI&#xff09;进行交流的方式。简单来说&#xff0c;提示词就是你给AI的一段文字或问题&#xff0c;AI根据这段文字或问题来生成回应或完成任务。 举个例子&#xff1a;假设你在使用一…

Embedding 技术在推荐系统中的应用

参考自《深度学习推荐系统》——王喆&#xff0c;用于学习和记录。 介绍 Embedding&#xff0c;中文直译为“嵌入”&#xff0c;常被翻译为“向量化”或者“向量映射”。它的主要作用是将稀疏向量转换成稠密向量&#xff0c;便于上层深度神经网络处理。事实上&#xff0c;Emb…

解决Postman一直在转圈加载无法打开问题的方法

在使用Postman这款强大的API测试工具时&#xff0c;有时可能会遇到程序长时间加载而无法正常使用的情况。面对这样的问题&#xff0c;可以尝试以下几种解决办法&#xff1a; 方法一&#xff1a;直接运行Postman可执行文件 定位到Postman的安装目录 如果您不确定Postman的具体安…

机器学习—训练细节

首先回忆如何训练一个逻辑回归模型&#xff0c;建立一个Logistic回归模型是&#xff1a;你将指定如何计算输出给定输入特征x和参数w和b&#xff0c;在逻辑回归函数预测f(x)g&#xff0c;它是应用于w*xb的Z状结肠函数&#xff0c;所以如果znp.dot(w,x)b&#xff0c;f_x1/(1np.ex…

bert-base-uncased处理文档

1.安装必要的库 确保安装 transformers 和 torch 库&#xff1a; pip install transformers torch 2.加载本地 BERT 模型和分词器 由于已将模型和分词器下载到本地&#xff0c;可以指定文件路径加载。确保路径与本地文件结构一致。 from transformers import BertTokenizer…