2dimensions手册中文翻译(一)FLARE基本使用

2019-01-15 本文已影响330人 NewSongs

2018年“Flutter”作为一款优秀的移动UI框架逐渐出现在开发者的视线中，就在2018年12月4日flutter举行的全球同步直播中宣布Flutter中对Flare和Nima支持。

Flare为应用程序和游戏设计师提供强大的实时矢量设计和动画。Flare的主要目标是允许设计人员直接使用在最终产品中运行的资产，从而无需在代码中重做该工作。

首先我们来张图看一下2dimensions在Flutter中的表现：

接下我们开始的正题。

英文手册原文地址:

https://docs.2dimensions.com/

简介

2Dimensions包含flare和nima

Flare是一个2D矢量动画程序。它允许您在舞台上放置对象并为其属性设置动画（例如位置，比例，旋转）。

Nima是一个2D动画节目。它允许您在舞台上放置对象并为其属性设置动画（例如位置，比例，旋转）。

一、入门

帐户

2Dimensions工具完全在您的浏览器中运行。首先，请先在2Dimensions的网站上创建一个帐户。注册后，您可以转到“您的文件”访问Nima和Flare。
注册地址:https://www.2dimensions.com/register

步骤

确保您已验证了自己的帐户。查看您的电子邮件以获取确认链接。
阅读我们的快速提示为您开始 Nima教程。
关注一些作者。这使您可以及时了解最新文件并从他们的技术中学习。
个性化您的个人资料。

开启WebGL

WebGL是一种浏览器渲染功能，允许Nima和Flare以桌面级图形性能运行。它内置于所有现代浏览器中，不需要任何额外的插件。它需要运行Nima，Flare和2Dimensions网站的许多部分。

大多数浏览器通常默认启用WebGL。有时，某些配置会关闭此功能。继续阅读以了解如何禁用WebGL。
如何开启WebGL

打开Nima和Flare

通过导航到您的文件启动Nima和Flare。双击文件将其打开，或单击加号图标以创建新文件。

二、Flare

1、Flare核心概念

在最基本的层面上，Flare是一个2D矢量动画程序。它允许您在舞台上放置对象并为其属性设置动画（例如位置，比例，旋转）。

(1)、层次结构

放置在舞台上或画板中的所有对象都显示在“层次结构”中。层次结构是树视图，显示舞台上项目之间的父/子关系。这些父/子关系是Flare中的核心概念，它允许您以最小的工作量创建复杂的分层动画。任何类型的对象都可以是父类或另一类对象的子类。当一个对象是另一个对象的子对象时，它继承了其父对象的所有转换。

(2)、骨骼

Bones提供了一种直观的方式来为具有许多连接部分的高级角色制作动画。它们遵循上面讨论的相同分层概念，但它们允许您轻松地为形状创建独特的变换空间（或枢轴点），同时保持部件之间的一致距离（就像真实的骨架一样）。

(3)、设置和动画模式

Flare中有两种主要模式：Setup和Animate。顾名思义，您希望在“设置”模式下设计图形，并在“动画”模式下为角色设置动画。请注意，界面会更改以显示每种模式的相应工具。例如，“动画”列表以“动画”模式显示在“层次”面板中。同样，“创建工具”仅在“设置”模式下的“工具栏”中可用。

2、导入资源

Flare目前支持导入SVG。将您的工作从其他矢量软件导出为SVG，然后将其拖放到Flare上以加载它。
我们计划在未来添加更多格式，包括类似于Nima目前存在的资源管理面板。

3、Artboards(画板)

画板是层次结构的顶级节点，允许您定义场景的尺寸和背景颜色。您可以在舞台上创建无数个画板，但每个Flare文件至少有一个画板。
画板可以节省时间，并允许您将项目的所有图稿和动画保存在一个文件中。例如，您可以为移动应用中的每个图形和图标创建不同的画板。每个图形都可以有自己的尺寸和动画。一切都导出到一个文件，因此很容易与您的移动应用程序或游戏集成。

(1)、活动画板

您正在使用的画板是活动画板。它以红色笔画突出显示。

活动画板

