轻松玩转 Principle 路径动画

Sponsor

作者：鸽小子

大家肯定都被这个“路径动画”四个字骗进来了吧。其实 Principle 是不支持路径动画的，但是可以通过建立组的形式来变相调整素材的旋转中心点，从而在发生位置变化后达到所谓的“路径动画”效果。

先来看看用这种办法能做出些什么效果～

【文章大部分为 Gif 如加载慢 请见谅】

这些都是用Principle做出来的动画。第一排前两个动态效果是Rebound @GalShir 大神的动画，第三个是模仿iWatch动画效果；第二排中间的是Rebound @Domaso 大神的作品，两侧的是为了凸显‘路径’做着玩的。

准备工作

在逐一讲解案例前我们要先了解 角度旋转 和 组 的基本功能。

角度旋转：

设置角度的位置在软件左侧的工作区里，调整角度即可达到旋转效果。Principle只能遵循中心点旋转，也就是说当你从Sketch导入过来的任意图片，Principle也只把它当作矩形按中心点旋转。

（ 图1 角度旋转功能演示 ）

组

成组后会建立为文件夹，快捷键与Sketch相同 ⌘+G 。直接拖拽图层到另一个图层里也会成组（父子级关系），但与Sketch不同的是：Principle里的文件夹可以赋予颜色。赋予颜色解组后会变成一个独立的图形，没有颜色时图层列表里图标为文件夹样式；也可选中文件夹后通过勾选 「 Clip Sublayers 」剪辑子图层选项来达到蒙版效果。

（有些人会称文件夹是一个“容器层”，叫什么不重要，自己好理解就行~）

（ 图2 组[文件夹]功能演示 ）

下面进入正题

案例一

首先我们导入素材，案例的目的是：让尾巴沿抛物线路径摆动起来，

所以直接选择“尾巴”这层。尾巴是上下摆动的，我们先让素材一端的顶点沿圆形旋转起来。

（ 图3 顶点沿圆形旋转效果 ）

第一步，选择素材图层建立组，调整文件夹大小，让文件夹成为一个正方形（这样变相调整了旋转中心点）。建立完组后记得及时命名方便自己理解记忆，这里建议命名为“旋转”因为要通过组的中心点位置来旋转素材。这样就得到刚刚想要的效果，素材一端的顶点沿圆形旋转起来。

（ 图4 调整文件夹大小旋转后效果 ）

第二步，选中刚刚建立的组，点击 Create Component 组件按钮，建立成一个组件

建立组件的好处：尾巴摆动，需要两个画板来回跳转来实现，建立组件后可以在组件里做两个画板跳转，不影响实例里的画板关系。

（ 解除组件位置在[Arrange排列 – Detach Component分离组件] ）

（ 图5 建立组件 ）

第三步，在刚刚建立的组件中选中“旋转”文件夹，再次创建一个组，这里命名为“遮罩”（是用来裁掉素材多余部分），然后调整这个组文件夹的大小，使得「文件夹」区域只保留尾巴图层左侧部分，然后勾选“裁剪子图层”达到一个遮罩效果。这时我们可以在尾巴后面补一条色块，用来模拟在平地上的尾巴，这里可命名“尾巴2”。

（ 图6 调整文件夹大小剪辑子图层 ）

接着我们选中画板（或任意图层）点击右侧的闪电图标「事件触发器」，在展开的事件里表里我们找到Auto自动事件，点击并按住事件前的空心圆，拖拽出箭头指针，指向当前的画板，松手后会在画板右侧复制一份画板，再给复制出的画板同样添加Auto自动事件，指向回第一个画板，这样两个画板就可以无限来回自动跳转了。

我们选中第二个画板里“旋转”文件夹，调整角度为-90度，只留下圆角顶端。然后我们再预览里看下效果，OK，效果很鬼畜。原因是尾巴摆动升起和落下时，顶点坐标会沿X轴发生位置变化从而实现抛物线摆动。只需调整下画板一 里“尾巴”与“尾巴2”图层的位置，就可达到想要的抛物线路径运动了，接着可以根据自己喜好灵活调整 Animate 动画时长即可。

（图7 添加自动调整+调整“旋转”文件夹角度）

（图8 预览效果）

最后，返回实例微调下组件位置（因为刚刚把组件里的 画板一 位置移动了），就得到一个无限摆动的尾巴了。接着做脸部联动跟随也好、头部旋转也好就可以自由发挥了。

（图9 返回实例调整尾巴位置）

总结

1.需明确旋转轴心点位置；

2.给素材建立组「文件夹」调整组大小变相调节素材轴心点；

3.旋转组，多余部分可二次嵌套组进行遮罩从而达到效果；

4.‘旋转’文件夹与‘遮罩’文件夹关系不可嵌套反了 [ 遮罩 — 旋转 — 尾巴素材 ]。

案例二

这个案例是通过快速旋转摆动的视觉差，来实现尾巴弧线路径运动。

同样导入素材，直接选择尾巴图层。

（图10 明确旋转中心）

第一步，明确旋转的中心，这里尾巴是左右摆动的效果，中心点应位于素材底部中间。明确旋转中心位置后给“尾巴”图层建立一个组，调整「文件夹」的大小，使得旋转中心点在正确位置。

（图11 成组建立文件夹+调整文件夹大小）

第二步，选中“身子”、“尾巴影子”以及成组的“尾巴”文件夹，将它们建立成一个组件，在组件内添加自动跳转事件得到画板2。

