Web动画(lottie篇)

一、Lottie简介

Lottie是一个库,可以解析使用AE制作的动画(需要用bodymovin导出为json格式),支持web、ios、android和react native。在web侧,lottie-web库可以解析导出的动画json文件,并将其以svg或者canvas的方式将动画绘制到我们页面中

总的来说,

  • Lottie通过读取json文件信息实现动画效果。
  • json信息包括动画长度、宽度、动画资源、图层信息等,这些属性阐述了动画该做什么、该怎么做。

1.1 lottie的优点

Lottie方法方案是由设计师出动画,导出为json,给前端播放。所以,使用Lottie方案的好处在于:

  • 动画由设计使用专业的动画制作工具Adobe After Effects来实现,使动画实现更加方便,动画效果也更好;
  • 前端可以方便的调用动画,并对动画进行控制,减少前端动画工作量;
  • 设计制作动画,前端展现动画,专业人做专业事,分工合理;
  • 卖家秀即买家秀,还原程度百分之百;
  • 使用lottie方案,json文件大小会比gif文件小很多,性能也会更好。
  • 支持跨平台,开发成本较低,一套Lottie动画可以在Android/IOS/Web多端使用。
  • 性能好,端上除了解析json,基本没有其他耗性能的操作;并且相比于需要存储较多图片的帧动画,Lottie可以节省比较多的内存空间。

二、使用方法(附基本代码)

2.1 前期准备

  1. 下载安装** After Effects **

  1. 在AE上制作动画
  2. 安装插件Bodymovin,并使用插件导出,导出的是json格式的文件结构

image.png

  1. 使用【lottie-web】依赖读取该文件导出的json 格式的内容 便引入了该lottie动画

2.2 基本代码

<template><div class="lottie_page"><div id="lottie"></div></div>
</template>
<script>
import lottie from 'lottie-web';  // 引入lottie 库
import * as animationData from '@/assets/lottie/data.json'; // 引入素材文件
export default {data() {return {};},mounted() {this.lot = lottie.loadAnimation({container: document.getElementById('lottie'),renderer: 'svg',loop: false,autoplay: false,animationData: animationData.default});},
};
</script>

所以,在网页上制作动画就是这么简单,只需少量的代码便可以实现!!

三、效果

动画4.gif

四、参考

  1. 原生插件 用AE导出json | LottieFiles plugin | 原生插件
  2. bodymovie插件 https://pan.baidu.com/s/1vcM86DyoZjefwCN5_-GqIA?pwd=2301&at=1711347005762
  3. 使用 如何在vue中使用Lottie - 掘金

附加:进阶玩法

第一阶段

整体元素的简单的播放暂停设置播放进度

第二阶段

多个元素各自有自己的播放的规律

  1. AE中有一个总合成,不同元素之间有一个单独的合成
  2. 导出多个不同元素的json文件
  3. 在vue中为每个json文件定义一个标签,并挂载事件
  4. 单独控制元素的播放规律

第三阶段

多个元素有个自己动态的播放规律

由于 lottie是用过 json 来控制动画的,而前端与后端交互最常见的格式是什么?

JSON!!

因此,可以从后端获取数据之后,在前端重新拼接到json中,就可以实现动态的动画。

举个栗子🌰:

  1. 拼多多翻牌抽奖(动态设置金额,指定选中翻牌)

image.png

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

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

相关文章

linux time使用

关于linux内 时间获取的数据结构和api函数比较&#xff0c;看具体需要什么样的了 一般只是需要获取系统时间计算下时间差值&#xff0c; 毫秒的 static int time_flag 0; ktime_t time_now_ms ktime_get(); static ktime_t time_last_ms ktime_get(); ktime_t…

electron调试

electron 调试 electron 的调试分两步&#xff0c;界面的调试&#xff0c;和主进程的调试。 界面调试类似浏览器F12&#xff0c;可是调试不到主进程。 主进程调试有vscode、命令行提示和外部调试器调试。 本篇记录的练习是vscode调试。命令行和外部调试器的方式可以参考官网&a…

通过NPOI读取Excel内容导入到数据库

系统中经常用需要读取Excel文件中的数据&#xff0c;导入到数据库&#xff0c;下面是一个示例。 vs&#xff1a;2022 框架&#xff1a;abpvnext 3.1 把Excel中的数据导入到数据库 /// <summary> /// 导入 /// </summary> /// <param name"formFile"…

CJS与ESM:CJS

模块化方案 历史上&#xff0c;JavaScript 一直没有模块&#xff08;module&#xff09;体系&#xff0c;无法将一个大程序拆分成互相依赖的小文件&#xff0c;再用简单的方法拼装起来。其他语言都有这项功能&#xff0c;比如 Ruby 的require、Python 的import&#xff0c;甚至…

PEFT LoRA 介绍(LoRA微调使用的参数及方法)

一 PEFT LoRA 介绍 官网简介如下图&#xff1a; 翻译过来是&#xff1a;低秩自适应(LoRA)是一种PEFT方法&#xff0c;它将一个大矩阵在注意层分解成两个较小的低秩矩阵。这大大减少了需要微调的参数数量。 说的只是针对注意力层&#xff0c;其实我自己平时微调操作注意力层多…

nacos2.x作为配置中心和服务注册和发现以及springcloud使用

目录 一、nacos是什么 二、windows下安装配置nacos 1、准备 2、安装nacos 3、配置nacos 4、启动并且访问nacos 三、springcloud使用nacos作为配置中心 四、springcloud使用nacos进行服务注册与发现 五、springcloud使用nacos进行服务消费 六、nacos的一些高级配置 1…