某些功能（例如“绘制顺序”面板和“动画”面板）适用于活动画板。例如，当您处于Animate模式时，您将看到活动画板的动画。
要使画板处于活动状态，只需单击它或其任何子画面（形状，骨骼，节点或画板内的任何其他对象）。

画板和“全选”快捷方式
“全选”快捷键 (Mac:CMD + A, Windows:Ctrl + A) 将首先选择活动画板中的所有内容。如果再次使用快捷方式，则会选择项目中的所有内容。如果您已经选择了一个对象，那么它将首先选择该类型的所有对象（骨骼，形状，图像等）。

4、Shapes vs Paths (形状与路径)

Flare使用形状图层和路径图层一起显示矢量图形。

(1)、形状图层

Flare中的矢量在形状图层上呈现。形状图层允许您为路径设置填充和描边颜色。

(2)、路径图层

矢量的实际形状由路径（或多个路径）定义。在Flare中展开形状图层将显示它正在使用的路径。
在下面的示例中，两个路径用于创建十字图标。可以直接为“十字形”的形状图层定义填充颜色。

ScreenRecording.gif

5、Bones(骨骼)

Bones允许您为图形创建骨架。这种方式可以直观且自然的为多个连接部分（如角色的手臂，旗帜或树枝）制作动画。

(1)、创建骨骼

要创建骨骼链，请选择“创建骨骼” 工具，然后单击该舞台。

Bones工具
创建骨链
第一次单击将创建一个根骨骼，这是一个链的起点。每次后续点击都会在链中创建一个新骨骼。请注意，每个新骨骼都是前一个骨骼的子骨骼，每次单击时链条都会更深一些（在层次结构中）。这是自动发生的，因为“创建骨骼”工具会自动选择先前创建的骨骼的关节。

创建骨骼分支
要从另一个骨骼继续链接，首先选择该骨骼，然后从那里继续使用“创建骨骼”工具。请注意，您可以选择关节或骨骼。
要在选择另一个骨骼时创建新的根骨骼，请按住ALT键。

(2)、关节

层次结构中不存在关节。它们是帮助设置和定位骨骼的控件。当关节被平移时，附近骨骼的长度和旋转方向将被更改。因此，我们建议仅在设置模式下而不在动画模式下平移关节（除非您有意更改骨骼的长度）。另外，请注意，平移骨骼（使用“平移”工具）具有类似的效果：它会更改附近骨骼的长度和旋转方向。这是因为骨骼实际上没有X和Y坐标，而是由其长度和相对于父对象的旋转来定义的。

(3)、根骨头

另一方面，根骨骼具有X和Y属性，可以平移和旋转。当您使用层次结构顶部的“创建骨骼”工具（未选择任何内容）时，将自动创建根骨骼。即使您选择了另一个骨骼，也可以通过按住ALT来创建新的根骨骼。这将创建一个根骨骼作为当前选择的子骨骼，而不是创建常规骨骼。

新骨骼

这是为链创建新变换空间的快速方法，可以在平移和旋转中键入。它也是一种保持骨骼更简单的方法，只在需要动画的位置创建骨骼。

(4)、为Bones挑选对象

使用“创建骨骼”工具时，“拾取子项”快捷方式可用于快速将图像或图形附加到骨骼。

首先，使用“创建骨骼”工具开始创建骨骼。创建第一个骨骼后，按C键激活“拾取子项”模式。选择要连接到新骨骼的图像，然后再次按C键关闭该模式。Flare(或Nima)将您选择的图像放在新骨骼上，并将骨骼的名称设置为图像的名称。您还可以选择多个图像，在这种情况下，Flare(或Nima)将在选择第一个图像后命名您的骨骼。
请注意，在关闭“拾取子项”模式后，Flare(或Nima)会自动重新选择“创建骨骼”工具以及您在链中创建的最后一个骨骼。这样你就可以从你离开的地方继续创建你的骨架。

(5)、连接骨头

另一种使用骨骼的有效方法是允许它们变形矢量路径的顶点。要执行此操作，请绘制一些骨骼，然后选择要将其连接到的路径图层。在选择面板中，您将看到一个显示Connected Bones的按钮。单击它并选择要连接的骨骼。

