当前位置: 首页 > news >正文

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

前端实现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,所以直接自己假装构建一个比较自然的动画breakcase 'cry':this.anim.playSegments([[28, 48], [99, 105]], true)breakcase 'laugh':this.anim.playSegments([[50, 79], [99, 105]], true)breakcase '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的时候,需要调用该方法//监听
//egthis.anim.addEventListener('complete', () => { console.log('animation data has loaded') })//监听动画播放完,进行操作complete: 播放完成(循环播放下不会触发)loopComplete: 当前循环下播放(循环播放/非循环播放)结束时触发enterFrame: 每进入一帧就会触发,播放时每一帧都会触发一次,stop方法也会触发segmentStart: 播放指定片段时触发,playSegments、resetSegments等方法刚开始播放指定片段时会发出,如果playSegments播放多个片段,多个片段最开始都会触发。data_ready: 动画json文件加载完毕触发 * DOMLoaded: 动画相关的dom已经被添加到html后触发destroy: 将在动画删除时触发

相关文章:

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

前端实现json动画&#xff08;附带示例&#xff09; 使用lottie制作动画。1.json动画2.实现效果3.git仓库4.运行5.json动画天堂6.代码7. 经常使用的方法 使用lottie制作动画。 1.json动画 废话不多说&#xff0c;直接看效果图2.实现效果 3.git仓库 https://gitee.com/chaiach…...

AI 写作(一):开启创作新纪元(1/10)

一、AI 写作&#xff1a;重塑创作格局 在当今数字化高速发展的时代&#xff0c;AI 写作正以惊人的速度重塑着创作格局。AI 写作在现代社会中占据着举足轻重的地位&#xff0c;发挥着不可替代的作用。 随着信息的爆炸式增长&#xff0c;人们对于内容的需求日益旺盛。AI 写作能够…...

C#-类:索引器

索引器作用&#xff1a;可以让我们以中括号的形式访问自定义类中的元素。 规则自己定&#xff0c;访问时和数组一样 适用于&#xff0c;在类中有数组变量时使用&#xff0c;可以方便的访问、进行逻辑处理 可以重载&#xff0c;结构体也支持索引器 一&#xff1a;索引器的语法…...

Neo4j Cypher WHERE子句详解 - 初学者指南

Neo4j Cypher WHERE子句详解 - 初学者指南 前言1. WHERE子句基础1.1 WHERE子句的本质1.2 示例数据 2. 基本用法2.1 节点属性过滤2.2 关系属性过滤 3. 高级过滤技巧3.1 字符串匹配3.2 正则表达式3.3 属性存在性检查 4. 列表和范围操作4.1 IN操作符4.2 范围查询 5. 空值处理5.1 默…...

【CSS】标准怪异盒模型

概念 CSS 盒模型本质上是一个盒子&#xff0c;盒子包裹着HTML 元素&#xff0c;盒子由四个属性组成&#xff0c;从内到外分别是&#xff1a;content 内容、padding 内填充、border 边框、外边距 margin 盒模型的分类 W3C 盒子模型(标准盒模型) IE 盒子模型(怪异盒模型) 两种…...

栈详解

目录 栈栈的概念及结构栈的实现数组栈的实现数组栈功能的实现栈的初始化void STInit(ST* pst)初始化情况一初始化情况二 代码栈的插入void STPush(ST* pst, STDataType x)代码 栈的删除void STPop(ST* pst)代码 栈获取数据STDataType STTop(ST* pst)代码 判断栈是否为空bool ST…...

硬盘 <-> CPU, CPU <-> GPU 数据传输速度

1. 硬盘 <-> CPU 数据传输速度 import time import os# 定义文件大小和测试文件路径 file_size 1 * 1024 * 1024 * 100 # 100 MB 的文件大小 file_path "test_file.bin"# 创建一个测试文件并测量写入速度 def test_write_speed():data os.urandom(file_si…...

