我将向您展示一个有趣的Figma插件来完成所有这些工作。它的名字叫Motion。我们将快速概述其界面，学习动画基础知识，甚至制作一些很酷的东西。

1.开始

首先，我们应该安装它。打开Figma搜索“motion”。

现在单击右侧的install（安装）即可。

现在新建一个设计稿窗口，右键从下拉菜单中选择Plugins / Motion。（这里有快捷键：mac-command+？ win：ctrl+？，然后输入插件的名字即可，很方便！）

第一次运行

现在正式开始了！

2. 深入（这里不用跟着我做，只是介绍）

在使用新工具之前，我们应该学习如何使用，让我们深入了解一下！

看起来像Figma UI，对figma用户很友好。

顶部是和Figma一样的顶部，现实文件名和各个文件，下面是工具栏，左侧是图层面板，还有关键帧时间轴。

文件名/文件

工具栏

对齐网格

自动滚动

自动更新关键帧

预览fps：24或 60

重复性：不重复/重复/重复和暂停

播放/停止

当前时间位置/总时间

在左侧面板中，我们可以按名称搜索图层/或使用关键帧过滤图层。如果在Figma中未选择任何内容，则可以看到文件的图层，但是没有子图层。它制成的文件很笨重，可能会比较笨拙。只需搜索您需要的图层或在Figma中选择图层，列表就会显示所有子图层。

在时间轴面板中，我们将看到所选图层的所有关键帧

时间轴面板

添加关键帧

当前位置添加关键帧

导出，可以将任何图层导出GIF，Sprite，Frames，、或CSS。

导出按钮

如果你在团队中工作，正在运行Motion的每个人都会看到您的动画。与将在代码中实现动画的团队和开发人员进行交叉使用非常有用。

双击任何关键帧将打开关键帧面板，您可以在其中设置旋转点，值和缓动功能。

3.你的第一个动画

让我们创建一个Frame和一个矩形。（尺寸和颜色不重要，随意发挥）将矩形放置在靠近Frame左侧的位置，以便在右侧留出一些空间来移动。

现在打开Motion，然后单击X属性伤的“关键帧”按钮。

我们的动画将持续500毫秒。将粉红色的时间轴手柄移至500ms（0.5s）的位置。

现在将蓝色巨型移动到右侧，然后再motion中单击“添加关键帧”按钮。

单击播放，然后查看你的第一个动画。恭喜你！

现在，你可以看到所有属性设置动画，随意更改Y轴，宽度，高度，半径，旋转角度，不透明度，颜色。是不是很简单！

4. 基础

继续深入研究

4.1 旋转点

首先，我们应该了解什么是旋转点或锚点。假设我们内部有一个框架和一个矩形。矩形：宽度= 100，高度= 100，x = 100，y = 100，旋转= 0°。转到“运动”，然后为X属性添加关键帧。

双击一个新的关键帧。现在，我们看到了具有某些属性的关键帧面板。在这里，你可以建立一个旋转点或锚点，一个属性值和宽松的功能。在Figma属性面板中，我们定义x等于100，但是在这里看到150。为什么？

x=150在关键帧面板中

属性面板x=100

其原因是旋转点，该旋转点由X和Y轴设置为中心。因此，位置为：X +（宽度/ 2）= 100 +（100/2）= 150。

如果要处理与Figma相同的值，则应选择旋转点的左上角。但是不要着急！让我们 沿着X向右移动100个矩形，然后将其旋转-45°。

单机“播放”，看看是否在旋转。

但是，如果将旋转点更改为左上角，该怎么办？更改旋转点的关键帧无关紧要。对于该层的所有关键帧都是通用的。

我们将根据图层的左上角进行移动和旋转。

使用左上角的旋转角进行移动和旋转

一些更多的例子。

4.2 缓动功能

缓动功能控制加减速。有4种缓动功能：

• 线性的

• 缓入—开始时加速

• 缓和—最终减速

• 缓入缓出—起点加速，终点减速

这里还有一个选项-步骤。它将立即更改值，而不会进行任何转换。

让我们尝试一下。我们仍然有矩形从框架的左侧移动到右侧。选择结束关键帧并打开关键帧面板。更改缓动功能并查看结果。

线性的

缓入。启动时加速。

缓和，慢下来。

缓入缓停，开始加速，结束减速。

立即更改

4.3 复制粘贴

复制和粘贴关键帧也很容易。选择关键帧，按Ctrl / Cmd + C或从所选关键帧的下拉菜单中单击“复制”。之后，您可以将它们粘贴到任何层上。有时，以相同的方式为某些图层设置动画非常有用。

4.4 撤销重做

当然，您可以撤消和重做动画中的任何更改。Ctrl / Cmd + Z代表撤消，Ctrl / Cmd + Y代表重做将为您提供帮助。

