其他教程 2022年04月23日
0 收藏 126 点赞 4,899 浏览 1778 个字
摘要 :

今天给大家分享一个动画小教程(使用软件 Principle),手把手教你制作撸猫 Demo 动画,希望可以带给大家更多帮助! 小可爱们,我这里会定期推送插画、UI设计、排版等相……

今天给大家分享一个动画小教程(使用软件 Principle),手把手教你制作撸猫 Demo 动画,希望可以带给大家更多帮助!

小可爱们,我这里会定期推送插画、UI设计、排版等相关文章教程,有事没事来逛逛啊;
设计路上在学习,永不停歇,我们一起加油~

 

教程开始啦!

Principle 简单教程,适合新手;
动画主要应用工具:Sketch、Principle;

教程要点:Driver 的用法。

 

接触 Principle 也没几天,但是说实话是真的好玩。最近刚在 YouTube 上看到一个大神撸了一把机器人,我想着就撸个猫吧。

手把手教你制作撸猫 Demo 动画

 

不用担心,既然是新手教程,那肯定是最简单的。猫也很简单的,下面我们来说说具体步骤吧!

 

第一步:

先在 Sketch 上画一只猫猫(这个我就不讲怎么画了,实在太简单,大家也可以想画啥就画啥),然后给你图层命好名。

手把手教你制作撸猫 Demo 动画

 

第二步:

(额。你首先得有 Principle 这个软件)打开 Principle。

手把手教你制作撸猫 Demo 动画

导入 Sketch 文件,(它会自动导入你刚才画的猫的文件)

手把手教你制作撸猫 Demo 动画

 

第三步:

在图层最上方插入一个矩形图层,命名为 Driver(你随意),大小跟你画板一样大,将 Driver 的交互属性改为 Scroll 。

手把手教你制作撸猫 Demo 动画

透明度调整到 40%(这个只是为了看起来方便,后面会调到 0)这时,你就能在预览区拖动 Driver 这个图层,并且它会自动回到画板中心。

 

 

第四步:

点击上方的 Driver 按钮:

手把手教你制作撸猫 Demo 动画

会有出现一个时间轴工作区,全选你想让他们产生动画的所有图层。比如我想让猫头跟着我的光标旋转,那我就选中猫头部所在图层,然后给他们添加关键帧。

手把手教你制作撸猫 Demo 动画

手把手教你制作撸猫 Demo 动画

 

第五步:

点击选中的图层右侧的加号添加 Centerx,按住空格键,将关键帧拖到中间一点。

手把手教你制作撸猫 Demo 动画

把时间轴拖到-140,选中猫脸所在的所有图层,点击后面的加号,打上关键帧。

手把手教你制作撸猫 Demo 动画

 

选中猫的两个眼睛和嘴巴的图层,移动到右边一点(注意此时的关键帧应该是在-140的位置)

侧面的眼睛应该是长方形的,所以我们可以选中眼睛添加 Width 属性,然后添加关键帧,再在左侧属性面板中更改 Width 的值,效果如下:

手把手教你制作撸猫 Demo 动画

 

脸也应该有相应的变化,我们可以让脸窄一点,所以选中脸图层,添加 Width 属性。

手把手教你制作撸猫 Demo 动画

(其他效果也是在相应图层上添加,比如想让眼睛眨呀眨,就可以在眼睛图层添加 Height 属性。也可以做其他属性,比如加一个投影属性,填充属性等,添加属性后记得要给属性图层打上关键帧,然后回到 0 的位置也要打上关键帧,且属性值做相应的调整,最后你时间轴上每一个点都应该有关键帧。打上关键帧的图层后面的图标是红色的,没打上就是蓝色的。)

 

第六步:

左边也是一样的,将时间轴拖至 140,给头所在的所有图层打上关键帧。选中猫眼睛和嘴巴,移动至左边一点,将猫脸变瘦一点(由于之前已经给了 Width 和 Height 属性,后面打关键帧就不用重复新增属性了,直接修改即可)

手把手教你制作撸猫 Demo 动画

接下来是上面和下面。

 

 

第七步:

将时间轴拖至 0 的位置,选中头部所有图层,时间轴工作区会出现“6selected layers”,点击它后面的加号,添加 Center Y(注意是 Scroll Y 面板下面的)。

