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,一经查实,立即删除!

相关文章

electron调试

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

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…

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…

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

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

qt做的分页控件

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

前端养成记-实现一个低配版简单版本的vue3表单自定义设计组件

简介&#xff1a; 通过使用了最新的vue3,vite2,TypeScript等主流技术开发&#xff0c;并配合使用vuedraggable 插件以及antd design vue 组件库实现低配版本的自定义表单设计组件&#xff1b; 项目地址&#xff1a;https://gitee.com/hejunqing/vue3-antdv-generator

PyTorch模型训练步步详解:从零开始构建深度学习流程

P y T o r c h 训练模型流程图 PyTorch训练模型流程图 P y T orc h 训练模型流程图

非凸T0算法,如何获取超额收益?

什么是非凸 T0 算法&#xff1f; 非凸 T0 算法基于投资者持有的股票持仓&#xff0c;利用机器学习等技术&#xff0c;短周期预测&#xff0c;全自动操作&#xff0c;抓取行情波动价差&#xff0c;增厚产品收益。通过开仓金额限制、持仓时长控制等&#xff0c;把控盈亏风险&…

学习笔记:MySQL数据库操作5

1. 触发器&#xff08;Triggers&#xff09; 触发器是数据库的一种高级功能&#xff0c;它允许在执行特定数据库操作&#xff08;如INSERT、UPDATE、DELETE&#xff09;之前或之后自动执行一段代码。 1.1 创建商品和订单表 商品表&#xff08;goods&#xff09; gid: 商品编号…

会话存储、本地存储,路由导航守卫、web会话跟踪、JWT生成token、axios请求拦截、响应拦截

1、会话存储、本地存储 前端浏览器中存储用户信息&#xff0c;会话存储、本地存储、cookie 会话存储&#xff08;sessionStorage&#xff09;&#xff1a;会话期间存储&#xff0c;关闭浏览器后&#xff0c;数据就会销毁 sessionStorage.setItem("account",resp.d…

反射型与dom型的xss的区别【源码分析】

反射型 XSS 和 DOM 型 XSS 都属于跨站脚本攻击 (XSS) 的类型&#xff0c;它们的共同点是均能通过注入恶意脚本在用户浏览器中执行&#xff0c;不同点是dom型xss不经过服务器&#xff0c;而反射型是经过服务器的。但是&#xff0c;它们在攻击方式、执行过程和防御措施上有所不同…