提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
软件需求:
Quartz Composer
插件需求:
Origami 1.2下载地址:http://facebook.github.io/origami
jQC1.0下载地址:http://qcdesigners.com/index.php/forums/topic/100/it-s-finally-here-j-qc-1-0-a-u/
我们来看看效果
这是最终结果
鄙人做的第一版,由于原带的Rounded Rectangle插件有锯齿,因此本教程中打算用jQC 1.0中得Rectangler来实现。
上图是肾机录制效果,这将是我们的参考
好了,废话就这么多,我们现在开始制作
UI.CN
—————————————————————————————————————————————————————————————————————————
步骤一:分析动画
1.首先,我们来分析一下这个开关动画的静态层面,细心观察的话,不难发现。整个开关由三层构成
(1)带阴影的白色开关
(2)开/关时消失/出现的白色层
(3)开/关时颜色绿/灰切换的最底层
2.其次,我们来分析一下动画效果
(1)白色开关点击后的运动分析:
A.立马出现拉伸形变,从圆形变为圆角矩形
B.然后横向移动
C.移动到指定位置后,挤压形变恢复为圆形
(2)中间白色层的运动分析:关闭时扩大,打开时缩小
(3)最底层的运动分析:打开时瞬间变绿,关闭时瞬间变灰
UI.CN
—————————————————————————————————————————————————————————————————————————
步骤二:静态视觉部分
1.首先打开Quartz Composer,创建新文件,将自动生成的Clear层颜色调为深灰色(Command+2,进入Patch设置)
创建3个“Rectangler”Patch(Cmd+回车可以调出Patch库),分别连接到各自Layer层的Image输入(如下图)
A.白色开关
构成概述:
此图形需要4个Patch构成——Rectangler(圆角矩形)、Image With Shadow(给图形加上阴影)、Shadow Info(阴影信息)、Layer(图层)
参数设置:
Rectangler参数参考如下图
Shadow Info参数参考如下图
连线:
Rectangler的Image输出->Image With Shadow的Image输入
Shadow Info的Shadow输出->Image With Shadow的Image输入
Image With Shadow的输出->Layer的Image输入
B.中间白色层
Rectangler Patch设置参数如上图,Layer图层Scale设置为0.93,其他保持默认不变
C.最低层
将中间层+Layer复制一份,重新命名为最底层,“最底层”设置参数如下图,Layer的Scale参数调为0.94
最后记得将Layer图层顺序调节为2,放置在最底层
完成后,右键点击画布,选“Add Note”,添加一个便签,命名为“静态部分”,让创作组织有序,效果如下
UI.CN
—————————————————————————————————————————————————————————————————————————
步骤三、设置可移动的可点击区域
参数设置:
Hit Area打开Setup Mode,宽高75,X Postion 45
Classic Animation的Duration设置为1(打算让动画时间为1s)
Transition的开始值为45,结束值是-45
连线如下图:
Interaction 2的右上角输出——>Hit Area的左上角输入
Interaction 2的Click输出——>Switch的Flip 输入
Switch的On/Off输出——>Classic Animation的Number输入
Classic Animation的Progress输出——>Transiton的Progress输入(Transition双击后改名为“改变点击区域的X坐标”)
Transition的Value输出——>Hit Area的X Postion输入
这里来简述一下原理:
当点击点击区域后(图中红色部分),触发经典动效,产生点击区域的位移(45到-45)
勾选红色部分,即可看到点击区域
UI.CN
—————————————————————————————————————————————————————————————————————————
步骤三:动画部分
A.开关的形变,及其移动
根据我这组参数设置,我观察到开关键的X轴位移是45——>-45
但真的如此吗,我们注意到当点击开关的时候,开关会有个形变
而Quartz Composer的坐标位置计算,是按照物体的中心点计算的,也即是说,在点按开关的瞬间,开关这个90px高 90px宽 45px圆角半径的形状
宽度瞬间由90px变为110px,如果此时X轴位置不变,那么开关就会“溢出”
所以,在点按的瞬间,除了宽度要从90px变为110px,开关的x轴坐标,要从45px跳入33px。
因此,为了达到更精确的控制,我选用了Switch->Smooth->Transition->Timeline这样的patch组合,能够根据时间控制数值变化。
a.位移部分
连线,Switch的On/Off分出来一个输出->Smooth的Value输入
Smoothed Value输出->Transition的Progress(起始0,结束1,代表点按开关后,就触发1s的动画)
Transition的Value输出->Timeline的Patch Time(之前要右键点击Timeline,如下图操作)
Timeline的输出接到开关对应Layer的X Postion
然后,我们在点击Timeline,按Command+2
这是时间-数值变量曲线(不会操作的拖动下面的一个小点,有操作快捷键),分别4个关键帧 0s 45 0.1s -33 0.9s -33 1s -45。
然后设置一下smooth patch,以便运动更加平滑
鄙人嘴笨,描述一下运动:0-0.1s,开关初始速度很快,但是加速度不断减小,从45迅速移动到33
0.1s-0.9s,匀速运动,从33到-33
0.9s-1s,初始速度很快,但是加速度不断减小,从-33迅速到-45
更多缓动函数请参考:http://easings.net/zh-cn#
所达成的效果:
b.形变部分
其实原理同上,开关的宽度 ,0-0.1s 90->110 0.1s-0.9s保持110不变,0.9s-1s,110->90
将上面的复制一份,设置下时间帧,如下图。
然后Timeline的输出接开关的Width in px
最后所达成的效果:
B.中间层的缩小/扩大 UI.CN
这个很简单,
Classic Animation的Progress->新建的Transition的Progress中
新建的Transition的Value->中间层Layer的Scale
Transiton的起始值0,终值0.93
(Classic Animation的Curve设置为Exponential in-out,Duration 为1s)
所达成的效果如下:
C.最底层的变色
分析动画,我们发现最底层瞬间变色,那么这个也很简单,新建一个Color Transition,
直接switch的输出接到Color Transition的输入上
Color Transition输出接到最底层的颜色上(如果之前你给Rectangler设置了颜色,那么接到Rectangler上,如果给Layer设置,那么接到Layer上)
记得颜色是绿变灰
最后的效果:
UI.CN
完成!
注:本文的效果不是特别完美,仅仅提供制作思路,各位在做的时候需要精心调节参数。
最后补充了一个源文件,供各位参考
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册