Principle教程!轻松玩转路径动画

时间:2020-09-02
B站视频:av68679104
类别:其他教程
水平:普通
观众:1.2w
设计师入站必刷的宝藏频道,掌握设计真本领与AI并肩 👉 立即点击

当视频无法加载时请刷新页面,
或前往PC获得最佳体验。

教程作者:鸽小子(授权转载)

封面作者:GalShir

交作业:#优设每日作业#

关于教程

这篇文章是关于Principle的冷知识——「路径动画」,其实Principle并不支持路径动画的,但究竟怎么做到的呢?答案就在文章里~

好久不见~时隔很久我又来和大家探讨Principle了。因为之前也写过一个Principle关于联动的分享

里面涉及到了一些路径(曲线)动画,但当时写的太复杂难理解。就在年初发现了一个很好理解的方法来实现这个效果,并能延伸一些其他关于路径运动的效果,但一直因为..懒..没有踏下心来写这个东西,现在终于把它写完了,分享出来和大家一起探讨下所谓的Principle路径(曲线)动画的玩法~

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

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

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

Principle教程!轻松玩转路径动画

Principle教程!轻松玩转路径动画

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

准备工作

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

角度旋转:

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

Principle教程!轻松玩转路径动画

( 图1 角度旋转功能演示 )

组:

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

(有些人会称文件夹是一个「容器层」,叫什么不重要,自己好理解就行~)

Principle教程!轻松玩转路径动画

( 图2 组[文件夹]功能演示 )

案例一

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

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

Principle教程!轻松玩转路径动画

( 图3 顶点沿圆形旋转效果 )

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

Principle教程!轻松玩转路径动画

( 图4 调整文件夹大小旋转后效果 )

Principle教程!轻松玩转路径动画

(Create Component 组件按钮)

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

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

( 解除组件位置在[Arrange排列 - Detach Component分离组件] )

Principle教程!轻松玩转路径动画

( 图5 建立组件 )

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

Principle教程!轻松玩转路径动画

( 图6 调整文件夹大小剪辑子图层 )

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

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

Principle教程!轻松玩转路径动画

(图7 添加自动调整+调整「旋转」文件夹角度)

Principle教程!轻松玩转路径动画

(图8 预览效果)

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

Principle教程!轻松玩转路径动画

(图9 返回实例调整尾巴位置)

总结:

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

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

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

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

案例二

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

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

Principle教程!轻松玩转路径动画

(图10 明确旋转中心)

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

Principle教程!轻松玩转路径动画

(图11 成组建立文件夹+调整文件夹大小)

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

Principle教程!轻松玩转路径动画

(图12 建立组件+自动跳转画板)

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

Principle教程!轻松玩转路径动画

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

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

Principle教程!轻松玩转路径动画

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

第五步,调整画板2、画板4里「尾巴影子」的透明度到0;调整组件内各画板「身子」图层位置,让身子与尾巴成相反方向运动,最后整体调整跳转动画时长。

Principle教程!轻松玩转路径动画

(图15 调整尾巴影子透明度+身子位置)

Principle教程!轻松玩转路径动画

(图16 调整跳转动画时长)

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

总结:

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

旋转的实战应用

Principle教程!轻松玩转路径动画

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

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

Principle教程!轻松玩转路径动画

(图17 素材分解)

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

Principle教程!轻松玩转路径动画

(图18 剪辑子图层得到半弧形)

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

Principle教程!轻松玩转路径动画

(图19 建立组+调整文件夹大小)

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

Principle教程!轻松玩转路径动画

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

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

Principle教程!轻松玩转路径动画

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

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

Principle教程!轻松玩转路径动画

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

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

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

Principle教程!轻松玩转路径动画

(图23 新建组+调整大小)

Principle教程!轻松玩转路径动画

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

复制一份「180」文件夹,得到两个后,添加自动跳转复制出一个新画板来;

到新画板里找到两个「旋转」文件夹并调整角度为180度;

接着旋转新画板里其中一个「180」文件夹到任意角度;

旋转「顶点」文件夹的角度,使得与半弧顶点位置重合;

最后调整动画时长即可。

Principle教程!轻松玩转路径动画

(图25 得到两个180度文件夹 后续操作)

Principle教程!轻松玩转路径动画

(两个‘180’文件夹内‘旋转’文件夹各自旋转180度后,其中一个‘180’文件夹继续旋转)

总结

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

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

拓展思维

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

Principle教程!轻松玩转路径动画

Principle教程!轻松玩转路径动画

Principle教程!轻松玩转路径动画

最后的附加题

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

Principle教程!轻松玩转路径动画

(图26 电影票案例)

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

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

Principle教程!轻松玩转路径动画

(图27 默认动画曲线)

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

Principle教程!轻松玩转路径动画

(图28 调整动画曲线)

以上就是这文章的全部内容,这篇文章写的周期比较长,断断续续写的,可能有很多的错别字哈哈,还是感谢你已经观看到这里,有疑问或有更好的方法欢迎随时在下方留言一起探讨,所讲的例子源文件都会附送,我是鸽小子,下一篇文章见。

想要来「优优交流群」和其他小伙伴一起学习分享吗?搜索 QQ 群:1078133504 进群暗号:优优的忠实观众

学完这篇教程的人还在学…

附件下载

文件名 文件大小 提取码 下载来源
案例源文件762KBdinu 点此复制 登录下载
6 收藏 21

非特殊说明,本站 UiiiUiii.com 上的教程均由本站作者及学员原创或翻译,原作品版权归属原作者,转载请联系 @优优教程网 授权。

转载时请在文首注明,来源 UiiiUiii.com 及教程作者,并附本文链接。谢谢各位编辑同仁配合。UiiiUiii 保留追究相应责任的权利。

复制本文链接
img

发表评论 快来秀出你的观点

还可以输入 800 个字
yzm
 
 
加载更多评论
没有更多评论了

优优教程网 365 天打卡计划

点击 #优设每日作业# 进入微博超话页面,上传并发布你的练习作业,话题微博格式【 优优教程网365打卡计划 – DAY 01 】,优秀作业将有机会被 @优优教程网 官方微博转发点评。

/

支持键盘 ← → 键翻阅图片