Principle教程!制作按钮切换动效演示教学

分享到:更多 ()

Principle出了有一阵子了,确实不错~

花了几天时间学习了下principle,似乎很强大。据说更新了一个超牛逼的功能,可以导入视频和音频,晚上回去试试。

本来想做个夸张点的,怕没接触过的人不熟悉,所以先来个简单点的试玩一下,提下你的兴趣。(其实夸张点的我也不会!行不行!)

基础的东西就不说了,什么哪个工具是干嘛的,用过PS、sketch什么的软件的人看下基本都能了解;没用过这些软件的,嘿嘿。。。

首先把在sketch中做好的俩小东西导入到principle中,就下面这俩兄弟:

(呆总:真想录个视频扔进来,打字烦)

这时候PP(principle)中是这样的:

接下来相当简单,选择第一个三条杠的面板,有个小闪电,点击后出现下面这货:

选择 Tap 连接到第二个面板(同学们,作图的时候要开心点);

看到没,是不是变成这样了?试着去点击下操作窗口,妈蛋,是不是动起来了!

动起来之后,就要补细节啦。不然太丑了。

看到左上角的rectangle么?就是它,点击下,面板里面出来一个矩形(在指定面板之后再去点击);

就是这个东西:

然后在左边的编辑面板中调整这个矩形的形状和颜色:

然后把它移动到中间去(这里很多“然后”,语文不好,只会用“然后”):

特么的把它移到底层,放在这个白杠后面,就不见了;再同样的方法,在第二个面板中画一个(复制过去就行了其实);

把比例(scale)改为8,差不多就好;

然后也扔到底层去,这里把透明度弄成0,接着你可以点击下操作窗口了,是不是有一层涟漪~~~~~飘呀飘~~~

但是!!!!!!这圆扩散的太特么快了,怎么慢点?用到新知识了,点击这玩意儿:

屏幕下方出现了这个传说中的时间轴:

鼠标放上去,滚到最下面(找到自己那层圆的位置):然后把下面的这个长度拖一下,原来的两倍就差不多了。

再去点下操作窗口,点!是不是感觉好多了!  然后!!!!!  是不是想问怎么循环,不想只来一次就要重新去点界面,再重新展示动效?

下载源文件吧,打字打不动了,反正也简单。  以后我要录视频,fu。。k~~

割————————————————————————

这里推荐两个人,一个是 @驯鹿,还有个是 @盗盗。

前面那个出过基础的教程,比我这个好看多了;

后面那个人,有一个网页,专门收集pp动效源文件的,还有中文的使用文档,我之后录的小教程很多都会是这里面筛选出来的;

下面附上链接:

http://www.ui.cn/detail/73796.html

http://principleux.com/

 

分享:呆呆丶

 

最美UI|学ui设计联盟|一起努力学设计!

最美UI zuimeiui.com 学ui设计最值得关注的UI学习教程交流平台! 每天发布高质量的设计教程和分享设计经验,帮助喜欢UI设计的初学同学快速转型,我们给大家提供更多免费学习ui的机会,想成为设计师的你赶快加入吧! 给最美UI点个赞!有你的支持是我们前进的动力! 猛点这里 >>

最美ui微信公众号zuimeiui要养成关注干货好习惯哦!

[ 最美特色栏目推荐 ]
设计导航:全球顶尖设计网站推荐,设计师必备导航! → 猛戳这里
设计欣赏:收集海量精选APP截图,让你设计灵感小宇宙大爆发!! → 猛戳这里
设计师:三人行必有我师。在这里可以交到良师益友哦!还不赶紧加入? → 猛戳这里

【最美UI 原创文章 投稿邮箱:tougao@zuimeiui.com | 期待您的投稿!我们将一一答复!】

未经允许不得转载:最美ui » Principle教程!制作按钮切换动效演示教学

1
分享到:更多 ()