工具介紹，最近大熱的Origami 2.0介紹及教程(2)

按住 command + enter 鍵，可以查看 Quartz Composer 的各種庫，包括了 Origami 庫。

選擇 Interaction 2號，交互2號。我們可能會奇怪這個「2號」怎么來的，但是你搜索的時候就明白了，QC 本身就有一個 Interaction，就好比在 Mac 系統(tǒng)里，你復(fù)制一個同名同類型的文件，為了避免重復(fù)，就變成了「交互2號」會自動加上（2）一樣。

交互2號的含義是： – Down 點擊，鼠標(biāo)按下。 – Up – Tap 輕拍，輕觸 – Drag 拖拽

如果需要圖的過渡變化，就需要用到過渡模塊了。

過渡模塊

取一個0-1之間的數(shù)值，并將其轉(zhuǎn)換為由開始值和結(jié)束值之間的范圍內(nèi)的一個數(shù)值。通過 Progress 輸入口數(shù)字的變化，輸出一個在 Start Value 和 End Value 之間的對應(yīng)值。

在這我設(shè)置的起始值為1，結(jié)束值為 0.4，和官網(wǎng)稍稍有些不同。官網(wǎng)默認(rèn)是看到縮放了的居中的圖片，而我設(shè)置的是默認(rèn)在有圖有文字的頁面，這也方便各位去琢磨對比過渡模塊的用途。

添加動效

在圖片縮放的時候，其實有一個動效，Pop 動效。 現(xiàn)在就讓我們來添加這個動效。

有個快捷方式是，你鼠標(biāo)懸在圓點處，然后按鍵盤上的 A，就可以出來 Pop Animation 了。

但是問題仍然在，圖片縮放后無法保持縮放后的狀態(tài)，所以我們需要一個開關(guān)進(jìn)行狀態(tài)切換。

Switch 開關(guān)

一個開關(guān)可以記住一個狀態(tài)。它工作的原理和點燈開關(guān)有些類似，一開始是關(guān)著的，如果你按一下，他就變成開了，然后你再按一下，就變成關(guān)了。舉個例子，如果你想輕觸一個圖片時，它會縮小而且當(dāng)你松開手指的時候，他會保留這個狀態(tài)。

Flip 端口對對稱式的交互式很有用的，比如說你重復(fù)點擊一個圖片，讓它從縮放從小到大。舉個例子，在一個編輯窗口，你可能會有一個編輯按鈕來打開這個開關(guān)（在窗口動效）以及在窗口中的「取消」和「確定」按鈕來關(guān)閉這個開關(guān)。

快捷鍵：Shift + ??

添加過渡

添加 Chrome 圖片（圖片名叫 Chrome，并不是指 Chrome 瀏覽器）

為含有評論的 chrome 圖片圖層添加透明度的過渡，并將過渡模塊的 progress 輸入口與 Switch 模塊的 On/off 連接起來。

OK，大功告成，第一個視頻里的 Demo 已經(jīng)完成了。另外在說一句的是 QC 里的圖層順序。

Layer Order 圖層順序

數(shù)字越大，優(yōu)先級越高，越靠前。

開始把玩

最后，下載一個 Origami Live，把 iPhone 和 Mac 連接起來。這樣，你就可以在盡情的玩耍了。

說下@大蔚陳 的使用體驗：