现在，您需要将骨骼加权到路径的顶点。通过在选择面板中按“编辑顶点”或按键盘Enter编辑路径的顶点。
我们首先需要在矩形中添加一些额外的顶点，以便它能够正确变形。仍在“编辑顶点”中，激活“钢笔工具”并在矩形的中间添加一些顶点，我们希望它在此处弯曲。我将在每一侧添加三个，以便它顺利地弯曲。您可以添加更多，但请记住，加权会变得更复杂。

现在激活“编辑权重”工具（必须仍在“编辑顶点”中），并使用第一个骨骼（值为1）对顶部的两个顶点进行完全权重。您可以使用shift或cmd/ctrl（mac/pc）进行多重选择。然后在舞台上拖动以快速更改选择面板中选定骨骼的重量。也可以在选择面板中手动键入数字。请注意，顶点上所有权重的和始终等于1。

选择顶点后，按键盘上的数字键（1 - 9）可更改选择面板“权重”部分下的选定骨骼。将此与“编辑权重”工具结合使用可快速操纵权重。

设置其余顶点的权重类似于下图。每个骨骼的中间顶点每个加权50％（因此0.5一个骨骼，0.5另一个骨骼）。它们之间的顶点设置为它们最接近的骨骼的0.75，另一个骨骼的0.25。

现在退出编辑顶点并尝试旋转骨骼！返回并根据需要调整权重和顶点位置，以获得您想要的效果。

在不添加大量额外顶点的情况下，提高变形平滑度的简单方法是调整顶点的半径值。

6、Freeze(冻结)

如何使用“冻结”功能移动变换空间而不影响子项。

有时将SVG导入Flare会在不希望的动画位置创建节点。例如，看看这个心脏图形，此形状的变换空间位于左上角。

导入此形状的变换空间位于左上角
心形是位于左上角的节点（或组）的子节点。在某些情况下，这可能是您想要的。但在其他情况下，您可能希望节点处于另一个位置。例如，您可能想要创建一个动画，其中心形（以及节点的任何其他子节点）从中心向上扩展。
由于这些项的父/子关系，移动节点也会移动心形。您可以通过将心形向上移动到左侧以使其与节点居中来解决此问题，但对于多个形状来说这将是非常繁琐的。
简单的解决方案是使用我们的Freeze功能，这在微调骨骼位置时也非常方便。

首先将“Freeze”选项设置为“Images”

现在，您可以移动节点而不会影响其子节点。

更好的是，使用我们“Freeze”的对齐工具，以确保节点完全居中。选择节点和心形，然后点击对齐按钮。

使用对齐工具使节点居中

7、Clipping(裁剪)

剪切路径允许您使用另一个剪切一个形状。这有时被称为掩蔽。要将其中一个形状用作另一个形状的剪切路径，请首先选择要剪切的形状。在选择面板中，按“Clipping”按钮，然后选择要用作剪切路径或遮罩的路径。Flare可以使用任何形状作为剪切路径，无论它在层次结构中的何处。

请注意，您可以使用多个剪切路径：

8、Animation(动画)

要在Flare中设置动画，请使用界面左上角的切换切换到Animate模式。这将显示时间轴，允许您设置键、操纵键和设置插值选项（easing）。

(1)、Timeline(时间轴)

在动画模式下，Flare界面显示时间轴，其中包含当前动画的播放控件和选项。所有动画的列表显示在时间轴的左侧，在“Animations”窗格中。单击每个动画旁边的单选按钮，使其成为当前动画。请记住，“Animations”窗格仅显示当前活动画板的动画。
时间轴仅显示已键入的对象和属性。

①、时间线标题

时间线的顶部显示左侧的播放控件（播放/暂停，返回开始）以及当前位置，每秒帧数和右侧时间线的持续时间。

②、浏览时间轴

使用时间轴顶部的水平滚动条（每侧有两个抓取器）滚动并调整时间轴的缩放级别。
您还可以使用与舞台相同的平移快捷方式来平移时间线（右键单击并拖动，或按住空格键并拖动）。
在Mac上按Cmd+箭头或在Windows上按ctrl+箭头精确移动播放指针。您还可以按住SHIFT一次移动播放指针10帧。
按住Alt键，然后按右箭头或左箭头在时间线上移动选定的键1帧。同时按住SHIFT键以移动所选内容10帧。

