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

推荐阅读:

  • 《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.mzph.cn/news/833567.shtml

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

相关文章

华为eNSP中型企业局域网网络规划设计(上)

敲半天一个闪退全™给我干没了呜呜呜,eNSP,wcnm!wcnm!wcnm! →b站传送门,感谢大佬← →华为eNSP中型企业局域网网络规划设计(下)← →拓扑图传送门,可以自己配置着玩←…

Vue从入门到实战Day01

一、Vue快速上手 1. vue概念 概念:Vue是一个用于 构建用户界面的 渐进式 框架 构建用户界面:基于数据动态渲染页面渐进式:循序渐进的学习框架:一套完整的项目解决方案,提升开发效率 优点:大大提升开发效…

springboot集成-Redis

Spring Boot项目中集成Redis&#xff0c;可以使用Spring Data Redis来简化操作。首先需要在pom.xml文件中添加Redis和Spring Data Redis的依赖&#xff1a; <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter…

python 统计列表相同数据出现的次数

一、使用for循环 生成数据[randint(0,20) for _ in range(30)]得到 data [18, 11, 16, 18, 2, 15, 6, 6, 4, 8, 16, 19, 8, 17, 6, 14, 7, 1, 3, 2, 8, 17, 4, 6, 18, 11, 15, 16, 3, 3] 要生成的数据格式肯定是一个字典类型&#xff0c;比如{1:5,2:3,5:5}这样的数据&#x…

【Debug日记】albumentations包安装失败解决方案

直接pip安装pip install albumentations 报错&#xff1a; ERROR: Command errored out with exit status 1:command: D:\anaconda3\envs\pytorch\python.exe D:\anaconda3\envs\pytorch\lib\site-packages\pip\_vendor\pep517\in_process\_in_process.py build_wheel C:\Users…

如何利用CAM350检查Gerber文件

利用CAM350检查Gerber文件 1、 打开CAM350软件。双击桌面上的CAM350图标以启动软件。 2、选择文件输入选项。在文件菜单中选择“输入”然后选择“自动输入”&#xff0c;因为Gerber文件通常是由EDA软件自动导出的&#xff0c;这样可以快速识别。 3、选择Gerber文件夹。在弹出的…

责任链模式和观察者模式

1、责任链模式 1.1 概述 在现实生活中&#xff0c;常常会出现这样的事例&#xff1a;一个请求有多个对象可以处理&#xff0c;但每个对象的处理条件或权限不同。例如&#xff0c;公司员工请假&#xff0c;可批假的领导有部门负责人、副总经理、总经理等&#xff0c;但每个领导…

C语言——每日一题(轮转数组)

一.前言 前不久学习了时间复杂度的概念&#xff0c;便在力扣上刷了一道需要参考时间复杂度的题——轮转数组 https://leetcode.cn/problems/rotate-array/submissions这道题不能使用暴力算法&#xff0c;因为这道题对时间复杂度的要求不能为O&#xff08;N^2&#xff09;。因…

java博客目录

博客目录 基础知识 集合列表 List ArrayList&#xff1a; LinkedList&#xff1a; Set Map TreeMap 设计模式 单例模式&#xff1a; 工厂方法

如何根据索引删除数组中的元素,并保证删除的正确性

使用 splice() 方法来删除这些索引处的数据 var array [1, 2, 3, 4, 5]; var indexesToDelete [1, 3]; // 需要删除的索引// 将需要删除的索引按照从大到小的顺序排序&#xff0c;以避免删除元素后索引发生变化 indexesToDelete.sort((a, b) > b - a);// 遍历需要删除的索…

Tansformer原理解读

什么是注意力机制 生物学中的注意力机制是指人类或动物能够选择性地将感知和认知资源集中到某些信息或任务上的能力。这种能力允许我们在众多信息的背景中过滤出重要的信息&#xff0c;并将这些信息传递给相应的神经元进行处理。 本质&#xff1a;能从中抓住重点&#xff0c;…

上海市计算机学会竞赛平台2023年7月月赛丙组先行后列

题目描述 从 11 开始的 &#x1d45b;&#x1d45a;nm 个整数按照先行后列的规律排列如下&#xff1a; 第一列第二列第 &#x1d45a;m 列第一行1122……&#x1d45a;m第二行&#x1d45a;1m1&#x1d45a;2m2……2&#x1d45a;2m第三行2&#x1d45a;12m12&#x1d45a;22…

一个好用的短链接都需要具备哪些功能?

大家好&#xff0c;今天我们将会来聊聊一款优秀的短链接&#xff0c;都需要具备的功能&#xff0c;看看是不是你想要的呢&#xff1f; 1. 能够支持自定义域名 现在越来越多的用户都不会选择公用域名了&#xff0c;因为那样风险太大&#xff0c;而会选择用一个他们自己的专用域…

自动控制原理MATLAB:系统分析

控制系统时域分析 &#xff08;1&#xff09;稳定性分析 稳定是控制系统的重要性能&#xff0c;也是系统设计过程中的首要问题。线性系统稳定的充分必要条件是&#xff1a;闭环系统特征方程的所有根均具有负实部。在MATLAB中可以调用roots命令求取特征根&#xff0c;进而判别…

C#实战—代码实现收发文件智能化

在信息化的今天&#xff0c;收发电子文档几乎是每个朋友都要经历的事情。比如班级学委和班长需要收发作业&#xff0c;企业管理者需要收发工作文件。但是&#xff01;&#xff01;&#xff01; 每到要交结果时&#xff0c;往往会发现总会有一些人没有即使交上&#xff0c;50个…

8W 1.5KVDC 隔离宽电压输入 DC/DC 电源模块——TP08DA 系列

TP08DA系列电源模块额定输出功率为8W&#xff0c;外形尺寸为31.80*20.30*10.00&#xff0c;应用于2&#xff1a;1&#xff0c;4:1电压输入范围 9-18V,18-36V,36-72V9V-36V和18V-72VDC的输入电压环境&#xff0c;输出电压精度可达1%&#xff0c;具有输出短路保护等功能&#xff…

“IP协议全解析:为何它是互联网通信的基石?”(包含开源免费的API接口)

IP地址简介 IP地址&#xff08;Internet Protocol Address&#xff09;是指互联网协议地址&#xff0c;又译为网际协议地址。 IP地址是IP协议提供的一种统一的地址格式&#xff0c;它为互联网上的每一个网络和每一台主机分配一个逻辑地址&#xff0c;以此来屏蔽物理地址的差异…

图卷积神经网络GCN

计算图 通过消息传递的框架构建一个局部邻域的计算图 每个节点分别构建自己的计算图 理论上任意深度&#xff0c;根据六度空间理论&#xff0c;层数一般不会超过六层 基本过程 数学形式 矩阵表示 代码表示 图计算改进 能够听见自己内心的声音 最终形式 如何训…

Android调用C++函数

1.定义JAVA类test package com.example.mylib;public class test {int id;//IDchar lab;//标签long id_card;//身份String name;//名称public test(){} }2.声明原生JNI函数 public native test objFromJNI(test obj); 3.实现objFromJNI原生函数 struct myStruct{int id;uin…

windows端口复用

1. 概述 使用 HTTP.sys 中的 Net.tcp Port Sharing 服务&#xff0c;配合 WinRM 实现端口复用。 优点&#xff1a; HTTP.sys 为 windows 原生机制&#xff0c; WinRM 为 windows 自带功能&#xff0c;动作较小&#xff0c;不易触发主 动防御。 需要管理员权限。 2. 原理 (…