数据编排与ETL有什么关系?

数据编排作为近期比较有热度的一个话题&#xff0c;讨论度比较高&#xff0c;同时数据编排的出现也暗示着数字化进程的自动化发展。在谈及数据编排时&#xff0c;通常也会谈到ETL&#xff0c;这两个东西有相似点也有不同点。 数据编排和ETL&#xff08;提取、转换、加载&#x…...

来了解一下!!!——React

React 是一个用于构建用户界面的 JavaScript 库&#xff0c;特别适合用于创建单页面应用程序&#xff08;SPA&#xff09;。它由 Facebook 维护&#xff0c;并且拥有一个活跃的社区&#xff0c;这使得 React 成为了目前最流行的前端框架之一。以下是关于 React 的一些重要信息和…...

用vite创建项目

一. vite vue2 1. 全局安装 create-vite npm install -g create-vite 2. 创建项目 进入你想要创建项目的文件夹下 打开 CMD 用 JavaScript create-vite my-vue2-project --template vue 若用 TypeScript 则 create-vite my-vue2-project --template vue-ts 这里的 …...

json-server的使用(根据json数据一键生成接口)

一.使用目的 在前端开发初期&#xff0c;后端 API 可能还未完成&#xff0c;json-server 可以快速创建模拟的 RESTful API&#xff0c;帮助前端开发者进行开发和测试。 二.安装 npm install json-server //局部安装npm i json-server -g //全局安装 三.使用教程 1.准备一…...

半波正弦信号的FFT变换

目录 Hello&#xff0c; 大家好&#xff0c;这一期我们谈谈半波正弦信号的FFT变化长什么样子。本文硬件使用GFARM02硬件模块[1]&#xff0c;文章最后有其淘宝链接。核心器件为STM32F103RCT6&#xff0c;为Cortex-M3核&#xff0c;采用的CMSIS版本为CMSIS_5-5.6.0。 如图1所示&…...

Python数据分析NumPy和pandas(二十三、数据清洗与预处理之五:pandas的分类类型数据)

pandas的分类类型数据&#xff08;Categorical Data&#xff09; 这次学习使用Categorical Data&#xff0c;在某些 pandas 操作中使用分类类型能实现更好的性能和减少内存使用。另外还学习一些工具&#xff0c;这些工具有助于在统计和机器学习应用程序中使用分类数据。 一.背…...

redis源码系列--(二)--multi/exec/eval命令执行流程

本文主要记录multi/exec、eval、redis执行lua脚本的源码流程 redis在exec之前&#xff0c;所有queued的命令是没有执行的&#xff0c;&#xff01;&#xff01;&#xff01;在执行时会通过检测client是否被打上CLIENT_DIRTY_CAS标记来判断[watch后,exec时]时间段内是否有key被…...

【力扣打卡系列】移动零(双指针)

坚持按题型打卡&刷&梳理力扣算法题系列&#xff0c;语言为go&#xff0c;Day19 移动零&#xff08;双指针&#xff09; 题目描述 解题思路 p和q同时从起点移动&#xff0c;p每次都&#xff0c;q仅在交换时&#xff0c;p遇到非零数时与p值交换&#xff01;&#xff01;…...

无源元器件-电容选型参数总结

