恭喜你成为UI中国推荐设计师 (详情)

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

QC+Origami打造可交互开关动画

原创文章 分类: 教程 版权: 原作者: 原作者
58138 174 47 38
2014-05-07
0.0
首页推荐

 

 

软件需求:

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

完成!

注:本文的效果不是特别完美,仅仅提供制作思路,各位在做的时候需要精心调节参数。

 

  

最后补充了一个源文件,供各位参考

    

   

    

 

 

 

 

 

 

 

       

 

 

 

 

 

 

 

 

 

 

 


推荐人:

UI中国

MartinRGB

http://www.MartinRGB.com

17017粉丝/413关注

国民爱豆首页霸主身经百战分享帝lv.3活雷锋
MartinRGB.comIcon Freebie - Code
1
suerbb

瑕不掩瑜,继续学习~谢谢!

精彩!

您确认要推荐?

该作品发布时间:2014年05月07日

评分

完整度

启发性

勤奋性

排版布局

推荐心得

建议20-200字以内

0/200

扫描二维码
去手机端查看海报

MartinRGB

TA已经获得20枚勋章啦

  • 成就勋章

    • 特别勋章

    • 身份勋章

  • 已拥有

  • 作品

    创造者才是真正的享受者。

  • 经验

    经验是一所好学校,可它的学生却经常旷课。

  • 活跃

    大神都是从围观群众开始的

  • 拓展

    作品、经验、活跃还不能满足你?

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票

账号或密码错误,请重新输入

账号或密码错误,请重新输入

登录

账号或密码错误

发送验证码 120s 验证码错误

登录

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2020 UI.CN