手把手教你制作撸猫 Demo 动画

将时间轴拖至-140 的位置,给猫头图层打上关键帧。(可以发现矩形 Driver 图层往下移了)这时我们选中眼睛和嘴巴图层,向下移动。给眼睛添加 Height 属性,缩小 Height 值。记得回去 0 的位置,打上关键帧,更改属性值。

 

第八步:

将时间轴拖至 140 的位置,给猫头图层打上关键帧,同样的方法更改眼睛嘴巴和脸的属性,都要打上关键帧哟。

对了,猫头部有一个接收器,也是要小小的动一下的,这个就当是布置的作业吧!相信大家都会调的。

 

第九步:

选中 Driver 图层,将 Driver 的 Opacity(透明度)改为 0. 这样就相当于猫猫的头部会跟着我们的鼠标动啦。

 

最后一步:

屏幕录制 Gif(有 iPhone 的同学可以下一个 Principle Mirror App,可以直接下载 Demo,然后用手机就可以在线撸猫啦)点击录制图标(如下图),然后自己拖动鼠标,让猫猫跟着你动。

手把手教你制作撸猫 Demo 动画

录制完成后,点击红色录制图标,结束录制。

手把手教你制作撸猫 Demo 动画

 

点击 Export 就可以了。如果小伙伴们想知道怎么导出 iphone Demo 的,可以私信我呀。

是不是很简单呢,总结来说其实也就一个步骤重复 4 遍而已,喜欢可以关注编编呀!

手把手教你制作撸猫 Demo 动画

 

原文地址:黑马家族(公众号)
 
作者:黑马青年
 
手把手教你制作撸猫 Demo 动画

 

转载请注明:极致设计 » 手把手教你制作撸猫 Demo 动画

微信扫一扫

支付宝扫一扫

版权: 转载请注明出处:https://www.jizhisheji.com/111498.html

相关推荐
佳选
【字体设计】品牌标准字怎么设计?
从设计的角度来分析如何快速抓住品牌和企业的调性,从而确定标准字体的具体设计方向和形式。 小可爱们,我这里会定期推送插画、UI设计、排版等相关…
日期:2022-05-27 点赞:93 阅读:4,039
精选
5个超酷的标题设计技巧,So easy!
优秀的标题设计除了可以把标题中的信息清晰传达之外,还要与画面的风格相符,并且能使画面整体更加美观和更有设计感。5个标题设计技巧分享给你。 小…
日期:2022-05-26 点赞:236 阅读:1,402
优质
Blender实战案例教程!卡通小狐狸角色建模:01 基础形建模
教程作者:DesignHunting(授权转载) 交作业:#极致设计每日作业# 文章编辑:@雪寄草 关于教程 本期的 IP 角色设计案例,手…
日期:2022-05-23 点赞:0 阅读:839
精选
即时设计基础教程!NO.12 即时设计综合使用技巧
本集讲师:@YY 免费使用即时设计,请点击右侧链接👉 即时设计 获取海量免费设计资源,请访问👉 资源广场 什么是即时设计 即时设计是一款全平…
日期:2022-05-23 点赞:0 阅读:474
精品
造字神器 Glyphs 教程!字体设计系列教程 NO.10 背景图层
教程作者:杨洋(极致设计平面设计实战营讲师) 交作业:#极致设计每日作业# 文章编辑:@雪寄草 软件介绍 Glyphs 3 是一款 Mac …
日期:2022-05-23 点赞:0 阅读:1,006
佳选
PPT教程!让PPT更有设计感的30种绝佳方法(第6期)
教程作者: 老Lin(授权转载自公众号:一六视觉) 交作业:#极致设计每日作业# 关于教程 如果你也想让PPT能眼前一亮,演示时被更多人认可…
日期:2022-05-23 点赞:0 阅读:446
发表评论
暂无评论

还没有评论呢,快来抢沙发~

助力内容变现

将您的收入提升到一个新的水平

点击联系客服

在线时间:8:00-16:00

客服电话

400-888-8888

客服邮箱

ceotheme@ceo.com

扫描二维码

关注微信公众号

扫描二维码

手机访问本站