Ubuntu上编译多个版本的frida

准备工作 Ubuntu20(WSL) 略 安装依赖 sudo apt update sudo apt-get install build-essential git lib32stdc-9-dev libc6-dev-i386 -y nodejs 去官网[1]下载nodejs&#xff0c;版本的话我就选的20.15.1&#xff1a; tar -xf node-v20.15.1-linux-x64.tar.xz 下载源码 …

AbutionGraph时序(流式)图数据库开发文档地址

AbutionGraph-时序(流式)图数据库&#xff0c;官方开发文档(API)地址&#xff1a; http://www.thutmose.cn

JavaSE从零开始到精通(九) - 双列集合

1.前言 Java 中的双列集合主要指的是可以存储键值对的集合类型&#xff0c;其中最常用的包括 Map 接口及其实现类。这些集合允许你以键值对的形式存储和管理数据&#xff0c;提供了便捷的按键访问值的方式。 2. HashMap HashMap 是基于哈希表实现的 Map 接口的类&#xff0c…

lua 游戏架构 之 游戏 AI (七)ai_dead

定义一个名为ai_dead的类&#xff0c;继承自ai_base类。这个类用于处理游戏中AI在死亡状态下的行为逻辑。以下是对代码的具体解释&#xff1a; 1. **引入基类**&#xff1a; - 使用require函数引入ai_base类&#xff0c;作为基础类。 2. **定义ai_dead类**&#xff1a; …

java算法day23

java算法day23 121买卖股票的最佳时机55 跳跃游戏45 跳跃游戏Ⅱ763划分子母区间 121买卖股票的最佳时机 最容易想的应该就是两个for暴力枚举。但是超时 本题用贪心做应该是最快的。 先看清楚题&#xff0c;题目要求在某一天买入&#xff0c;然后在某一天卖出&#xff0c;要求…

MarkTool集合篇

MarkTool目前包含以下几种工具 1、TCP客户端 2、TCP服务端 3、UDP客户端 4、Web客户端 5、Web服务端 6、串口网口 7、PLC 8、获取本机设备 9、Log 10、密钥 11、系统设置 11-1、基本设置 11-2、角色设置 11-3、用户设置 11-4、log记录 开启软件需要找我解密&#…

S7-1200PLC通过111报文和EPOS模式实现位置轴轴控功能(FB284封装)

EASY_SINA_POS的详细使用介绍请参考下面文章链接: S7-1200PLC使用标准报文111和EPOS模式实现V90 PN总线伺服定位(Easy_SINA_Pos)_西门子sinapos-CSDN博客文章浏览阅读132次。文章浏览阅读7k次。先简单说下如何获取FB284,一般有2种方法,Startdrive软件可以操作大部分西门子的…

PostgreSQL使用(四)——数据查询

说明&#xff1a;对于一门SQL语言&#xff0c;数据查询是我们非常常用的&#xff0c;也是SQL语言中非常大的一块。本文介绍PostgreSQL使用中的数据查询&#xff0c;如有一张表&#xff0c;内容如下&#xff1a; 简单查询 --- 1.查询某张表的全部数据 select * from tb_student…

【Qt】QLabel常用属性相关API

QLabel是Qt框架中用于显示文本或图案的小部件。在Qt应用程序中&#xff0c;QLabel是用来呈现静态文本或图像给用户的重要部分 QLabel属性陈列 属性说明textQLabel中的文本内容textFormat 文本的格式 Qt::PlainText 纯文本Qt::RichText 富文本Qt::MarkdownText markdown…

管理和监控 Oracle 数据库中的会话和进程,以及终止特定的会话

select username,count(username) from v$session where username is not null group by username;• 作用: 统计每个用户的当前会话数量。 • 介绍: 从 v$session 视图中选择 username 和 username 的计数&#xff0c;并对不为空的 username 进行分组。 SELECT sid, serial#,…

IntelliJIDEA------简介

IntelliJ IDEA 14是java语言开发的集成环境,IntelliJ在业界被公认为最好的java开发工具之一&#xff0c;尤其在智能代码助手、代码自动提示、重构、J2EE支 持、Ant、JUnit、CVS整合、代码审查、 创新的GUI设计等方面的功能可以说是超常的。 IntelliJ IDEA特色功能 IDEA所提倡的…

【数据结构】排序算法(冒泡排序、插入排序、希尔排序、选择排序、堆排序、计数排序)

生命不可能有两次&#xff0c;但许多人连一次也不善于度过。&#x1f493;&#x1f493;&#x1f493; 目录 ✨说在前面 &#x1f34b;知识点一&#xff1a;排序的概念和应用 • &#x1f330;1.排序及其概念 • &#x1f330;2.排序的应用 • &#x1f330;3.常见的排序算…

php 箭头函数详解

PHP 的箭头函数&#xff08;也称为匿名函数或闭包函数&#xff09;是一种简洁的定义单表达式函数的方法。这种语法是从 PHP 7.4 版本开始引入的&#xff0c;它使得创建简短的一次性使用的函数变得更加方便。 基本语法 箭头函数的基本语法如下&#xff1a; fn($parameters) &…

qt做的分页控件

介绍 qt做的分页控件 如何使用 创建 Pagination必须基于一个QWidget创建&#xff0c;否则会引发错误。 Pagination* pa new Pagination(QWidget*);设置总页数 Pagination需要设置一个总的页数&#xff0c;来初始化页码。 pa->SetTotalItem(count);设置可选的每页数量…