（图12 建立组件+自动跳转画板）

第三步，旋转“尾巴”文件夹到合适位置；给画板2添加自动跳转事件得到画板3，调整 画板3 “尾巴”素材，复位文件夹角度，调整素材方向，修改尾巴文件夹命名，修改 尾巴、尾巴影子 素材的命名（目的是与画板2命名不一致，不自动创建补间动画）。

（图13 调整尾巴角度+添加跳转+调整素材方向及名称）

第四步，给画板3添加自动跳转事件得到画板4。旋转 画板4 内“尾巴”文件夹到合适位置，之后给 画板4 添加自动跳转事件，跳转回 画板1 。

（图14 添加跳转得到画板4+跳转尾巴角度+跳转回画板1）

第五步，调整画板2、画板4里“尾巴影子”的透明度到0；调整组件内各画板“身子”图层位置，让身子与尾巴成相反方向运动，最后整体调整跳转动画时长。（图15 调整尾巴影子透明度+身子位置）

（图16 调整跳转动画时长）

这样一个身体、尾巴左右摆动的效果就出来了。头部的动画其实也是两个画板自动跳，调整头、耳朵等明显大小与位置即可。

总结

Principle素材命名一致，会自动创建补间动画，如需要快速跳转，需要更改命名来达到快速切换效果（当然也可以调整动画曲线为No Animation得到一样的效果）。

· 旋转的实战应用

在UI设计中经常会出现圆形加载、进度等动画，通过前两个例子经验总结，运用旋转、剪辑子图层就可以轻松实现。

我们导入素材，这里拿最外圈红色圈来做演示。讲解下素材图层：其中“红1”“红2”图层是用来做线段两端圆头顶点图层，“红”图层为进度条图层。

（图17 素材分解）

前期准备工作，我们需要让“红”图层裁成一个半弧。给“红”创建一个组调整文件夹大小，用剪辑子图层的方法得到一个半弧。可以给这个文件夹命名“半弧形”。

（图18 剪辑子图层得到半弧形）

第一步，从这步开始与上面第一个例子一样，为了调整旋转中心点，要在刚刚建好的文件夹基础上再次建立组，这里调整文件夹大小使得成为一个正方形，命名“旋转”。

（图19 建立组+调整文件夹大小）

第二步，在方形文件夹基础上再建立一个组，命名为“遮罩”。调整文件夹大小后勾选剪辑子图层，使得半弧形也被隐藏掉。到这步可以尝试下，调整“旋转”文件夹的角度，会发现已经达到沿圆形路径增长进度的效果，但旋转角度只能为180度，超出部分会再次被遮挡。

（图20 再次建立遮罩组调整文件夹大小+旋转预览效果）

第三步，给任意一个红点建立一个组，命名为“顶点”，调整文件夹大小与之前的正方形文件夹大小一致，这一步是为了让增长出来的顶点变成圆头顶点。

（图21 给红点建立组+调整文件夹大小）

操作到这里基本旋转180度以内都可以轻松实现了，添加自动跳转复制出一个新的画板来，调整新画板里的“旋转”、“顶点”文件夹的角度即可。

如何超过180度呢？敲黑板了看这里，只需有两组素材，各自都旋转180度就可以实现了。

只需在“遮罩”文件夹基础上再建立一个组，调整文件夹大小使得再次成为一个正方形，命名为“180”。

组的嵌套与命名是这样的 [ 180 — 遮罩 — 旋转 — 半弧形 — 红圈素材 ]

（图23 新建组+调整大小）

（图24 文件夹嵌套关系+剪辑子图层位置）

复制一份“180”文件夹，得到两个后，添加自动跳转复制出一个新画板来；

到新画板里找到 两个 “旋转”文件夹并调整角度为180度；

接着旋转新画板里其中一个“180”文件夹到任意角度；

旋转“顶点”文件夹的角度，使得与半弧顶点位置重合；

最后调整动画时长即可。

（图25 得到两个180度文件夹 后续操作）

（两个‘180’文件夹内‘旋转’文件夹各自旋转180度后，其中一个‘180’文件夹继续旋转）

总结

1.大于180度需要两组旋转、小于180度一组旋转就可以。

2.捋清思路，文件夹嵌套、遮罩关系、旋转图层要明确。

· 拓展思维

通过上述案例，可以用principle做出很多路径动画效果，但写这个文章的目的只是单纯开拓大家对Principle的认知，它可以做，但不一定是最合适但，可能AE分分钟就能做出更顺滑的效果，工作中还是选择自己更顺手的软件就行

最后的附加题

附送一个非角度旋转达到路径运动的案例

（图26 电影票案例）

这是格瓦拉电影购票软件，影片点击后会类似纸片悬浮，位移后落下。这个位置移动有轻微的曲线变化，制作原理是调整了动画的贝塞尔曲线。

案例中封面因为它的 x 与 y 坐标都发生了位置变化，如果应用默认动画曲线，效果是这样。

（图27 默认动画曲线）

我们展开动画面板，调整 中心 x 为线性匀速运动，在调整 中心 y 的曲线看下效果，运动路径就发生了变化。这是因为我们将一个方向的动画时间变成匀速，另一个方向根据贝塞尔曲线控制运动快慢，就达到了想要的曲线运动。

（图28 调整动画曲线）

以上就是这文章的全部内容，感谢你已经观看到这里，有疑问或有更好的方法欢迎随时在下方留言一起探讨，我是鸽小子，下一篇文章见。

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。