header_v1.7.40

Principle轻松玩转路径动画

26天前发布

原创文章 / UI / 教程
鸽小子 原创,如需商业用途或转载请与鸽小子联系,谢谢配合。

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

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


大家肯定都被这个“路径动画”四个字骗进来了吧。其实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 调整动画曲线)


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



本文由 @鸽小子 原创,未经许可不可转载。                                                                   源文件在这里👇



1339

    文章信息

    • 文章标签

    没有新消息

    提示文案

    提示文案

    提示失败
    提示成功