三分钟，Origami入门：构建一个iPhone弹性缩放动效
来自：李逍遥(痛苦是犁，划破心田也开启新希望)
Origami是Quartz Composer的插件，安装以后，打开Quartz Composer，发现界面发生了变化： ①Patch Library进行了详细归类，查找更加方便了（Origami的全部控件都在Custom文件夹下） ②菜单栏“小千纸鹤”图标中增加了Retina支持选项 ============ 好，我们直接开始搭建iPhone基本框架：
从Patch Library中拖动以下3个控件到画布上： 1) Phone Dimensions 2) Phone 3) Render in Image 并按照上图方式进行连接。OK，基本框架已经搭好。点击Viewer看一下渲染：
一个iPhone手机已经渲染出来了，不过手机画面里什么都没有。（在Viewer中，可以按快捷键“F”切换状态：手机+界面 / 只有界面） 接下来，需要修改Render in Image这个宏（插件的组合包），让手机的屏幕中显示东西。 =========== 双击Rendre in Image，就进入到了“宏”的里面（点击顶部工具栏的“Edit Parent”可以返回） 我们接下来要搭建一个这样的结构：
右边这个“层”，是用户会看到的东西，我们把要缩放的图片附着在“层”上。在点击层的时候，也就是点击了图片，图片要有相应的反应（点击一下图片放大，再点一下图片缩小） 左边这个“交互”和层连接，表明让层接受我们用户的交互指令。 接受指令后传递给一个“开关”（因为图片有两个状态，分别是缩小的和放大的，开关用来控制让图片在两个状态间切换）。 开关的输出接到“弹性动画”上，然后接到“缩放变换”上，最后连到层上，控制层的缩放属性。 如果不接弹性动画，那么开关就会直接让图片的放大缩小变得生硬。接上弹性动画，图片的放大缩小过程就会有一个弹性缓动。 OK，实际的控件连接如下图：
============ 这一种控件接法需要记在心里，可以理解为一种搭积木的“套路”。 看一下这几个控件： 控件左右2侧分别由两排点点：左侧是输入点，右侧是输出点。 1）“Interaction 2”我叫它“交互2号”，因为Quartz Composer本身有一个Interaction（交互控件），但它是为鼠标而设计的控件，它带有鼠标悬停，鼠标XY坐标等我们不需要的接口。而Facebook设计组重新封装了一个交互2号，使用了手指按下、点击、轻拍、拖拽这几个交互接口。 将交互2号右上角的点连接到Layer上，表明对Layer进行交互监听。交互2号右侧的Click接口连接到Switch上。（此时，如果用户对Layer有点击操作的话，交互2号的Click接口就会输出True状态，没有点击操作输出False状态。） 2）“Layer”，图层。用来把图片附着在上面的面板。之前QC用的是一个叫公告板的控件，需要强制提供缩放、位移等参数，使用起来很麻烦，而图层则非常方便：把需要用的图片用鼠标拖动进来，QC就会自动建立一个Image和Layer的连接，不用改任何参数直接使用。 3）“Switch”，开关。Flip端输入每从False变成True一次，输出端的真假状态就会变化一下。（特别像开关吧？每按一下，就会在开和关的状态间切换一下） 4）“Bouncy Animation”，弹性动画。左侧输入端的Number，每发生一次跳变，右侧输出端的Progress就会按照弹性曲线进行数值变化。左侧还有两个输入口Friction和Tension，分别是摩擦系数和弹簧拉力。摩擦系数越大，整个动画的粘滞感就越强。弹簧拉力越大，动画的速度就越快。自己可以改一改试试，效果很明显。（选中控件，单击工具栏的Patch Inspector可以更改参数，快捷键Command+1） 5）“Transition”，过渡动效。根据左侧输入端的值（开始数值、结束数值、过程比例）输出一个对应值：比如开始值是5，结束值是10，过程比例是0.2，那么输出值就是6，能理解吗？OK，把输出值接到Layer的Scale缩放接口，就可以将用户的点击而带来的弹性变换应用到图片的缩放上了。 6）千万不要忘了，加一个Clear控件，清空一下背景。Clear控件右上角的数字表示显示在哪一层上，把它设置为1，表明清空的层在最底下一层。 ============== 看一下Viewer，效果已经有了，还挺有成就感的呢。 如果有疑问，可以看一下操作视频：
如果你喜欢本文，或者有任何疑问，可以关注我的微信公众账号：
我是独立开发者小泽。 让我们共同学习，共同进步。
你的回复
回复请先 登录 , 或 注册
相关内容推荐
最新讨论 ( 更多 )
- 原型origami，还有大神在线没？ (再见，朱丽叶)
- 关于origami职业走向问题 (La Song)
- Origami动效制作-入门经验小结（附3个练习案例） (二溪慢慢)
- patch library 问题 (大圈圈)
- 为什么安装origami之后QC会卡死 (这个世界学不完)