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

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

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

上一节,分享了 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设计#

相关推荐

如何为MySQL服务器和客户机启用SSL?

用户想要与MySQL服务器建立一条安全连接时,常常依赖VPN隧道或SSH隧道。不过,获得MySQL连接的另一个办法是,启用MySQL服务器上的SSL封装器(SSLwrapper)。这每一种方法各有其...

OpenVPN客户端配置_openvpn客户端配置文件解析

...

k8s 证书问题排查_k8s dashboard 证书

从去年开始一些老项目上陆陆续续出现一些列的证书问题,(证书原理这里就不说了,官方文档一堆)多数刚开始的表现就是节点的kubelet服务起不来,节点状态NotReady表现日志如下failed...

企业级网络互通方案:云端OpenVPN+爱快路由器+Win11互联实战

企业级网络互通方案:OpenVPN搭建公有云+爱快路由器+Win11三地互联实战指南「安全高效」三地局域网秒变局域网实施环境说明...

OpenV** Server/Client配置文件详解

Server配置详解...

接口基础认知:关键信息与合规前提

1.核心技术参数(必记)...

S交换机通过SSH登录设备配置示例(RADIUS认证+本地认证独立)

说明:●本示例只介绍设备的认证相关配置,请同时确保已在RADIUS服务器上做了相关配置,如设备地址、共享密钥、创建用户等配置。●通过不同的管理域来实现RADIUS认证与本地认证两种方式同时使用,两...

SSL证书如何去除私钥密码保护_ssl证书怎么取消

有时候我们在生成证书的时候可以加入了密码保护。然后申请到证书安装到了web服务器。但是这样可能会带来麻烦。每次重启apache或者nginx的时候,都需要输入密码。那么SSL证书如何去除私钥密码保护。...

SSL证书基础知识与自签名证书生成指南

一、证书文件类型解析...

S交换机通过SSH登录设备配置示例(RADIUS认证)

说明:本示例只介绍设备的认证相关配置,请同时确保已在RADIUS服务器上做了相关配置,如设备地址、共享密钥、创建用户等配置。假设已在RADIUS服务器上创建了用户名yc123,密码test#123。对...

HTTPS是什么?加密原理和证书。SSL/TLS握手过程

秘钥的产生过程非对称加密...

HTTPS TLS握手流程_进行tls握手

1.客户端向服务器发送`ClientHello`消息,包括支持的TLS版本、加密套件、随机数等信息。2.服务器收到`ClientHello`消息后,解析其中的信息,并根据配置选择一个加密套件。3....

Spring Boot 单点登录(SSO)实现_spring boot 单点登录jwt

SpringBoot单点登录(SSO)实现全指南单点登录(SingleSign-On,SSO)是一种身份验证机制,允许用户使用一组凭证登录多个相关但独立的系统。在微服务架构和企业级系统中,SS...

源码分享:在pdf上加盖电子签章_pdf如何加盖电子公章

在pdf上加盖电子签章,并不是只是加个印章图片,。而是要使用一对密钥中的私钥对文件进行签字。为啥要用私钥呢?很简单,因为公钥是公开的,其他人才可以用公钥为你证明,这个文件是你签的。这就是我们常说的:私...

微信支付商户API证书到期 怎么更换

微信支付商户API证书到期更换是一个非常重要的操作,需要仔细按照流程进行。如果证书过期,所有通过API的支付、退款等操作都会失败,将直接影响您的业务。请按照以下详细步骤进行操作:重要前提:分清...