Origami动效制作-入门必看(附3个练习案例)

数十万互联网从业者的共同关注！

作者：青溪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万人群