软件需求：

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

完成！

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

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