20分钟速成Principle跟随交互和曲线运动[带源文件]

动画制作对于设计师来说也是必备技能啦,而Principle就是一款能让你快速学成动画的“利器”,一直以为Principle是做不了生动的动画的,但是今天这个教程,将会让你在20分钟内学会这个生动的动画,学会了它,我相信一般的交互动画设计都是小case拉,enjoy!

首先,我们先用Sketch画出大体造型,形象很简单这里不做过多介绍,但要注意的是尾巴部分,这里我做了一个半弧形的尾巴,主要思维是通过转动半弧形尾巴来实现小猫甩动尾巴的效果,半弧的尾巴用圆形描边,然后减去一半,再把描边设为圆角顶端就出来了。

(为了防止穿帮,在弧形尾巴上加了一个白色的图层做遮罩。)

最好再给每个图层命好名,方便导入Principle后快速整理。这里我把两种状态的眼睛和嘴都显示出了,为了方便导入后做调整。

然后新建Principle,点 Import 导入Sketch的图层

导入后我们分析一下原作的效果,他的小猫在运动时脸部(胡子、眼睛、嘴)保持相对位置,这样我们可以把相对位置的图层合并到一个组里。

点击Rectangle新建一个图形,把它放置最顶层,并把它的位置调整在画面中心,设置形状的颜色透明度,使得能够看懂见后方形象。

保持良好的习惯,给新建的图层命个名,然后在给这个形状添加移动属性,x轴y轴都选择Scroll(遮罩可去掉)。添加完可以在监控区域试一下效果。

添加完属性后点Drivers展开控制区域,Principle我是自学的,个人理解这里是个“触发开关”的操作区域,可能解释的很野路子,大概意思是我设置一个有移动操作的组,选中其他图层后,可以设置移动组移动到特定位置时触发一些动作。

我给刚添加的图层加完移动属性后命名为“控件”,选中其他文件后这里就会显示这个效果,上面时“控件”,下面是选中的图层。

在这个很像flash的界面里,移动类似时间轴的指针,你会发现你添加属性的图层位置也发生了变化。

(下图是我把“控件   ScrollX”的位置移动到100,下面画板上的图层向左移动了)

 

接着我们选中“脸部”这个组,在x轴0的位置上点加号添加一个关键帧,这里我们想要“控件”在x轴上的发生位移,让脸部也触发移动,所以点完加号后选择“X”。

移动指针到 -100 再打一个X的关键帧,这里我们可以看到“控件”区域向右位移了,我们现在需要移动“脸部”组的X坐标也向右移动,调整完后再把指针调回0。

现在你可以在演示区域向右移动下控件,你会发现小猫的脸部也跟着动了。同理,在100的位置也打上X轴关键帧,X坐标向左移动。

在“控件 ScrollY”也一样,先在指针0的位置给“脸部”打上Y关键帧,移动到-100 再次打Y关键帧,接着移动“脸部”组的Y坐标,向下移动位置,同理,添加100的Y关键帧,让脸部向上移。

(都添加完应该是下面这样子)

其他组件(鼻子、耳朵、身子)也是一样的原理,添加关键帧调整位置,调整位置时要注意合理性,例如小猫向上看时应该是抬头状态,耳朵应该往下等等。

都添加完,整个跟随动画算大体完成,但画面比较呆板,下面我们来调细节。

首先是耳朵。

展开“脸部”组,再次展开“耳朵”,可以看到这里做的左右耳朵是分开的,为了方便调整细节。这里我们想要让小猫在上下看时耳朵发生一点点角度变化,这样显得更可爱。

选中右耳(选择左右随意…),因为是上下移动控件发生变化所以我们在“控件   ScrollY”指示0的位置添加Angle角度的关键帧,在移动到100再次点加号添加关键帧,给右耳添加一个20度。

另一只耳朵操作步骤类似,转动 -20度,设置好后可以到监控区域上下移动试试效果。如果觉得还不够生动,可用在 -100的位置添加关键帧,向反方向转动。

下面我们开始调眼睛。

我们想要的效果是一开始只有圆眼睛,向上看时才变成眯眯眼,所以我们需要选中“眯眯眼”这组,在“控件   ScrollY”指示0的位置添加Opacity透明度的关键帧,调整透明度为0%,向100方向移动大概一半的位置,再打关键帧,[然后注意了]再向右移动1个单位,继续打关键帧,调整透明度为100%。

