Flutter笔记:美工设计.导出视频到RIVE

news2025/1/12 1:58:31
Flutter笔记
美工设计.导出视频到RIVE

- 文章信息 - Author: 李俊才 (jcLee95)
Visit me at CSDN: https://jclee95.blog.csdn.net
My WebSitehttp://thispage.tech/
Email: 291148484@163.com.
Shenzhen China
Address of this article:https://blog.csdn.net/qq_28550263/article/details/136549982
HuaWei:https://bbs.huaweicloud.com/blogs/426809

flutter-ljc


【介绍】:本文介绍导出视频到RIVE。

(https://jclee95.blog.csdn.net/)

推荐阅读:

  • 《Flutter Widgets Easier组件库使用消息吐丝(Notify Toasts)》:https://jclee95.blog.csdn.net/article/details/138425637
    example_5MJrSKGAUZ
  • 《Flutter Widgets Easier组件库使用弹窗》:https://jclee95.blog.csdn.net/article/details/138342949

example_QCpD0oPAWg

example_XXgNIBMhxU


1. 概述与准备

1.2 什么是Rive

Rive

图片连接地址:https://rive.app/
Flutter Pub中的Rive库:https://pub.dev/packages/rive

Rive 是一个强大的设计和动画工具,专为开发者和设计师创建交互式图形和动画而设计。它提供了一个平台,使设计师可以直接构建功能性图形,这些图形具有丰富的交互性和动画效果,从而极大地缩短了从设计到开发的交接时间。Rive 的核心特点是其能够在不牺牲设计质量的前提下,提高开发效率和产品质量。Rive具有以下特点:

  1. 交互性设计与动画工具:Rive 提供了一套熟悉的设计和动画工具,结合其创新的状态机(State Machine),允许设计师创建复杂的交互动画。这些工具不仅直观易用,而且功能强大,支持从简单的动画到复杂的用户交互。

  2. 跨平台兼容性:Rive 支持广泛的平台,包括 Web、iOS、macOS、Android、Windows 和 Flutter 等,确保动画和交互可以无缝集成到各种应用和游戏中。这一跨平台的特性使得 Rive 成为多平台项目的理想选择。

  3. 开源运行时:Rive 提供开源运行时,允许开发者根据需要选择无代码或全代码的方式来嵌入交互动画。这种灵活性使得 Rive 不仅适用于需要高度定制的项目,也适用于快速开发的场景。

  4. 实时矢量图形渲染:Rive 的渲染器是一个在实时矢量图形领域的重大突破,能够在屏幕上绘制大量的矢量图形,同时保持120 fps的完美动画质量。这对于需要高性能动画的应用和游戏尤为重要。

  5. 社区和支持:Rive 拥有一个活跃的社区,设计师和开发者可以在此交流经验,分享文件,并通过论坛和Discord频道获得支持。此外,Rive 还提供专业的客户支持和丰富的学习资源,帮助用户充分利用其功能。

1.3 Adobo系列工具

本文需要用到的Adobo系列工具包括两个,一个是Adobo After Effect(AE);另外一个是Adobe Media Encoder(ME)。

Adobe After Effects是一款专业的视频编辑和动画制作软件,它可以创建和编辑矢量动画。然而,它并不直接支持将视频文件导出为矢量动画。
你可以使用Bodymovin插件(现在已经更名为LottieFiles)来将After Effects中的动画导出为Lottie(JSON)文件,这是一种矢量动画格式,可以在Web和移动应用中使用。

Adobe Media Encoder(ME)可以为AE提供需要的解码器。
在这里插入图片描述

2. 安装AE插件bodymovin

2.1 下载zxp安装器

需要zxp安装器才能安装:https://aescripts.com/learn/zxp-installer/bodymovin,然后选择bodymovin.zxp文件进行安装。

直接将zxp文件拖拽进安装器。如果之前安装过bodymovin,会覆盖掉原来的版本。

2.1 安装Bodymovin插件

首先,你需要下载Bodymovin插件。你可以在这里:https://aescripts.com/bodymovin/下载插件。

3. 用法

3.1 Bodymovin插件窗口打开方法

打开一个 Adobe After Effect 项目,点击 Window - Extensions -Bodymovin(窗口-扩展-bodymovin),出现如图2所示对话框

在这里插入图片描述

3.2 导入视频到AE项目中

  1. 打开After Effects:首先,打开Adobe After Effects软件。
  2. 创建新项目:如果你还没有创建项目,可以通过选择File > New > New Project来创建一个新项目。
  3. 导入视频:在项目面板中,右键点击空白区域,然后选择 Import > File。在弹出的文件浏览器中,选择你想要导入的视频文件,然后点击Open。
  4. 创建新合成:在项目面板中,右键点击导入的视频文件,然后选择New Comp from Selection。这将创建一个新的合成,合成的尺寸和帧速率将根据你的视频文件自动设置。
    现在,你已经将视频导入到After Effects中,你可以在合成中编辑和添加动画。

3.3 通过视频创建“合成”

在这里插入图片描述

3.4 在Bodymovin插件窗口生成JSON文件

在这里插入图片描述
在这里插入图片描述

3.4 使用LottieFiles:

你可以在LottieFiles网站(https://lottiefiles.com/)上上传你的Lottie文件,然后下载为JSON格式,这就是你的 矢量动画文件

请注意,虽然 Lottie 是一种矢量动画格式,但它并不是所有矢量动画的最佳选择。在某些情况下,使用SVGWebGL动画可能更合适。

4. 整合Lottie动画到Rive

4.1 Bodymovin插件窗口打开方法

目前,Rive 平台本身并不直接支持从 Lottie JSON 文件导入动画。Rive 使用自己的格式和编辑器来创建和管理动画。因此,如果你想将 Lottie 动画整合到 Rive 中使用,你需要通过一些间接的方法来实现这一转换。

  1. 手动重建

最直接的方法是在 Rive 工具中手动重建 Lottie 动画。这意味着你需要在 Rive 中从头开始创建新的动画,可能需要参考 Lottie 动画的视觉效果和行为。
这种方法虽然耗时较长,但可以充分利用 Rive 的所有功能,包括交互性和动态响应。

  1. 使用第三方工具

可以寻找是否有可用的第三方工具来转换 Lottie JSON 文件到 Rive 支持的格式。这些工具可能不常见,且转换效果取决于工具的更新和维护状态。如果找到合适的工具,按照工具的说明进行操作,将 Lottie JSON 转换为 Rive 可以识别的格式。

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

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

相关文章

图像处理之SVD检测显示屏缺陷(C++)

图像处理之SVD检测显示屏缺陷(C) 文章目录 图像处理之SVD检测显示屏缺陷(C)前言一、SVD算法简介二、代码实现总结 前言 显示屏缺陷检测是机器视觉领域的一处较广泛的应用场景,显示屏主要有LCD和OLED,缺陷类…

4.5_shell的执行流控制

##1.for语句## (1)for语句作用 为循环执行动作 (2)for语句结构 for 定义变量 do 使用变量,执行动作 done 结束标志 (3)for语句的基本格式 格式1 格式1:#!/b…

现身说法暑期三下乡社会实践团一个好的投稿方法胜似千军万马

作为一名在校大学生,去年夏天我有幸参与了学院组织的暑期大学生三下乡社会实践活动,这段经历不仅让我深入基层,体验了不一样的生活,更是在新闻投稿的实践中,经历了一次从传统到智能的跨越。回忆起那段时光,从最初的邮箱投稿困境,到后来智慧软文发布系统的高效运用,每一步都刻印…

(六)JSP教程——out对象

out对象是在JSP中经常使用到的对象,它本质上是一个输出流,前面已经多次使用,我们经常使用它的print()和println()方法,这些方法主要用于实现客户端数据的输出。通过out对象也可以直接向客户端发送一个由程序动态生成的HTML文件。 …

PPPoE实验新手必备:从0到1的网络配置指南!

5月18日,思科华为初级网工课程,等你免费试听 V:glab-mary 今天带大家学习一下华为PPPoE实验配置 01、实验拓扑 02、实验需求 1.完成PPP封装 2.完成PPP的PAP验证 3.完成PPP的CHAP验证 4.完成R1和R2之间的PPPOE 03、实验步骤 a . PPP封…

内存卡罢工,数据危机?别急,有救!

在日常生活和工作中,我们越来越依赖于各种电子设备来存储重要数据。其中,内存卡因其便携性和大容量而广受欢迎。然而,当内存卡突然损坏打不开时,我们该如何应对?本文将为您详细解析这一问题,并提供有效的解…

c语言实现贪吃蛇小游戏————附全代码!!!

目录 1.Win32 API 1.1控制台应用程序 1.2控制台的名称,控制台窗口大小 1.3设置控制台光标位置 COORD - 光标坐标 GetStdHandle - 获取句柄 SetConsoleCursorPosition - 设置光标位置 封装一个设置光标的函数 1.4设置控制台光标的属性 CONSOLE_CURSOR_INFO …

Cargo - 构建 rust项目、管理依赖包

文章目录 关于 Cargo构建项目创建工程编译运行buildclean 管理依赖添加依赖updatecheck计时 manual rust 安装可参考:https://blog.csdn.net/lovechris00/article/details/124808034 关于 Cargo Cargo 官方文档 : https://doc.rust-lang.org/cargo/crat…

泛型编程四:容器

文章目录 前言一、序列容器verctor 总结 前言 STL有六大部件,容器、算法、仿函数、迭代器、适配器和分配器。除了算法是函数模板,其他都是类模板。容器可以分为序列容器和关联容器。常见的序列容器有vector、array、deque、list、forward-list&#xff…

;【排列【

c语言中的小小白-CSDN博客c语言中的小小白关注算法,c,c语言,贪心算法,链表,mysql,动态规划,后端,线性回归,数据结构,排序算法领域.https://blog.csdn.net/bhbcdxb123?spm1001.2014.3001.5343 给大家分享一句我很喜欢我话: 知不足而奋进,望远山而前行&am…

【Kolmogorov-Arnold网络 替代多层感知机MLPs】KAN: Kolmogorov-Arnold Networks

KAN: Kolmogorov-Arnold Networks 论文地址 代码地址 知乎上的讨论(看一下评论区更正) Abstract Inspired by the Kolmogorov-Arnold representation theorem, we propose Kolmogorov-Arnold Networks (KANs) as promising alternatives to Multi-Layer…

1.使用uniapp搭建微信小程序项目并引入前端组件资源

文章目录 1. 项目配置1.1. 新建vue3项目1.2. 关联云空间1.3. 运行到微信开发者工具 2. 前端组件2.1. uniCloud的内置组件和扩展组件2.2. uView3.02.3. 在uniapp项目引入uview3 1. 项目配置 1.1. 新建vue3项目 由于我们要使用vue3而不是vue2,所以要选好版本&#x…

移动端底层事件(如左滑返回事件)在同一个路由下不同页面需要不同的处理要怎样才能做到统一处理?

目录 一、问题 二、解决方法 三、总结 tiips:如嫌繁琐,直接移步总结即可! 一、问题 1.测试提了个bug:进入了一个模块A里面的子页面 a1,左滑后按照用户预期应该是返回到模块A,结果回到了app首页。 二、解决方法 1.一开始:啊,…

分布式与一致性协议之ZAB协议(七)

ZAB协议 ZAB协议:如何处理读写请求 你应该有这样的体会,如果你想了解一个网络服务,执行的第一个功能肯定是写操作,然后才会执行读操作。比如,你要了解ZooKeeper,那么肯定会在zkClient.sh命令行中执行写操作(比如crea…

Dynamic Extraction of Subdialogues for Dialogue Emotion Recognition

对话情感识别的子对话动态提取 摘要1. 介绍2 相关工作2.1 对话上下文建模2.2 常识知识 3 方法3.1 问题定义3.2 模型概述3.3 特征提取模块3.4 依赖性建模3.5 交互式子对话提取模块3.6 重要性增强的多头自注意力模块3.7 子对话框主题提取模块3.8. 分类模块 四、实验4.1 数据集4.1…

JAVA基础之jsp标准标签

jsp动作标签实现实例化一个实体类 <jsp:useBean id"标识符" class"java类名" scope"作用范围"> 传统的java方式实例化一个实体类 Users user new Users(); <%%> id: 对象名 * class:类 创建对象时,完全限定名(包名…

vue3使用el-autocomplete请求远程数据

服务器端 RestController RequestMapping("/teacher") public class TeacherController {Resourceprivate TeacherService teacherService;GetMapping({"/v1/getTop10TeacherByName/","/v1/getTop10TeacherByName/{name}"})public ResultBean&l…

巡检机器人有哪些功能和作用?

在科技如此发达的时代&#xff0c;巡检机器人犹如一位不知疲倦的守护者&#xff0c;悄然走进了我们的生活。它们具备着令人惊叹的功能和作用&#xff0c;成为了保障安全、提高效率的重要力量。那么&#xff0c;巡检机器人功能和作用&#xff1f;下面我们来说说旗晟机器人的几款…

爬虫:爬取豆瓣电影

文章目录 前言一、pandas是什么&#xff1f;二、使用步骤 1.引入库2.读入数据总结 前言 上篇我们将到如何利用xpath的规则&#xff0c;那么这一次&#xff0c;我们将通过案例来告诉读者如何使用Xpath来定位到我们需要的数据&#xff0c;就算你不懂H5代码是怎么个嵌套或者十分复…

Leetcode—387. 字符串中的第一个唯一字符【简单】

2024每日刷题&#xff08;127&#xff09; Leetcode—387. 字符串中的第一个唯一字符 实现代码 class Solution { public:int firstUniqChar(string s) {int count[26] {0};for(char c: s) {count[c - a];}for(int i 0; i < s.length(); i) {if(count[s[i] - a] 1) {re…