编辑:陌北默    发布日期:2020-10-28 00:00:00

小编:五天Principle从入门到精通,一起来学习吧~

今天我们练习做一个非常基本的动画,熟悉Principle最基本的操作和界面布局。那么课程开始啦。

在这里,我们选择做一个toast动画。设计师们有了自己设计的toast体系,就可以告别系统原生的toast。同时,我们也可以拿着实际效果,在开发小哥面前演示toast动效,再也不用比划半天也说不清楚。

 

toast动画

软件打开后,有一个300*300的Artboard在界面中,使用过Illustrator和Sketch的人应该理解。这是一个画板的概念,我们设计的各种元素都应该在这个画板上。工具栏也没几个按键,刚一开始的话,不容易被理解。即使对于有AE基础的人来说,开始也要先了解Principle的动画制作逻辑的。我们一步一步地讲并配以截图,第一节讲得详细一点,力求打好基础~

principle-toast-animation-production01

初次打开Principle

 

第一步

选中某元素,在界面的左侧是该元素的属性栏。首先把Artboard的大小设成常规的手机屏幕大小“750*1334”。接着,我们点击左上角的“Rectangle”,页面中会新建一个方块,我们再点一下“Text”,然后屏幕中又出现一个方块和两个单词。

principle-toast-animation-production02

 

第二步

在左侧属性栏可以修改方块大小(当然也可以拉方块边缘改变方块大小)。鼠标选中文字,左侧边栏可以修改文字的属性,双击文字可以修改文字内容。如下图:

principle-toast-animation-production03

 

属性栏↓

principle-toast-animation-production04

 

第三步

现在来到了我们关键的一步:怎么出现动画效果。

选中Artboard1,它周围出现绿色的框,右侧出现一个⚡️闪电图标,这个就是动作触发的条件编辑入口。

principle-toast-animation-production05

我们点击这个闪电,出现一个菜单,这些就是动作触发的条件们。

principle-toast-animation-production06

后面会对这个动作触发条件做详细的讲解。

重点来了!我们选中“Tap”并拖动,发现一个蓝色的箭头,将箭头指向Artboard1并松开鼠标。然后如图,工作区又新增了一个画板,自动命名为Artboard2: 

principle-toast-animation-production07

然后,我们将Artboard2上的toast(方块和文字)向下拖动一段距离,使其和Artboard1上的toast有位置变化,如图 :

principle-toast-animation-production08

这个时候,我们的设计就会动了!

查看动画方法:鼠标选回第一个画板,右侧的动效预览窗口会回到初始状态,在预览窗口中,鼠标点击一下(即我们刚刚选择的Tap触发条件),就看到toast动起来了。动效如下:

principle-toast-animation-production09

我们也可以数据线接到手机上,打开装的Principle mirror查看动效。

通过上面这个toast的动效例子,我们可以理解Principle的动画原理。如图:

principle-toast-animation-production10

其中1,2,3步我们已经做到了,第4步并不是必须的。下一节我们会针对动画的形成逻辑有更深入的讲解。

 

总结:

第一天,我们学习了:

· 新建文字,文字的修改

· 新建矩形,矩形的修改

· 动画的触发

· 矩形和文字的【移动】动画

· 动画的预览

 

预告:

第二天,我们将会学习

· Sketch文件的导入

· 补间动画逻辑

· 透明度动画

· 缩放动画

· 时间轴的控制

· 动画的其他触发条件

Principle for Mac Principle是前Apple工程师打造的一款交互设计工具,五分钟即可制作出一个具有完整交互动画的原型,并且可将交互动画生成视频或者Gif分享到社交平台。;您可以免费下载。 英文 · 5.00 MBM ·

热点资讯

更多
英特尔正与台积电接洽,虑将部分芯片生产外包给台积电 近期英特尔因7nm制程落后、苹果M1芯片冲击等压力,被曝正与台积电接洽将芯片制造业务外包,从而可投入更多资源至芯片设计。
苹果iPhone 12国行上季度热卖:拿下20%份额 销量达1800万 2020年第四季度iPhone 12系列在中国大陆销量达1800万部,苹果智能手机份额回升至20%。文章梳理了其销售结构与2021年面临的安卓旗舰竞争压力。
高通斥资约90亿收购芯片公司NUVIA 前苹果芯片架构大神加盟 2021年1月13日高通以14亿美元收购芯片初创公司Nuvia,旨在将其定制ARM架构技术用于智能手机、笔记本及汽车处理器,并减轻对Arm依赖。
大公司晨读:B站计划3月港股上市;苹果斥资1亿美元力促种族平等 本文汇总了近期多项科技动态,包括B站拟在港上市、苹果斥资推动种族平等、富士康与吉利合资电动汽车、英特尔任命新CEO、高通收购Nuvia挑战苹果英特尔,以及外交部回应美胁迫禁用中国5G设备。

相关教程

更多
官网上线家居板块,苹果在智能家居市场能掀起多大水花 苹果中国官网近日上线“家居”板块并引入第三方配件,文章分析HomeKit生态在华发展缓慢的原因,指出其产品线窄与兼容性差等挑战。
2022年国内手机市场回顾:寒气传递到每个厂商,华为苹果抢占新高地 2022年国内手机市场出货量同比大幅下滑,本文从折叠屏逆势增长、联发科切入旗舰与卫星通信创新等角度分析厂商破局路径。
苹果不玩性能了?传iPhone15芯片或更注重电池续航而非性能 外媒爆料称iPhone 15系列将搭载注重能效的A17芯片以改善电池续航,全系可能标配灵动岛设计,Pro版采用3nm工艺,并或因欧盟规定改用USB-C接口,定价策略也有调整传闻。
步子太大?工程设计失误或成A16升级不大的诱因 文章分析了苹果A16仿生芯片GPU性能未达预期、被骁龙8反超的现象,指出原型功耗过高砍掉新功能及人才流失是主要原因。

相关软件

  • Principle for Mac 英文. 5.00 MBM · Principle是前Apple工程师打造的一款交互设计工具,五分钟即可制作出一个具有完整交互动画的原型,并且可将交互动画生成视频或者Gif分享到社交平台。;您 ...