数十万互联网从业者的共同关注！
作者：青溪Joanna
微信公众号：qingxizhaji（青溪札记）
作者授权早读课发表，转载请联系作者。
欢迎投稿到早读课，投稿邮箱：mm@zaodula.com
网上关于Origami动效制作的入门学习资料不少，得益于这些资料，我也算基本入门。本篇结合我的学习方法，介绍几个学习origami动效制作挺实用的资料，最后会附上3个练习案例供大家参考。
一、看资料，初识Origami
1、次时代交互原型神器Origami 档案
作者：陈泽涛，搜狐视频高级交互设计师
文章：
http://www.csdn.net/article/2014-06-09/2820131
推荐语：
对origami背景、特点、安装方法都有介绍
对origami的24个模块给出的详细的用法解析（这点非常重要）
给出了Tab切换的例子
2、Origami五分钟入门秘籍
作者：外星来的苹果，腾讯ISUX 交互设计师文章：
http://isux.tencent.com/origami.html
推荐语：
从origami的基本概念、基本逻辑、到实际练习的一些细节都有介绍
看完这篇，基本可以迈过第一道坎，熟练的拖拽各种patch设置属性参数看动效了
3、知乎问答——Quartz Composer 如何入门
地址：
http://www.zhihu.com/question/20956344
推荐语：
看看他人的入门经验，取长补短，制定自己的学习计划
二、分析案例
1、用 Quartz Composer 和 Origami 制作一个简单的按钮动画
地址：
https://github.com/nixzhu/dev-blog/blob/master/2014-06-22-quartz-composer-and-origami-tutorial-button-animation.md
推荐语：
目前见过最详细的案例介绍文章，由@nixzhu翻译国外的教程文章
跟着这篇教程，可以完成的实现这个经典的path按钮扇形动效的效果
文章末尾给了个作业，当你对origami已经基本入门之后，可以回到这里来完成作业，对interaction 2 这个交互patch会有更多的认识。
2、研究Origami官网的4+7个例子
官网：
http://facebook.github.io/origami/examples/
推荐语：
4个interaction、7个interfaces的例子，interaction的例子很有趣、非常酷炫，但对新手研究起来有点难度，可以先跳过去看interfaces 界面动效的例子。
后续通过研究案例、实践练习，对origami有一定了解后，再回头看4个interaction的例子
3、研究案例的一点儿经验
1）不仅仅是看，要去了解每个patch模块的作用、每个属性值对动效带来的影响
2）最有效的做法是，在实例的基础上修改看viewer演示，反复调整修改
4、如何了解patch模块的作用？
1）前面推荐的文章《次时代交互原型神器Origami 档案》，了解常用patch的用法
2）在QC软件界面，打开patch library，在目录结构中选择origami即可看到所有它支持的patch模块，挨个看每个模块及对应的介绍，可以对origami能够实现哪些效果有个初步的印象。
三、实践练习
练习时，动效灵感从哪里来？主要有三点：
曾经让你印象深刻的App动效
移动动效网站 http://capptivate.co/
工作中你希望为你的App实现的动效
接下来，会分享3个我自己练习的例子。在看下文之前，大家先看看下面这个动效实现的逻辑示意图，形成大致的印象，对理解后文的案例有帮助。
1、滚动视差
本来想用scroll实现滚动视差的效果，发现挺难做到，最后用interaction 2 实现了一个没有什么卵用的“点击视差”效果（捂脸…）。这个例子给我的感触是，别打消学习的积极性，在水平有限的情况下，先实现自己能做到的效果，也是挺有成就感的一件事。
1）实现效果
点击蓝色区域时，有如下变化
WiFi图标缩小、同时移到左上角
大标题文字缩小，且移到左上角
小标题渐进消失
再次点击蓝色区域，回到原状态。
2）思路说明
交互：
因为实现的是点击效果，所以用interaction 2来表示
interaction 2右上角的蓝色线条连接的layer，即为有效的点击区域（本例的点击区域就是“蓝色背景”）
层：
用 Layer、Text Layer (如图中的蓝色patch模块) 来显示界面上的元素，包括：蓝色背景、顶部状态栏、WiFi图标、大标题、小标题 。
开关：
采用的是 switch 模块，连接Flip 表示交互动作可以循环往复
弹性动画：
为了增加弹跳效果引入Pop Animation
变换：
通过Transition来控制元素的位置、坐标、字号变化
蓝色背景——高度 Height
WiFi图标——纵坐标Y Position、大小比例 Scale
大标题——字号 Font Size 、横坐标、纵坐标
小标题——横坐标、纵坐标、透明度 Opacity
2、模拟最美时光App
最美系列的几个App动效做得都很棒，其中最美时光点击显示操作按钮的动效挺酷，所以挑选这个动效来模拟。
1）实现效果
点击界面，操作按钮从左侧依次弹出；再次点击界面，操作按钮再分别离开界面。
2）思路说明
交互、开关、弹性动画、变换、层 在上一个例子中有详细介绍，本例类似，不同的是多了一个Delay模块。它的作用是延迟“删除”按钮的动画，以实现两个按钮渐进出现的效果。
3、模拟path按钮扇形展开和收起
这个例子是完成《用 Quartz Composer 和 Origami 制作一个简单的按钮动画》文末的作业，即——点击其中某个按钮（而不是加号图标）来隐藏三个按钮。
1）实现效果
点击“+”图标时，三个按钮呈扇形弹开；点击其中一个按钮即可收起三个按钮。
2）思路说明
弹性动画、变换、层这几个部分与前面两个原理类似，略过不再详说。重点介绍交互、开关两部分。
交互：
图中有两个interaction 2，右上角分别连接一个 Hit Area 模块 。一个用来控制按钮的展开、一个控制按钮的收起。
Hit Area 表示点击区域，当setup mode属性被选中时，viewer窗口可以看到点击区域用红色半透明元素表示。
开关：
switch模块，不再向前面的例子那样连接的是Flip接口，而是分别连接 Turn On、Turn Off，通过开启动效、关闭动效来实现按钮的展开和收起。
四、小结
正如大家所说，Origami初期的学习曲线略微陡峭，但是如果肯花一周的时间，每天下班后的两小时学习、琢磨，入门做些简单的动效还是没问题的。如果要精通更多的动效，还是得多研究案例，多练习实践。玩Origami其实挺有趣，有时候几小时在电脑前调试也不亦乐乎。
如果大家有什么问题，欢迎给我留言交流，共同进步。
互联网早读课，每天八点，风雨无阻
专注产品、设计、交互、运营
微博：@互联网早读课
加群密码：职位-地区-昵称
互联网早读课是WeMedia自媒体成员之一，
WeMedia是自媒体第一联盟，覆盖5000万人群