WINDOW党福利!PC端适合设计师的免费动效神器PIXATE

分享到:更多 ()

一篇成功文章的开头皆需寒暄几句:大约一个半月以前,ME Workshop知名逗比马丁· 胃发表了一篇关于QC+Origami 动效设计的文章,引来无数Mac用户的热捧和无数Windows用户的哀嚎(买不起Mac就要遭到歧视么…),广大Windows用户都用不了算神马动效神器!?今天就来介绍一款妇孺皆爱、老幼皆宜、比QC简单易上手、比AE可交互的全平台动效神器 —— Pixate。

wy20150805 (1)

优点1:适合设计师的思维方式

QC的好处是可以比较方便的和程序猿对接,很多动效的实现逻辑和前端的代码逻辑是相通的。也就是说,使用QC虽然不需要写代码,但归根结底还是猿类的思维方式,对于我们这些一点代码不懂,逻辑能力又不是特别好的小小设计师来说,还是有些门槛的。看到满屏的连接线,就让人有点望而却步,搞不清其中的逻辑。

作为设计师,无论是交互还是视觉,无论是用PS、AI还是用Axure、Sketch,我们最最熟悉的一个概念,就是图层了。而Pixate的操作方式,同样也是图层的概念。Pixate的界面,乍一看有点像PS呢。

wy20150805 (2)

如上图所示,左上角是图层区,我们可以将视觉稿或是高保真的交互稿切图后导入Pixate中,所有的图层按照前后顺序出现在图层区中,与PS一样,上层的图片会覆盖在下层的图片上,图层还可以设置成组。历史记录区域也与PS很相似,记录最近的20步操作。值得注意的是,Pixate是随时保存的,如果操作了一堆之后,想要退回到20步以后,就再也回不去了…左下角是手势交互和动画区域,包括常用的手势操作(拖拽、单击、双击、长按、旋转、缩放、滚动)和常见的动效(移动、缩放、旋转、渐隐渐显、变色、改变图片、重复),我们可以将这些手势或是动效直接拖拽到图层上,图层就会实现相应的效果。界面右侧则是对图层属性和交互和动画属性的设置。图层属性可以用来设置图片的大小、位置、透明度等。重头戏是右下角的交互和动画属性设置,通过设置这些参数,可以将手势和相应的动画连接起来,连接完成后,一个可以操作、可以交互的原型就制作好了。

那这些参数该如何调呢?这里给出几个练习的链接,大家做几个实例之后,就会得心应手了。

优点2:实时预览,可交互

Pixate的另一个优点就是可以实时预览,并且是可以在手机上实时操作和预览。只需在手机上下载Pixate的app,iOS和Android都可以下载,通过wifi或是数据线连接电脑,就可以实时看到预览效果了。如果懒得连手机,也可以在模拟器上预览效果。

wy20150805 (3)

优点3:全平台

你可以online使用,也可以在Mac或是Windows上下载使用。Pixate支持多款iOS和Android机型,甚至支持Apple Watch、LG G Watch和Moto 360三款智能手表,可以说是全平台覆盖。

wy20150805 (4)

说了那么多优点,Pixate也有一些缺点。它还是更适合做页面级的动画,对于需要形变、非常细腻的复杂动画,有些无能为力。所以Pixate更适合交互设计师来表达界面逻辑,而更加生动有趣的loading或是彩蛋,还是交给视觉大神们,用Flash或是AE来做吧。

在哪下载?

说了那么多,快来看看在哪下载吧。大家可以在它的官网 http://www.pixate.com 下载使用。官网上同时还提供了很多Demo,可以下载来学习研究,Blog里的官方教学视频也值得一看。

最最关键的是,自从被Google收购以后,它就免费了!可以说是喜大普奔的好消息。大家快快下载来试试吧

作者:ME网易移动设计-子木yoyo

 

紧跟上面这篇动效神器Pixate的文发出来后,不少同学表示Windows党终于也有自己的动效神器了,趁热打铁,今天@Jaret_杰瑞特 给同学们带来一枚初级教程,做一个简单的圆形进度条动画,搞起来!

