工具准备：

Quartz Composr+Origami+jQC 1.0

参考效果：

Path应用

想重做Path效果灵感来自《QC+Origami制作UI原型》这篇文章，但是并未仔细阅读制作步骤，里面关于坐标系问题说的比较好，制作部分比较麻烦。。。

素材准备：

文末提供sketch源文件下载

（偷懒了，大部分都是手机截屏，抠的）

第一步：事前准备工作

Origami搭建准备 三板斧

双击Layer Group，在里面将图像素材铺进去，排好序

将3-9图层，所有的坐标都设置为X postion=-270  Y Position=-518，将红色加号上方的蒙版图层Alpha值设置为0

第二步：创建点击按钮后的按压效果

连线设置，最后连接到红色加号上方的黑色蒙版图层的Alpha里

Hit Area的Layer信息（可以自己勾选Setup Mode来精调位置）

Transition的数值设置：

注：由于本案例效果比较简单，因此用了简单的mousedown（按压）+Interaction 2的Down（Drag也可）来模拟按压效果，用 mouseup（松手）来解决松手后的回复。

最后的结果：

第三步：小按钮飞弹效果

分析Gif图像，我们可以发现，

初次按压后，5个按钮逆时针旋转360度，开始启动弹出，最左上先行，按顺时针依次。

再次按压后，5个按钮顺时针旋转到180度时，开始启动弹回，最右下先行，然后按逆时针依次。

先来放置5个小按钮，位置需要稍微计算一下，我们来计算一下圆中各个点的三角函数

相机图标(x,y -270,-280) 定位图标(-179,-298)  音乐图标(-102,-350),引用图标(-50,-427)，睡觉图标（-32，-518），记下原位置（-270，-518）

switch后面这么连：

Classic Animation的设置，持续时间是1s,运动方式Exponential In-Out,运动曲线如下 ：

Z Rotation接到5个小图标Layer的Z Rotation上，最后效果：

下面做5个classic animation系列，这么链接：

各个Classic Anmation对应者5个小图标的 X Y坐标变换，第一个只Y轴移动，第五个只X轴，5个图标的起始量都是（-270，-518），终量参考上方三角函数计算，然后对应连接到各个图层上。

5个Classic Animation时间依次为0.6 0.7 0.8 0.9 1，运动方式Exponential In-Out，效果：

为了让来回的速度不一样，我们需要switch 接1+4 个transition来调节来回时的各种运动状态。

最上面的Transition控制来回的旋转速度，Value接Duration，开始0.5，结束1

下面的依次（第三个不用，因为0.8-0.8)

1 (1->0.6)

2(0.9->0.7)

4(0.7->0.9)

5(0.6->1)

效果（经过调试Z Rotation 前面的Classic Animation 运动曲线调节为）：

第四步：简单侧拉效果

在画布上找一处位置，新建下面的系列：

Transition的数值设置为0->580，下面依次连接到主界面：红色加号图标，蒙版图层，5个小按钮图标的X Postion上，

如果之前已经占用了X Postion，可以用Math Patch叠加，如下。新的输入要接在Math模块的下方（因为是相对增量）

对于X Postion没有占用的，Intial Value设置为原来Layer中的数值，新的输入依然接入到下方

展示一下连线：

现在要修改一下新建的Hit Area，让可交互区域也可以跟着移动

完成，欣赏一下效果：

Sketch素材源文件和QC动画源文件下方提供：

补充一个镜头感+透视感的gif（实验）