(这里一共打了3个关键帧,前两个透明度为0%,最后一个为100%)。

接着我们选择“圆眼睛”,操作与上一步基本相同,在对应的同样位置依次打3个关键帧,但前两个透明度为100%,最后一个为0%。

这样眼睛也基本完成,我们看下效果。

继续往下,调整嘴巴。

嘴巴想要的效果是眼睛眯起来时,嘴巴张开。所以依然是在“控件   ScrollY”指示0的位置添加关键帧,这里我们选中“嘴巴”图层,依次添加Y和Height两个关键帧,向100方向移动大概一半的位置,再分别打关键帧,然后把指针滑动回0。

[这里注意了]我们在指针0的位置调整“嘴巴”的高度为0,然后调整Y坐标, 让它到嘴唇的中间的位置。(这里可能跟视频中不太一样,这样做更简单)

然后选择“嘴影子”,也是向上移动,嘴巴张开时出现,所以在“控件   ScrollY”指示0的位置添加Opacity透明度的关键帧,调整透明度为0%,向100方向移动大概一半的位置,再打关键帧,调整透明度为100%。

设置好后的效果应该是这样的

现在觉得控件的方形很碍眼,所以我们要把它的颜色透明度设置为0%。

(不是调整“控件”文件夹,而是调整“控件”文件夹展开后里面的矩形的颜色)

这样一个单纯的脸部跟随小猫基本完成了,但还差最最重要的尾巴…

调整尾巴前,我们需要当前画板来回自动跳转。选中当前画板,右侧会有个小闪电的标志,点击它,选择Auto不要松鼠标,然后滑动回当前画板 ,松开鼠标,你会得到第二个画板。

选中第二个画板,同样点击闪电,选中Auto不松鼠标,滑动回第一个画板,松开。这样两个画板开始自动来回跳转。

在第一个画板复制“尾巴转动”,然后粘贴2次,得到3个弧形的尾巴的图层(一会儿我在解释为什么一共要3个),接着选择第二个画板的“尾巴转动”,同样复制后粘贴2次,得到3个弧形尾巴。

然后选中第二个画板的第一个“尾巴转动”,转动30度。

转动完可以用鼠标,或者调节x轴y轴来让它与“尾巴1”图层对应上。

继续选中第二个“尾巴转动”,旋转60度,依然是用鼠标或者调节x轴y轴来让它与“尾巴1”图层对应上。

选中第三个“尾巴转动”,选中90度。还是将其对应上“尾巴1”图层。

分别旋转并对应完后,到监控区看看效果,如果有明显不协调或错位情况,可以同时选中“尾巴转动”的三张图,一起降低透明度,达到层叠可视的效果。

然后放大画板,微调对齐,对齐后恢复透明度100%(这里我试过1个、2个的弧形尾巴,效果都不是很好,建议用3个尾巴层叠。2个也勉强可以达到效果,个人喜欢用3个。)

尾巴的曲线运动算是出来了,但效果像又长出来了一节尾巴,所以我们需要分别在两个画板中把“尾巴遮罩、尾巴转动三张图、尾巴1”成组,把第二个画板中成组的尾巴向身体方向移动。

调整第二个画板中尾巴影子的长短到合适位置。

这样一个尾巴可以自己动,表情可以跟随手指交互的小猫就完成99%了…为什么是99%呢,因为我们发现在尾巴甩的太慢了…有点僵硬,我们可以点Animate来调节尾巴的速度。

点击Animate后,先随便选中一根跳转指示线,你就可以看见每个图层它跳转时起始和结束的时间了,这里全选后稍微调快了一点,根据个人喜欢可以一点点尝试吧。

以上就是如何用Principle做一个曲线移动的土方法,举一反三还可以变变造型或做一些圆形的加载等等,例如…

注意:源文件与文章中的效果略有出入,所以如果你能做出来就不必下载了,当你碰到问题才需要下载源文件。

原文地址:http://www.zcool.com.cn/article/ZNDUyMTQ0.html

下载信息

-------[下载需要登录]-------

登录 免费注册

20分钟速成Principle跟随交互和曲线运动[带源文件]》有2条评论

  • Courier 说:

    2017年4月19日 10:04

    可以可以,这个绝对可以

  • liusichao 说:

    2017年5月18日 05:05

    请问一下principle怎么导出GIF动画?

发表评论

返回页顶