一个简单的Circle Progress动画效果。点击Download按钮,开始进行下载及进度条显示,并显示文字“downloading”。在完成后文字消失。

 1. 首先我们先整理下效果运行的大致思路:

在Pixate里制作整个效果,我们需要通过两个左右半圆在沿着一个圆形轨迹来进行中心顺时针旋转的更迭动画。其中左半圆起始时被白色cover挡住,然后从0点开始往6点方向顺时针旋转慢慢全部显示出来。而当左半圆完成180°旋转后,右半圆则跟上继续做6点到12点方向的顺时针旋转。同时,白色的cover将消失或移动到右半圆的下层。这样就大致完整了一个360°的绕圈运动

2. 开始制作:

dx20150806 (1)

如上图所示,是这个项目需要的一些基本资源素材:

( 资源素材的制作就不在阐述了,可以在AI、PS、Sketch或其他任何你会的软件里生成统一大小的PNG资源即可)

1. 需要一个透明镂空的背景轨迹(Transparent_circle_track);

2. 一个半圆的白色覆盖层(Cover);

3. 一个左半圆的进度条(LeftPart);

4. 一个右半圆的进度条(RightPart);

5. 可选项:一个按钮(Download btn)及一行运行状态时的文字显示(Downloading text)

将资源拖入画布后按照下图顺序排列图层:

(起始页没什么好说的。图层的排列还是很好理解的。点击的按钮顶层;透明镂空的背景轨迹一定在进度条和cover上;cover起始一定在两条进度条上;而left在right上面的原因,是我在这个案列中,我给cover使用了reorder的指令。便于制作,我之后将cover就直接set到rightpart的下面或者是直接置于整个的层底)

dx20150806 (2)

将资源全部放置于画布的中间,并将最后一层的“rightpart”的Opacity不透明度设置为0,使其完全透明不可见。

最后的效果应该是如下图:

dx20150806 (3)

现在来设置每个层级的具体参数:

先设置第一个按钮层:

因为是整个项目的起始触发,所以先给按钮层一个Tap交互属性:

dx20150806 (4)

接着给它添加一个“fade”的动画属性,设置触发按钮后,其本身会消失:

dx20150806 (5)

接着选择“leftpart”左半圆的那个图层,赋予一个“旋转”属性。让它在按下“下载按钮”1秒后,在2秒内完成一个自身180°的旋转

dx20150806 (6)

此时,再选择“rightpart”右半圆的那个图层,也赋予一个”旋转”属性。让它在按下“下载按钮”3秒后,在2秒内完成一个自身180°的旋转,紧接着左半圆完成另一半的运动。(为什么是3秒?因为做半圆完成自身的旋转是2秒,再加上1秒的延时,所以左半圆完成全部的时间是3秒)

dx20150806 (7)

因为之前将右半圆设置了全透明,所以要再给它赋予一个“fade”属性,让它重见光明。当然这个时间差也是3秒。

dx20150806 (8)

这个时候还有个问题就是在6点到12点范围内,白色的cover其实是遮住了右半圆的图层,所以我们也要在整个时候将白色的cover放置到最底层。拖拽一个Reorder动画属性给cover层,并设置“放置底层”。同样也是3秒的时间差。因为这个时候左半圆刚好完成了他自己的旋转。

dx20150806 (9)

最后给“downloading”的文字增加一个“Fade”属性让它在整个流程跑完后就消失。
因为跑完整个流程是“左半圆”的2秒加上“右半圆”的2秒,再加上起始左半圆的1秒延时。所以整个过程是5秒

dx20150806 (10)

好了,至此全部的设置完成了。点击一下download的按钮就会看到圆形的进度条已经可以完美工作了!

各位还可以根据需要制作一个“reset”的按钮,让其跑完一圈后“重置”。这里就不再深入了。

抱着“自己动手欢乐多的原则”这个案例就不提供源文件下载了。大家自己多动动手脑,一起进步吧:D

 

作者:@Jaret_杰瑞特

 

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

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

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

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

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

未经允许不得转载:最美ui » WINDOW党福利!PC端适合设计师的免费动效神器PIXATE

0
分享到:更多 ()