百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

Flet 学习时: Lottie 和 Rive 动画,更多动画展现,更精彩,更方便

haoteby 2025-02-14 23:20 8 浏览

上一节,分享了 Flet 的 AnimatedSwitcher 动画,今天一口气把 Flet 余下的2个动画 Lottie 和 Rive 动画控制器 分享给大家。3个动画融合使用,让App界面酷炫起来!

一、Lottie 动画

(一)程序及演示

显示来自 Lottie 文件(URL 或本地文件)的动画。

注意:上面代码 Lottie 属性 src =
https://raw.githubusercontent.com/xvrh/lottie-flutter/master/example/assets/Mobilo/A
.json

这里不是 .jpg .gif .png 等常规图片格式,这是 json 格式的文件。Lottie 文件是一种轻量级的动画文件格式,它基于 JSON 的文本文件,易于创建、编辑、解析和缩小。

Lottie 动画最初是由 Airbnb 开发并开源的,目的是让设计师和开发者能够更方便地将精美的动画集成到他们的项目中。Lottie 文件通常由设计工具(如 Adobe After Effects)导出,通过 Bodymovin 插件可以将 After Effects 项目转换为 Lottie 兼容的 JSON 格式。

(二) Lottie 文件特点

  1. 跨平台支持:Lottie 动画可以在多种平台上运行,包括 iOS、Android、React Native、Web 等。
  2. 文件小:由于 Lottie 文件是基于矢量图形的,所以即使动画非常复杂,文件大小也相对较小。
  3. 可编程:Lottie 动画可以通过代码进行控制,比如改变动画的速度、方向、进度等,甚至可以与用户交互。
  4. 性能好:因为 Lottie 动画是在运行时渲染的,所以它们通常比传统的位图动画更加流畅和高效。
  5. 易用性:有许多库和框架可以帮助你快速将 Lottie 动画集成到你的应用程序或网站中,而且这些库通常都有良好的文档和支持社区。

(三)Lottie 动画相关属性

animate

动画是否应自动播放。默认值为 True。

background_loading

动画是否应在后台加载。

filter_quality

图像图层的质量。值为 FilterQuality 枚举类型。默认为 LOW。

fit

如何将 Lottie 组合置入布局期间分配的空间中。属性值为 ImageFit 枚举类型。

repeat

动画是否应在循环中重复播放。默认值为 True。如果 animate 为 False,则无效。

reverse

动画是否应以反向方式播放(从开头到结尾,然后从结尾连续到开头)。默认值为 False。如果 animate 和 repeat 均为 False,则无效。

src

Lottie 文件的来源。可以是 URL 或本地的资产文件。

src_base64

Lottie 文件的 base64 编码字符串。必须提供此项或 src。如果两者都提供,则优先使用 src_base64。

二、Rive 动画

(一)程序及演示

从 Rive 文件(URL 或本地文件)中显示动画。

注意:上面代码 Lottie 属性 src =
https://cdn.rive.app/animations/vehicles.riv ,这里也不是 .jpg .gif .png 等常规图片格式,这是
Rive 文件

(二)Rive 文件的概念

Rive 文件是一种用于存储交互式矢量动画的数据格式,这些动画可以在各种平台上播放。Rive 是由一家名为 Rive 的公司开发的,这家公司专注于创建高效、轻量级且易于使用的动画工具。Rive 动画文件通常具有 .riv 扩展名,并且可以在 Rive 播放器中运行,该播放器有多种语言和平台的支持,包括 Web (JavaScript), iOS, Android, Flutter, Unity, 和 .NET。

Rive 文件包含矢量图形和动画数据,这意味着它们可以被缩放到任意大小而不失真,并且通常比位图动画文件要小得多。Rive 动画可以包含多个状态机,允许开发者和设计师创建复杂的交互逻辑而无需编写额外的代码。这使得 Rive 成为移动应用、游戏和其他需要高性能动画的项目的理想选择。

Rive 还提供了一个在线编辑器,用户可以直接在浏览器中创建和编辑动画。

(三)Rive 动画相关属性

alignment

动画的对齐方式。

artboard

要使用的画板的名称。如果不指定,将使用提供的 src 的默认画板。

enable_antialiasing

是否启用抗ialiasing渲染。默认为 True。

fit

动画的适应方式。

placeholder_content

加载 Rive 时要显示的控件。

src

Rive 动画的源文件。可以是 URL 或本地资产文件。

use_artboard_size

是否使用画板的固有大小,即画板定义的绝对大小,或者根据可用约束大小父控件(大小由父控件确定)。默认为 False。

