Principle制作可交互小狗动画

原创文章 分类: 教程 版权:
6600 163 162 31
更新于:2018-07-31
87.0
编辑推荐

你们要的动效教程,很简单哦~

准备工作


1、所需工具

Apple电脑、Sketch、Principle;   

Sketch 48.2 下载地址:网盘

Principle 3.7 软件下载地址: 网盘

动效小狗Sketch源文件:网盘


2、相关说明

首先,Principle是一款很好用的软件,学习成本相对AE较低,交互必备,老少皆宜~

然后,因为Principle是主要针对交互设计的软件,因此其功能具有一定的局限性,大家想做比较细腻的动画,还是推荐AE哈(有机会给大家分享AE教程)。。。

最后,本次教程为基础教程,相信你跟着教程慢慢做,肯定能做得出来。如果想对Principe了解更多,还是需要系统的学习滴~


教程开始


1、在Principle中导入动效小狗的Sketch文件(要确保动效小狗的Sketch文件是打开的哦~)导入Sketch素材

2、按下快捷键R绘制一个矩形,拉伸至与画板一样大小,设置填充的不透明度为0,命名其为操控层,并设置其水平为拖拽(这一步是操控下面的动效元素的准备工作,如果不明白原理的话,建议看下Principle官方教程哈)

绘制操控层

3、打开联动,选中“喜欢”群组,在联动400的位置添加缩放效果

Image title

4、将联动的坐标从400移动至580的位置,并调整“喜欢”的缩放值为1.3,在Principle右侧的演示窗口中,手动左右拖拽即可预览简单的动画效果啦!(鼠标按住不松左右拖拽哦~) 是不是很简单!哈哈。。。

Image title

5、同理我们选中“bg-平静”,设置联动中位置从400到580的不透明度100%减至0%,这样背景色就在预览窗口拖拽的过程中就从蓝色(平静小狗)变为红色(高兴小狗)了。很简单吧~

调整背景

6、继续继续!我们设置“眼睛-高兴”“眼睛-平静”“下巴-阴影”“鼻子”“鼻梁”“身体-白” 在联动位置400至580的中心Y值向上到合适位置(具体位置以视觉为主)向上移动

7、这时我们发现眼睛有三双!没关系,接下来我们调整眼睛。为了实现眼睛的变换,我们可以简单粗暴的在联动500至503的位置设置“眼睛-平静”不透明度100%至0%的瞬变,同时设置“眼睛-高兴”从0%至100%的瞬变;同理在向左拖拽的过程中,在联动300至207(左右对称嘛~)的位置设置“眼睛-平静”不透明度100%至0%,“眼睛-沮丧”不透明度0%至100%。右侧预览一下效果~

Image title

8、接下来我们调整"嘴巴"、"舌头"。将联动的位置调到580位置,选择“嘴巴”“舌头”,手动移动到合适位置。

移动嘴巴、舌头

9、在联动580至600的位置设置“嘴巴”的高度由2至20的变化,不透明度0%至100%的变化,嘴巴就这样调整好啦!

Image title

10、接下来调整“舌头”,点击创建组件,在组件中选择自动动画(自动到本身),并手动调整其中一个舌头的高度,再选择自动动画

舌头-创建组件

舌头自动

Image title

11、打开动画面板,分别点选“舌头自动”“舌头 2 自动”动画线,并框选动画关键帧调整持续时间值为0.14

调整时间

12、返回实例,选中做好的舌头组件,重命名为“舌头”,设置其在联动位置590至600的不透明度0%至100%的变化。调整联动位置至400,预览窗口看下效果吧。

舌头透明度

13、接下来调整尾巴,Command+D,复制一层“尾巴2”,创建“尾巴”为组件,点选尾巴面板,将"尾巴"的画板宽高调整一下,同做舌头动画一样选择自动动画,调整"尾巴2"的角度并选择自动动画,并调整尾巴的动画持续时间为0.14(我是欢快的小尾巴~)

尾巴创建组件

Image title

Image title

14、接下来在联动580至582的位置分别设置“尾巴”“尾巴2”的不透明度0%至100%、100%至0%;

Image title


做到这一步,你大概能得到这样的效果:

Image title

好累!好累!好累!(累的事情说三遍!)


好啦~到了这一步,相信你已经能预览到神奇的效果了,接下来的动画就很简单啦!亲们可以自己尝试做完整哦~


注意:在Principle预览窗口操作的时候,最好把联动的时间线复位至400位置,然后左右拖拽的时候记得按下鼠标不要松哈(因为操控层是拖拽效果嘛)


如果、如果、如果!你还是做不出来,那我就把做好的完整的Principle源文件放出来吧:网盘


最后,出教程这么,不 关注 / 赞 一波吗(邪恶.Smile.jpg)



Peffy

UI设计搬砖者 | 微信: Peffy123

176粉丝/24关注

一些平时的动效练习 | 原创及临摹
2
ziyannznl

https://www.zcool.com.cn/article/ZNDUyMTQ0.html原版教程

精彩!

Peffy

Peffy

UI设计搬砖者 | 微信: Peffy123

扫描二维码
去手机端查看海报

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2018 UI.CN