以下就开始整个模仿的过程，大致分为三步。
拆分后包含：
点击某一项后，使用在该行显示灰色半透明蒙
松手后，蒙板消失，表示选中的图标移至该行
其实Origami主要是用来设计交互、动画，其前置条件是已经有完整的图片资源。主要包含收下部分：
背景
选中图标
将选中图标放在背景图中即可，默认隐藏灰色蒙板
先实现点击松开时，选中图标移至相应的位置。
根据截图，计算中选中图标在各行时对应的坐标。第0行Y坐标为1110，第5行为630，可推出相应的计算公式：Y = 1110- 96 * i。这样，使用Index就可以实现点击与移动的对应关系。因为选中图标仅在Y方向移动，X坐标保持不变。
对于点击后的灰色蒙板，也可以使用类似的方式来移动。隐藏与否则可以通过控制Scale来实现，而Opacity则设置为0.3。
实现后的QC界面大概是：
好，这样就完成了整个交互设计，大家可以到这里下载Origami工程文件。
今年计划看50本书，过了快一半，才看了5本。
无意间翻到这本《重来》，翻了几页就发现特别对胃口，书中的观点非常认同，看着看着就想一直看下来。虽没有一次读完，也差不多四次就读完了。书不厚，每个小主题都有插图，看起来也不觉得累。
这本书主要讲的是大名鼎鼎的37signals介绍小团队创业相关的事，包括要保持小团队、做自己喜欢并使用的产品、以产品为主、万不得已再招人、保持精简、等等。总之是涉及到了产品到公司的很多层面。非常喜欢，应该会再认真读一遍。
还是要看书，不然思想都没什么变化，也懒得思考，这样老的太快了。
以下就开始整个模仿的过程，大致分为三步。
侧边栏的交互并不复杂，拆分结束后，大致可分为以下的交互、或者说动画：
任务列表左移、右
侧边栏保持不动，被任务列表盖
两种方式触发页面的切换
* 点击抽屉图
其实Origami主要是用来设计交互、动画，其前置条件是已经有完整的图片资源。主要包含收下部分：
手机状态栏
* 注意：状态栏背景应该是全透明的，这样可以显示下面页面的颜
侧边
任务列表界面
大家如果要练手的话，可以到这里下载素材。
其实主要是根据程序，将内容、素材摆放在界面相应的位置上。
注意Layer的上下层次，从上到下依次是：状态栏、任务列表、侧边栏
实现后的QC界面大概是：
由于点击抽屉图标和滑动任务列表界面都可以触发交互，所以考虑先实现一种触发方式，然后用另一种方式来调用第一种方式。
技巧：优先实现滑动的触发方式，然后使用点击来设置滑动的起始状态即可。
这点并不复杂，使用简单的Swipe Patch，明确起始位置即可。
实现后的QC界面大概是：
这里要处理的是，在不同的情况，点击所触发的行为是不一致的。也就是说
在侧边栏隐藏时，点击抽屉图标应该显示侧边
在侧边栏显示时，点击抽屉图标应该隐藏侧边栏
这就意味着要做条件判断。条件判断可以使用Condition来实现，简单的判断任务列表界面的X位置即可。然后，将不同状态下点击的行为，用于设置滑动操作切换到起始、或终止的位置即可。
实现后的QC界面大概是：
另一种更巧妙的办法是，点击切换滑动的起始状态即可。
实现后的QC界面大概是：
好，这样就完成了整个交互设计，大家可以到这里下载Origami工程文件。
滴答清单是已经存在的产品，其中延期也包含了添加任务的交互。这里并不是使用Origami去设计，而是使用Origami去模仿，达到学习Origami的目的。
关于滴答清单，本文模仿的是iOS1.9.4版本的滴答清单，可以在滴答清单官网去下载：http://www.dida365.com
好，以下就开始整个模仿的过程，大致分为三步。
也就是说，实际操作滴答清单，了解添加任务的过程，然后逐渐对整个交互进行拆解。过程中，可以使用高速录像后慢放的方式，了解动画的细节。
拆分结束后，大致可分为以下的交互、或者说动画：
正向（即添加任务）
* 加号键逐渐放大、消
同时完成以下交
标题栏文字和图标切
主页面切
键盘升
反向（即从添加任务状态返回）
* 两种方式触发返
点击返回
屏幕右滑（本期暂时不包含这一功能
同时完成以下交
标题栏文字和图标切
主页面切换
* 注：加号键和页面同时出现，没有动
键盘下降
其实Origami主要是用来设计交互、动画，其前置条件是已经有完整的图片资源。主要包含收下部分：
图标：抽屉、菜单、返
图片：状态栏及标题栏、任务列表界面、新任务页面、键盘页面、加号键
大家如果要练手的话，可以到这里下载素材：
以下是主要的部分，放在一个步骤里，显示有些大了。不过不用担心，还是一步步完成的。
其实主要是根据程序，将内容、素材摆放在界面相应的位置上。具体的内容和素材包括：
标题栏：背影、图标、文
内容界
加号键
小技巧：可将截图放在最上方，并使其半透明，这样就可以使用截图来校对元素在界面上的位置
布置好后是这样的：
消息的触发
* 以点击加号键任务交互的触发点。可以将按下加号键的消息以Wireless的方式广播出去，这样可以方便得在其它LayerGroup中使用
点击加号键后，加号键逐渐放大、消失
* 也即修改Scale、Opacity属性，使得加号键在放大的过程中同时消失
标题栏图标的切换
* 也即修改Opacity属性，使得图标在过渡过程中消
标题栏文字的切换
* 也即修改XPosition、Opacity属性，使得图标在左移过程中消
主页面切换
* 也即修改Opacity属性，使得内容在左移过程中消失
QC中的界面大致是这样的：
将任务列表的所有内容放置在一个LayerGroup中，同时创建另一个LayerGroup，用于放置新任务的内容。暂时关闭任务列表界面，进行接下来新任务界面的设计。
这一点和上面介绍的布置静态任务列表界面类似，这里就不多做介绍。布置好后是这样的：
消息的触发
* 以点击返回键任务交互的触发点、暂时不处理滑动返回操作。同时的，可以将该消息以Wireless的方式广播出去
标题栏图标的切换
* 也即修改Opacity属性，使得图标在过渡过程中消
标题栏文字的切换
* 也即修改XPosition、Opacity属性，使得图标在右移过程中消
主页面切换
* 也即修改Opacity属性，使得内容在左移过程中消
键盘下降
* 也即修改YPosition、Opacity属性，使得图标在下移过程中消失
QC中的界面大致是这样的：
将任务列表的LayerGroup放在底层，将新任务的LayerGroup放在上层
使用添加任务、返回两个消息，控制上述两个层的状态切换。需要注意的是，除了状态切换，还需要在显示底层时隐藏上层，也即在显示任务列表的LayerGroup时隐藏新任务的LayerGroup，这样才能响应任务列表的点击操作。
进行其它一些调整，主要是针对动画的过渡，修正其中处理不好的地方。注意，这里有一点要说，不要刻意追求动画的完美。有时，花了2个小时做好了90%的交互、已经可以表达出意图，却又要花1小时、甚至更多的时间去调整不完美的地方，这就有些钻牛角尖了，浪费精力、没有必要。除非是开发同学能100%实现你设计的交互，不然这样的交互只是用来表达意图，做得太完美反而是浪费时间。
好，这样就完成了整个交互设计，大家可以到这里下载Origami工程文件。
StartFragment使用过Quartz Composer(Origami)的朋友会有感觉，这家伙是个耗性能的大户。如果你还不打算切换工具、或者离不开QC强大的交互设计功能，就试试下面介绍的优化建议吧。
主要的调整是在系统偏好设置中进行：
Viewer (Preferences > Viewer)
降低帧率
* 这应该是最有效的方式。可以在开发过程中设置低的帧率，在演示过程中再将其调高
降低Viewer窗口的尺寸
* 这个没有严格的依据，只是根据心理上的理解，窗体小、执行动画时需要重绘的面积小，需要消耗的性能也少
Editor
取消阴影
* 猜想可以降低绘制阴影的消
取消网络线
* 虽然网络线可以帮助在视觉上对齐，但实际上吸附的操作还是通过"Align Nodes"实现的，所以可以取消网络
关闭Patch的Render
* 也即，在不需要展示某些Patch时，暂时关闭这些Patch的Render，等需要时再打开
注意：在调整过程中，可以同时打开Activity Monitor，观察调整前后，在Viewer中操作时CPU使用率的变化。
终极方案：关闭Viewer
熟练使用快捷键，在需要查看时使用⌘+R支持Viewer，不需要进使用⌘+.关闭Viewer
EndFragment