(汇报完毕,感谢收看,收藏+点赞!)

#python# #flet# #程序# #UI设计#

相关推荐

蜗牛矿机改NAS后远程访问教程,花生壳盒子完美解决

今年不少烧友都在玩星际蜗牛的机器,,我也跟风入手一台,用星际蜗牛改装了一台NAS,在星际蜗牛上安装了多个版本的NAS系统,各方面都不错,就是远程访问功能实现不了。由于本地运营商不提供公网IP,就只能考...

不吹不黑,揭秘网工提升效率的7大神器!

作为一个网络工程师,在日常工作中肯定会使用许多方便的实用软件来提高效率,下面就简单介绍一下网络工程师常用的7种软件。01、FileZilla...

有线网间歇性断网?3个步骤帮你解决 90% 有线网中断问题

有线网络偶尔中断可能由硬件故障、网络设置、线路问题或外部干扰等多种因素导致。一、常见原因及验证方法1.硬件设备...

「这 25 年我被天气 PUA 的日常」

翻出手机相册里每年6月拍的天空,白到发亮的云层下总配着同一句文案:"热到裂开"。掐指一算被高温暴打的四分之一个世纪里,每个夏天都在上演《关于我和天气互相折磨的那些年》。2003年绝对...

数码爱好者必备工具:POWER-Z KM001C多功能测试仪

作为一名数码类爱好者,平时要测试手机、平板、充电器、充电宝等等电子产品,一款好用的测试工具尤为重要。近期,通过充电头网购入了一款POWER-ZKM001C多功能测试仪,主要用来平日里测试快充头和充电...

监控摄像头常用测试命令大全(摄像头测试项目)

以下是监控摄像头在Linux系统中常用的测试命令大全,涵盖设备检测、参数调整、视频录制、网络监控等方面,结合多个来源的信息整理而成:一、摄像头设备检测与调用1.查看摄像头设备①`ls/dev/v...

中级消防设施操作员考试-计算机基础知识学习笔记

消防设施操作员模块八计算机基础课程摘要消防设施操作员模块八主要介绍了计算机基础知识,包括计算机系统的组成和功能、硬件和软件、输入输出设备、外存储器、内存条、中央处理器、机箱等硬件部分,以及系统软件和应...

今日揭秘:上网行为监控软件是如何监控的?7个功能图文介绍

同事A:“哎,你们听说了吗?隔壁部门小王昨天上班刷短视频被领导抓包了!”同事B:“真的假的?公司不是没装摄像头吗?怎么知道的?”...

USB详细介绍(usb简介)

USB概念1.概念USB是通用串行总线(UniversalSerialBus),分为HOST/DEVICE两个角色,所有的数据传输都由主机主动发起,而设备只是被动的负责应答。例如,在读数据时,U...

程序员必备,Fiddler和spy-debugger的远程调试手机APP

背景笔者从事Web开发,不论是PC端还是APP端,调试抓包都是必不可少的环节,懂前端的人都知道,PC端调试非常方便,Chrome或者火狐等浏览器等都自带了非常方便且易于使用的开发者工具,便于我们抓包调...

通用无线网络破解抓包跑包教程(wifi抓包跑包教程)

由于很多的信号很强,但是后面都没有带WPS,怎么办呢,现在我给大家介绍一个简单的抓包跑字典的办法来解决这个难题,首先搜索信号,水滴,关注我的这个应该都会了吧!选择一个信号,点击启动,记住不是点...

抓包神器wireshark安装保姆级教程

简介当我们进行网络抓包时,我们通常需要借助其他的工具进行抓取,比如Charles,fiddler等,今天我们给大家介绍一款同样非常流行的抓包工具——wireshark,本文将介绍wireshark的安...

别让资料拖后腿!STM32开发‘作弊包’开源,工程师直呼内行!

一、开发环境与编译工具...

背完这套 Java 面试八股文,自动解锁面试牛逼症被动技能

前言国内的互联网面试,恐怕是现存的、最接近科举考试的制度。很多人对八股文都嗤之以鼻,认为无法衡量出一个程序员的真是水平。还有一部分人则是深恶痛绝,因为实在太难背了。但是国内大环境如此,互联网IT行...

混合云的多活架构指南(混合云架构图)

文/董晓聪吕亚霖在之前的《如何正确选择多云架构?》一文中介绍了混合云(广义的多云)的诸多架构以及各自的优势,本篇会重点来介绍下混合云下的多活架构。...