当前位置: 首页 > 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;这使得我们在处理认证、错误提示等场景时更…...

使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式

一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明&#xff1a;假设每台服务器已…...

Java 语言特性(面试系列1)

一、面向对象编程 1. 封装&#xff08;Encapsulation&#xff09; 定义&#xff1a;将数据&#xff08;属性&#xff09;和操作数据的方法绑定在一起&#xff0c;通过访问控制符&#xff08;private、protected、public&#xff09;隐藏内部实现细节。示例&#xff1a; public …...

基于ASP.NET+ SQL Server实现(Web)医院信息管理系统

医院信息管理系统 1. 课程设计内容 在 visual studio 2017 平台上&#xff0c;开发一个“医院信息管理系统”Web 程序。 2. 课程设计目的 综合运用 c#.net 知识&#xff0c;在 vs 2017 平台上&#xff0c;进行 ASP.NET 应用程序和简易网站的开发&#xff1b;初步熟悉开发一…...

PPT|230页| 制造集团企业供应链端到端的数字化解决方案:从需求到结算的全链路业务闭环构建

制造业采购供应链管理是企业运营的核心环节&#xff0c;供应链协同管理在供应链上下游企业之间建立紧密的合作关系&#xff0c;通过信息共享、资源整合、业务协同等方式&#xff0c;实现供应链的全面管理和优化&#xff0c;提高供应链的效率和透明度&#xff0c;降低供应链的成…...

渗透实战PortSwigger靶场-XSS Lab 14:大多数标签和属性被阻止

<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet&#xff1a; https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...

vue3 定时器-定义全局方法 vue+ts

1.创建ts文件 路径&#xff1a;src/utils/timer.ts 完整代码&#xff1a; import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...

令牌桶 滑动窗口->限流 分布式信号量->限并发的原理 lua脚本分析介绍

文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结&#xff1a; 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析&#xff1a; 实际业务去理解体会统一注…...

零基础设计模式——行为型模式 - 责任链模式

第四部分&#xff1a;行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习&#xff01;行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想&#xff1a;使多个对象都有机会处…...

3-11单元格区域边界定位(End属性)学习笔记

返回一个Range 对象&#xff0c;只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意&#xff1a;它移动的位置必须是相连的有内容的单元格…...

【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的“no matching...“系列算法协商失败问题

【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的"no matching..."系列算法协商失败问题 摘要&#xff1a; 近期&#xff0c;在使用较新版本的OpenSSH客户端连接老旧SSH服务器时&#xff0c;会遇到 "no matching key exchange method found"​, "n…...