③、时间线切换按钮

在左上角的动画面板标题下方，您会找到许多用于切换时间轴功能的按钮。

AutoKey
当AutoKey处于活动状态时，对任何对象属性所做的更改将自动设置为播放头当前位置的时间轴中的键。默认情况下启用AutoKey功能。

Show Selected
启用此切换按钮以仅查看时间轴中当前选定的对象。

Loop
启用后，动画将在到达结尾时循环回到开头。

Work Area
启用此切换以仅播放动画的特定部分。启用循环后，播放将在工作区中连续循环。

(2)、Set Keys(设置关键帧)

对象及其属性在设置关键帧后将显示在时间线上。要设置关键点，请按显示在所有可设置动画的属性旁边的key按钮。

Key Types

key按钮有三种状态：

没有key值
已更改（仅在禁用AutoKey时）
有key值

您还可以使用以下快捷键键入当前选择：

key的所有变换属性（变换，旋转，规模，和长度）K
变换 Shift＋T
旋转 Shift＋R
规模 Shift＋S
长度 Shift＋L

提示：插入所有骨骼
有时候你可能想把所有的骨骼都加入关键帧中。您可以通过选择骨骼、按选择全部的快捷键（mac:cmd+a、pc:ctrl+a），然后使用上面的键旋转快捷键（shift+r）来快速完成此操作。请注意，“全选”快捷方式适用于任何当前选定的对象类型（例如，如果选择了图像，则按“全选”将选择所有图像）。如果没有选择对象，快捷方式将选择所有对象。

(3)、Manipulate Keys(修改关键帧)

每个Keyed对象都出现在时间轴的单行上。展开每个对象以显示每个Keyed属性的其他行。每个属性的键都显示在右侧。
使用白键移动对象的所有属性。使用蓝色键移动特定属性。

时间轴的第一行始终是您正在处理的当前动画的名称。此行中显示的键代表下面时间轴其余部分中的所有键。使用这些作为移动所有键的快捷方式。

调整动画大小 通过选择一段关键帧并按住Alt键来更改动画部分的持续时间。选择的边缘（黄色）抓取一个关键帧并拖动以调整选择的大小。您可以将它与“所有关键点”行结合起来调整整个动画的大小。

按住Alt键，然后按右箭头或左箭头在时间线上移动选定的键1帧。按住Shift键可将所选内容移动10帧。

提示：跳至制定keys
如果未选择任何对象，请使用Skip to Keys快捷键跳转到所有键。否则，快捷方式将跳转到所选对象的键。
跳到右边：.
跳到左边：,

(4)、Interpolation (Easing) 插补(缓和)

在Flare中设置两个键时，会自动计算这些键之间的帧。这称为插补。可以自定义插值以创建截然不同的结果。

要更改插值类型，请先在时间轴上选择一个键。插值窗格将更新以显示值将如何从所选键更改为下一个键。

右侧的插值图是可视化表示值如何随时间从所选键到下一个键的变化。X轴表示时间（左侧是所选键的时间，右侧是下一个键的时间）。Y轴表示从所选键（底部）到下一个键（顶部）的所选属性的值的变化。

①、线性

线性是默认插值类型，它创建从一个键值到下一个键值的恒定变化率。例如，如果为汽车的平移设置动画，则线性插值会导致汽车以恒定速度移动。

②、三次曲线

三次插值使用曲线在关键值之间进行插值。它为您提供两个可以拖动以自定义曲线的控制柄。
默认的三次曲线是从第一个关键点到下一个关键点的柔和曲线，这会导致值在开始和结束时变化缓慢。如果我们把这个应用到汽车转换其中，汽车会开始减速，中间达到最快的速度，最后再次减速。

移动插值手柄时按SHIFT键锁定到最近的轴。

③、Hold 保持

保持不会在键之间产生插值。它只保持当前值，直到达到下一个键，会立即设置下一个值。

在Flare中，Mac上按Cmd+/或Windows上按Ctrl+/可查看Flare快捷按钮。

有任何问题欢迎留言私信~