上一节,分享了 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 文件特点
- 跨平台支持:Lottie 动画可以在多种平台上运行,包括 iOS、Android、React Native、Web 等。
- 文件小:由于 Lottie 文件是基于矢量图形的,所以即使动画非常复杂,文件大小也相对较小。
- 可编程:Lottie 动画可以通过代码进行控制,比如改变动画的速度、方向、进度等,甚至可以与用户交互。
- 性能好:因为 Lottie 动画是在运行时渲染的,所以它们通常比传统的位图动画更加流畅和高效。
- 易用性:有许多库和框架可以帮助你快速将 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。
(汇报完毕,感谢收看,收藏+点赞!)