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

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/)


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 可以识别的格式。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

RabbitMQ之顺序消费

什么是顺序消费 例如:业务上产生者发送三条消息, 分别是对同一条数据的增加、修改、删除操作, 如果没有保证顺序消费,执行顺序可能变成删除、修改、增加,这就乱了。 如何保证顺序性 一般我们讨论如何保证消息的顺序性&…

【Linux】进程的隔离和控制:namespace 隔离、cgroup 控制

文章目录 五、namespace 隔离dd -- 读取、转换并输出数据mkfs -- 格式化文件系统df -- 显示文件系统磁盘使用情况mount -- 加载文件系统到指定的加载点unshare -- 创建子进程,同时与父程序不共享namespace一个 demo 六、cgroup(Control Group) 相关命令pidstat -- 监…

【LeetCode刷题记录】230. 二叉搜索树中第K小的元素

230 二叉搜索树中第K小的元素 给定一个二叉搜索树的根节点 root ,和一个整数 k ,请你设计一个算法查找其中第 k 个最小元素(从 1 开始计数)。 示例 1: 输入:root [3,1,4,null,2], k 1 输出&#xff1…

2024年深圳杯东三省联赛数模竞赛A题代码改进-更加合理的结果

4月下旬深圳杯开赛后第二天就推出了完整版的论文,经过长达半个月大家再售后群的讨论分析,我们又重新对之前思路下写的代码进行了改进。本次改进的结果,我们特地参考了网上一些常见的火箭及其相关的级别分离高度:(我们的…

c语言刷题——输出图案

1.输出用“*”组成的X形图案 题目:请打印用“*”组成的X形图案 描述: 多组输入,一个整数(2~20),表示输出的行数,也表示组成“X”的反斜线和正斜线的长度。 输出描述: 针对每行输…

【C语言】指针篇- 深度解析Sizeof和Strlen:热门面试题探究(5/5)

🌈个人主页:是店小二呀 🌈C语言笔记专栏:C语言笔记 🌈C笔记专栏: C笔记 🌈喜欢的诗句:无人扶我青云志 我自踏雪至山巅 文章目录 一、简单介绍Sizeof和Strlen1.1 Sizeof1.2 Strlen函数1.3 Sie…

零基础学习数据库SQL语句之查询表中数据的DQL语句

是用来查询数据库表的记录的语句 在SQL语句中占有90%以上 也是最为复杂的操作 最为繁琐的操作 DQL语句很重要很重要 初始化数据库和表 USE dduo;create table tb_emp(id int unsigned primary key auto_increment comment ID,username varchar(20) not null unique comment…

大语言模型中的第一性原理:Scaling laws

大语言模型的尺度定律在大语言模型的训练过程中起到了非常重要的作用。即使读者不参与大语言模型的训练过程,但了解大语言模型的尺度定律仍然是很重要的,因为它能帮助我们更好的理解未来大语言模型的发展路径。 1. 什么是尺度定律 尺度定律&#xff08…

stamps做sbas-insar,时序沉降图怎么画?

🏆本文收录于「Bug调优」专栏,主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案,希望能够助你一臂之力,帮你早日登顶实现财富自由🚀;同时,欢迎大家关注&&收藏&&…

【跟我学RISC-V】(二)RISC-V的基础知识学习与汇编练习

写在前面: 这篇文章是跟我学RISC-V的第二期,是第一期的延续,第一期主要是带大家了解一下什么是RISC-V,是比较大体、宽泛的概念。这一期主要是讲一些基础知识,然后进行RISC-V汇编语言与c语言的编程。在第一期里我们搭建了好几个环…

WPF之绑定验证(错误模板使用)

1,前言: 默认情况下,WPF XAML 中使用的绑定并未开启绑定验证,这样导致用户在UI上对绑定的属性进行赋值时即使因不符合规范内部已抛出异常(此情况仅限WPF中的数据绑定操作),也被程序默认忽略&…

4.【Orangepi Zero2】Linux定时器(signal、setitimer),软件PWM驱动舵机(SG90)

Linux定时器(signal、setitimer),软件PWM驱动舵机(SG90) signalsetitimer示例 软件PWM驱动舵机(SG90) signal 详情请看Linux 3.进程间通信(shmget shmat shmdt shmctl 共享内存、si…

【计算机网络】循环冗余校验:Cyclic Redundancy Check

1. 任务目标 利用循环冗余校验(CRC)检测错误。 循环冗余校验(英语:Cyclic redundancy check,通称 CRC)是一种根据网上数据包或计算机文件等数据产生简短固定位数校验码的一种散列函数,主要用来…

智慧文旅展现文化新风貌,科技助力旅行品质升级:借助智慧技术,文旅产业焕发新生机,为旅行者带来更高品质的文化体验之旅

一、引言 在数字化、智能化的浪潮下,文旅产业正迎来前所未有的发展机遇。智慧文旅作为文旅产业与信息技术深度融合的产物,不仅为旅行者带来了全新的文化体验,也为文旅产业注入了新的活力。本文旨在探讨智慧文旅如何借助智慧技术展现文化新风…

C++:二叉搜索树的底层模拟实现

概念: 二叉搜索树又称二叉排序树,它或者是一棵空树,或者是具有以下性质的二叉树: 搜索二叉树的操作: int a[] {8, 3, 1, 10, 6, 4, 7, 14, 13};二叉搜索树需要满足左子树比根小,右子树比根大,…

Leetcode—1235. 规划兼职工作【困难】(upper_bound、自定义排序规则)

2024每日刷题&#xff08;125&#xff09; Leetcode—1235. 规划兼职工作 算法思想 实现代码 class Solution { public:int jobScheduling(vector<int>& startTime, vector<int>& endTime, vector<int>& profit) {int n startTime.size();vec…

循环神经网络完整实现(Pytorch 13)

一 循环神经网络的从零开始实现 从头开始基于循环神经网络实现字符级语言模型。 %matplotlib inline import math import torch from torch import nn from torch.nn import functional as F from d2l import torch as d2lbatch_size, num_steps 32, 35 train_iter, vocab …

(六)SQL系列练习题(下)#CDA学习打卡

目录 三. 查询信息 16&#xff09;检索"1"课程分数小于60&#xff0c;按分数降序排列的学生信息​ 17&#xff09;*按平均成绩从高到低显示所有学生的所有课程的成绩以及平均成绩 18&#xff09;*查询各科成绩最高分、最低分和平均分 19&#xff09;*按各科成绩…

PHP 反序列化

一、PHP 序列化 1、对象的序列化 <?php class people{public $nameGaming;private $NationLiyue;protected $Birthday12/22;public function say(){echo "老板你好呀&#xff0c;我是和记厅的镖师&#xff0c;叫我嘉明就行&#xff0c;要运货吗你&#xff1f;"…

手机恢复出厂设置ip地址会变吗

当我们对手机进行恢复出厂设置时&#xff0c;很多人会担心手机的IP地址是否会发生变化。IP地址对于手机的网络连接至关重要&#xff0c;它决定了手机在网络中的身份和位置。那么&#xff0c;手机恢复出厂设置后&#xff0c;IP地址到底会不会发生变化呢&#xff1f;虎观代理小二…