4.5 自动更新关键帧

如果此按钮处于活动状态，则在对Motion进行聚焦之后，关键帧值将在当前时间位置自动更新。将插件窗口聚焦后将其延迟1秒钟，或按“播放”按钮将窗口聚焦后，会有1秒钟的延迟。

4.6 预览fps

您可以设置在Figma中实时看到的帧数：24或60。如果动画太慢，可以将其从60更改为24。不用担心这不会影响导出。

4.7 重复

这里有3种方法：

• 不再重复

• 重复

• 重复并暂停

  
  

最后一个很有趣。它将在动画结束时暂停1秒，然后重复播放。有时，当你设置重复时，您将看不到动画的最终结果。你希望在开始新的动画圈之前有一个延迟。你可以根据需要添加额外的关键帧。但是Motion提供了这样的工具-重复和暂停。

5. 开始吧

让我们使用此插件制作3个动画。它们非常简单，但是学习基础知识是一个好习惯。

5.1 进度条

添加一个新的Figma文件。创建一个框架：宽度= 300，高度=300。创建一个矩形：宽度= 200，高度= 20，x = 50，y = 50。

选择我们的矩形。转到“运动”，然后为0ms时间位置的宽度添加关键帧，为500ms时间位置添加一个关键帧。

确保自动更新关键帧处于活动状态。转到0ms时间位置，然后在Figma中将矩形宽度更改为0。你会注意到它将被设置为1。最小值为0.01，但是1足够了。转到Motion，然后在1秒内它将通知您1个关键帧已更新。

如果将缓动功能设置为缓出，动画将看起来更加自然。选择结束关键帧，双击它以打开关键帧面板。您将看到“线性”缓动功能。将其更改为“缓出”。

点击播放。

现在到500ms。此时，我们的矩形较宽，因此我们可以轻松地与其进行交互。我们必须复制矩形，将其旋转-90°并将其放置在图像上。

点击播放。

为什么第二个矩形没有动画？原始图层的关键帧不会自动复制到新的关键帧。因此，我们必须复制第一个矩形关键帧并将其粘贴到第二个矩形关键帧。

选择我们的第一个矩形，转到“运动”，选择我们的关键帧，然后单击Ctrl / Cmd + C或从任意关键帧的下拉菜单中选择“复制”。

复制好后，点击播放！

继续按照方法复制，试试下面这个案列！

5.2 圆

现在，我们将制作一个跳跃圆的简单动画。添加新的Figma文件。创建一个框架：宽度= 300，高度=300。创建一个圆：高宽100。

转到“运动”，然后在0ms和500ms时间位置上为Y和高度添加两个关键帧。

选择结束的Y关键帧并将其值更改为275，对“高度”重复相同的操作，将其值设置为50。单击“播放”。

看起来不太自然。因此，我们的圆圈应向下移动，然后触摸底部，然后再更改其高度。在700ms时间位置上为高度再添加一个关键帧，值为50。将先前的高度关键帧更改为100。

看起来好了一点。在700ms时间位置为275添加Y的另一个关键帧，并将上一个关键帧更改为250。

点击播放

现在，我们应该将Y和高度缓动函数的最后一个关键帧从Linear更改为Ease-out。

点击播放

看起来比上次好点，但是太慢了。让我们提高速度。将关键帧移近起点。动画将运行得更快。您可以使用向左/向右键移动关键帧100ms。如果按住Shift键，关键帧将移动500毫秒。

播放看一下

现在，让我们将圆移到其原始位置。加上宽度为500ms的时间位置的关键帧ÿ和高度分别与值150和100易于出缓和的功能。

播放

相当不错的跳跃。随意使其更自然。您可以添加一些跳跃，并从底部逐渐消失。自己尝试。

6. 文本信息

让我们为弹出消息设置动画。创建一个框架，一个矩形和一个文本。尺寸暂时不重要。为了使它们全部动画，我们必须将矩形和文本分组或将它们放置在新框架中。

如果将它们放到新的框架中，那是很好的。在本文的下一部分中，我们将了解为什么最好使用框架而不是组。

转到“运动”，在0ms和500ms上添加Y和不透明度的关键帧。

转到0ms，将帧向下移动30并将其不透明度更改为0％。确保自动更新关键帧处于活动状态。转到Motion并等待1秒钟，直到关键帧更新。现在转到500毫秒，并将关键帧缓动功能更改为缓出。

点击播放。

总结

我也是心血来潮想写一个教程，第一次写，希望大家支持一下，从去年疫情开始就一直重度使用figma，现在也是脱离不了figma了，从了解到这个插件，空闲时就会打开玩一下。这次没有做导出的教程！ 太累了。谢谢。