Origami学习小教程1

昨天研读了很多martin大神的文章，感觉Origami貌似很好玩，今天就开始跟着官网教程做做看了，下面是一些心得分享。算不上教程啦，我弱咖一枚。 

打开QC，新建Origami File，默认是这个样子，左边编辑器，右边模拟器，手长得还挺好看。 

然后模拟器可以换背景，在模拟器按H可以去掉

编辑器里3个Patch

第一个Viewer Size 代表右边模拟器的样子，长宽高什么的

双击Type可以选择右边那个手里拿什么设备

双击Orientation可以命令右边那个手是横着拿L还是竖着拿P，默认是果6竖着拿

中间是右边那个手里拿的手机里面显示的内容包 

最右边蓝色的Patch－Viewer大概就是内容包显示不显示的意思吧…………

总之重要的是中间的Layer Group啦！

我们来双击进入神圣的Layer Group看一下吧！

 

这个死样，只有一个小蓝Patch，上面写着Fill Layer填充页。

然后我就跟着官网往里面加东西，我随手抓了一只蓝海之略的鸭进来，直接拖图片进来。 

默认的就是居中，Origami里面的位置坐标大概是这个感觉：

 

这样看上去好惊悚，我们赶紧调一调图片：

用图片连着的Layer层来编辑他：

例如Opacity调淡一点，位置挪一挪：挪位置的时候鼠标放在X或Y Position后面的数字上面，点了不动会变成那种样子，（中间一竖杠，左右有箭头）然后就像在AE里面改数值一样不要松鼠标左右拖，就可以改变图片的位置了。

背景黑黑的也怕怕，点击Fill layer那个Patch，cmd＋1，打开编辑窗口，我们把color改成白色。其实直接双击patch里的color就能改。

 

朦胧了一些些。

oh我的耐心受不了了，第一次做教程真麻烦，我貌似应该直接做个长图什么，好煎熬～～～～

好吧继续，这个时候点击是没有用，我们需要加交互（interaction 2），然后在编辑器，按   I（ai～），就增加了小紫Patch。

比如，我想再想做点击鸭变小，这就意味着鸭的scale要变，于是鼠标移到鸭的小蓝Layer Patch的Scale前面的点这里悬停，然后按T，就增加了一个控制scale的Patch。  

这上面写啦：这个程序开始的时候，scale的值是0.9（我在鸭图蓝patch里设置的），结束时候是1。不！我要让鸭变小，所以结束时候我大概需要0.3（原图的30%这样），所以双击数值改一下。

连起来试一下，果然可以点耶，但是效果不持久不明显，在interaction和scale变化patch中间需要来个开关，所以我点一下interacion里面down后面的点，在键盘按shift＋S，就增加了一个开关。

 

 

这次效果立竿见影，在模拟器里点一下鸭小，点一下鸭大，鸭小～鸭大～

然后我要让大小柔和一些，就好像AE里面增加曲线运动一样，在开关和大小控制patch中间按A增加一个Pop Animation的patich，我的理解就是，他就是AE里面的F9.

看一下效果：

嗯，做到这里我的耐心已经耗尽了，然后我又增加了控制鸭透明度的patch，增加了文字层，增加了控制文字透明度的patch，一起连到小紫上面，一点就联动了，也就是一开始那个动画效果。

就酱！谢谢再见！