Oct 7 阅读时长约6分钟
作者：Lucas Chae
翻译：桃几、高蓝光、任可欣、贝壳里睡着鱼
审校：陶陶然
Figma刚刚发布了两个期待已久的新功能：智能动画和拖拽交互。我通过创建5个iOS动效来进行测试。
使用Figma智能动画创建的人脸识别动效
今年年初，我开始使用Figma作为制作原型的主要工具。尽管我对它非常满意，但我始终感觉少点什么——它没法脱离插件或第三方应用而高效地实现简单的可视化的微交互。
所以智能动画和拖拽交互功能一经推出，我就开始上手使用了。我试着只使用Figma（完全不用Flinto或Principle）制作了5个iOS动效来测试这两个功能的潜力。
1.勿扰模式（开/关）
✅ 支持：简单形状的颜色、大小和位置的动效。❌ 不支持：复杂/布尔形状的动效。
无法实现布尔形状的动效
一开始，我通过布尔运算制作了一个新月形状，这样背景的颜色渐变可以不被遮挡住而正常显示。从上图来看，应该是Ellipse(main)减去Ellipse(subtract)。但是，当我设置这个布尔形状的动效时，发生了这种情况：
智能计算显然出bug了
智能动画的一个新功能是可以高亮强调不同画板上的同一个元件。Figma产品设计师Nikolas Klein的解释是，“这个功能将所有可以进行智能动效过渡的元件高亮显示出来“。
当你有多个由智能动画链接的元素时，高亮功能非常方便
我用这个功能来研究勿扰模式的动效过程，以及是什么原因导致了布尔形状动效的bug。
测试由智能动画链接的元素
可以看到，图标背景（圆角矩形）是链接起来的，但是布尔形状没有被链接，因为它被识别为两个不同的元件，而不是同一元件的两个变形状态。
虽然在布尔形状上表现不佳，简单形状的动效却非常适用
为了使用智能动画，我不得不使用方案二：牺牲渐变背景，取而代之使用纯色的简单形状。在下面的示例中，对动画状态之间不同形状的大小、颜色和位置进行调整。
所有简单形状都能作为智能动画元素被检测和链接。
最终效果
以放弃渐变背景为代价实现的动效
2.亮度调节
✅ 支持：遮罩形状动效。修改图片属性（亮度/对比度）。简单的拖拽交互。❌ 不支持：双向（前进和后退）拖拽动效。需要新的鼠标悬停/抓取标志。
平滑地实现遮罩形状和图片调节
调节亮度的定时动画实现起来非常简单。亮度滑块只用了一个遮罩形状，以及一个随亮度增加而光芒变大的太阳图标。
令我惊喜的是，通过改变每个状态下背景图像的亮度和对比度，最终的动画效果相当顺滑。
定时动画的效果也很完美。接下来我决定测试一下拖拽动画的效果，在亮度调节滑块上添加拖拽手势。
一个画板只能链接到另一个画板，不能链接到多个画板
不幸的是，智能动画只能从一个画板变化到另一个画板，而不能到多个画板。
例如，亮度调节滑块可以从A->B，也可以从B->A，在这之间来回重复。但是，却不能从A->B, B->C，然后再从C->B返回。
最终效果
两种状态之间的拖拽操作
另一个需要改进的是增加可拖拽元素的标志。Figma对可点击元素有鼠标悬停标志，但对可拖拽元素却没有标志。
3.音量调节
✅ 支持：显示对象的动效（透明度/大小）。❌ 不支持：某些动效因为有限的过渡类型无法实现。
元素出现和消失的动效可以用多种方式来实现
这个音量调节的动效由6种不同状态组成，主要包括显示和隐藏不同元素。声波随着音量的大小淡入淡出，静音时，扬声器图标上会有一个删除线。
通过智能动画将画板链接起来，添加定时效果以后生成的动效是这样的：
有限的过渡类型和延迟让人抓狂
很遗憾，智能动画目前还不支持线性过渡，这意味着包含多个画板的动画必须在动画的某个节点上“中止”。有一种方法可以解决这个问题，创建一个伪线性过渡，但它只适用于包含3种或3种状态以下的动画，就像下图这样。
到10月7日，这是实现平滑过渡的唯一方法。
最终效果
4.任务提醒（删除/标记）
✅ 支持：更多的拖拽和点击交互。❌ 不支持：将动画参数交付给开发人员。
任务删除动效
任务删除动效通过使用简单的拖拽或隐藏来实现。
任务标记动效
任务标记动效通过显示点击标记图标来实现。
最终效果
我认为应该增加的一个功能是提供动画参数，比如减速的时机，这对于将产品方便、准确地交付给开发人员将会非常有帮助。
5.人脸识别
✅ 支持：复杂的对象变化（大小、旋转、翻转）。❌ 不支持：仍然缺乏复杂关键帧的时间轴操作。
在习惯了使用智能动画并且了解到其局限性以后，我想重新创建一个更复杂的动效，一个我一直喜欢的微交互——人脸识别解锁的抽象螺旋动画。
初步尝试（关键帧未调整）
在逐帧仔细研究原始动效之后，我创建了两个画板（解锁04，解锁05），代表螺旋动效的两个关键状态。
总共有6个形状（2个椭圆形，4个阴影），在两个画板之间进行了巨大变化，包括翻转和180度或更大角度的旋转。智能动画正确地识别出所有这些变换并且生成了一个看起来很棒的动画。
这个动效的过渡看起来几乎是完美的，但有一些帧仍然看起来不连贯，因为关键帧的细节无法控制。我对智能动画目前所能做的感到很满意，不过我还想看看借助AE的调整Figma能完成到什么程度。
最终效果（关键帧通过AE调整）
我不敢相信这是用Figma制作的
右上角是原始的iOS动效，中间是使用Figma制作并通过AE调整后的动效。
结语
大部分原型制作工具都试图贯穿用户从头到尾的整个使用过程，Figma的这次更新无疑使其更接近这样一个完整的程序，减少了对其他工具的依赖。我期待在接下来的项目中用到所有的这些新功能（经常惊讶于都不知道自己竟然需要这些新功能）！
原文：/ios-animations-with-figmas-smart-animate-954c13a30cad
感谢阅读，以上内容由花火译文小组翻译，转载请注明出处！
- END -
花火圆桌
花火圆桌是由一群热爱设计的BAT设计师发起的分享交流社群，目前已聚集了18000多位来自五湖四海的小伙伴，一起分享、解惑，并常有线上线下活动共同成长进步。
关注公众号：回复以下关键词，会有海量资源哦 | UI | 手绘 | 交互 | 字体 | 软件 |
加微信入群：huahuokefu1还能得到更多