🏡《总目录》 目录 1,概述2,电容选型参数2.1,电容值(Capacitance)2.2,额定电压(Rated Voltage )2.3,外观(Appearance)2.4,尺寸(Dimension)2.5,耐压(Voltage Proof)2.6,绝缘电阻(Insulation Resistance)2.7,耗散因子或耗散系数(IQ or Dissipation Facto…...

Linux下的socket编程

概述 下面是一个通用的server端程序源码&#xff0c;用于实现两个client之间的通信。 功能 1、接收user的命令cmd消息&#xff0c;并将cmd消息发送到dev&#xff1b; 2、接收dev的应答ack消息&#xff0c;并将ack消息发送到user&#xff1b; 架构实现 通过6个线程实现。 …...

【算法】Floyd多源最短路径算法

目录 一、概念 二、思路 三、代码 一、概念 在前面的学习中&#xff0c;我们已经接触了Dijkstra、Bellman-Ford等单源最短路径算法。但首先我们要知道何为单源最短路径&#xff0c;何为多源最短路径 单源最短路径&#xff1a;从图中选取一点&#xff0c;求这个点到图中其他…...

iOS SmartCodable 替换 HandyJSON 适配记录

前言 HandyJSON群里说建议不要再使用HandyJSON&#xff0c;我最终选择了SmartCodable 来替换&#xff0c;原因如下&#xff1a; 首先按照 SmartCodable 官方教程替换 大概要替换的内容如图&#xff1a; 详细的替换教程请前往&#xff1a;使用SmartCodable 平替 HandyJSON …...

使用 axios 拦截器实现请求和响应的统一处理(附常见面试题)

在现代前端开发中&#xff0c;我们经常需要向服务器发送 HTTP 请求&#xff0c;并根据响应内容做不同的处理。axios 是一个流行的 HTTP 库&#xff0c;提供了 拦截器 功能&#xff0c;可以在请求和响应阶段插入自定义逻辑&#xff0c;这使得我们在处理认证、错误提示等场景时更…...

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造&#xff0c;完美适配AGV和无人叉车。同时&#xff0c;集成以太网与语音合成技术&#xff0c;为各类高级系统&#xff08;如MES、调度系统、库位管理、立库等&#xff09;提供高效便捷的语音交互体验。 L…...

Docker 离线安装指南

参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性&#xff0c;不同版本的Docker对内核版本有不同要求。例如&#xff0c;Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本&#xff0c;Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...

Opencv中的addweighted函数

一.addweighted函数作用 addweighted&#xff08;&#xff09;是OpenCV库中用于图像处理的函数&#xff0c;主要功能是将两个输入图像&#xff08;尺寸和类型相同&#xff09;按照指定的权重进行加权叠加&#xff08;图像融合&#xff09;&#xff0c;并添加一个标量值&#x…...

JDK 17 新特性

#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持&#xff0c;不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的&#xff…...

CRMEB 框架中 PHP 上传扩展开发:涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云

目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...

【论文阅读28】-CNN-BiLSTM-Attention-(2024)

本文把滑坡位移序列拆开、筛优质因子&#xff0c;再用 CNN-BiLSTM-Attention 来动态预测每个子序列&#xff0c;最后重构出总位移&#xff0c;预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵&#xff08;S…...

C# 求圆面积的程序(Program to find area of a circle)

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

用机器学习破解新能源领域的“弃风”难题

音乐发烧友深有体会&#xff0c;玩音乐的本质就是玩电网。火电声音偏暖&#xff0c;水电偏冷&#xff0c;风电偏空旷。至于太阳能发的电&#xff0c;则略显朦胧和单薄。 不知你是否有感觉&#xff0c;近两年家里的音响声音越来越冷&#xff0c;听起来越来越单薄&#xff1f; —…...

【Go语言基础【12】】指针:声明、取地址、解引用

文章目录 零、概述&#xff1a;指针 vs. 引用&#xff08;类比其他语言&#xff09;一、指针基础概念二、指针声明与初始化三、指针操作符1. &&#xff1a;取地址&#xff08;拿到内存地址&#xff09;2. *&#xff1a;解引用&#xff08;拿到值&#xff09; 四、空指针&am…...

深度学习水论文:mamba+图像增强

&#x1f9c0;当前视觉领域对高效长序列建模需求激增&#xff0c;对Mamba图像增强这方向的研究自然也逐渐火热。原因在于其高效长程建模&#xff0c;以及动态计算优势&#xff0c;在图像质量提升和细节恢复方面有难以替代的作用。 &#x1f9c0;因此短时间内&#xff0c;就有不…...