現(xiàn)在正式開始學(xué)習(xí)如何使用Origami制作產(chǎn)品交互原型。首先從Origami官網(wǎng)的第一個(gè)視頻Introduction to Origami開始。
打開QC，左上角File-New Origami File。這時(shí)，會(huì)看到2個(gè)窗口：左邊的Editor和右邊的Viewer。Editor（編輯器）是用來組織Patch的，而Viewer（查看器）則可以實(shí)時(shí)看到由Patch（在以后的教程中，統(tǒng)一稱為模塊）實(shí)現(xiàn)的效果。在默認(rèn)的情況下，右邊的Viewer會(huì)覆蓋部分Editor窗口，
為了使這2個(gè)窗口在使用的過程中更方便，在上方工具欄選擇Window-Resize to Thirds，就可以使它們一左一右整齊地排列顯示。
Viewer Template（查看器模板）
在新建了Origami之后，左邊的Editor就自動(dòng)出現(xiàn)了3個(gè)模塊。
最右邊的View模塊，作用是繪制Viewer的手和手機(jī)。它的輸入是與之相連的Layer Group的圖片。中間的Layer Group可以放置各種模塊，然后顯示在Viewer的手機(jī)里。最左邊的Viewer Size，可以選擇不同的設(shè)備。雙擊Type旁邊的設(shè)備名，就會(huì)出現(xiàn)一個(gè)列表，可選擇各種設(shè)備，它會(huì)告訴Layer Group屏幕的大小。請(qǐng)注意，如果需要更改任何一個(gè)模塊的參數(shù)，都可以雙擊此參數(shù)。而單擊某個(gè)模塊，則是選中此模塊。
Adding Asserts（添加素材）
現(xiàn)在開始為原型添加素材。仔細(xì)觀察會(huì)發(fā)現(xiàn)，Layer Group模塊是直角的，而其他2個(gè)模塊都是圓角的。實(shí)際上，直角的模塊是一個(gè)模塊組，可以雙擊它進(jìn)入其包含的模塊。Layer Group里面的模塊直接影響右邊Viewer的手機(jī)屏幕顯示，當(dāng)雙擊Layer Group時(shí)，可以看到Fill Layer模塊，它的顏色是黑色，這就是Viewer的手機(jī)屏幕內(nèi)容為黑色的原因。點(diǎn)擊右上的向上按鈕，就返回到了外面。
Layer Patch（圖層模塊）
雙擊Layer Group，進(jìn)入模塊組，從電腦里拖進(jìn)一張圖片到里面。當(dāng)添加了一張圖片后，文檔里會(huì)出現(xiàn)2個(gè)模塊。
左邊是圖片模塊，它與右邊的Layer模塊相連，Layer模塊把圖片渲染到手機(jī)屏幕上，里面每個(gè)屬性的數(shù)值描述了應(yīng)該如何渲染圖片。比如，X Position是0，雙擊“0”，把它修改成“200”，也就是x坐標(biāo)被設(shè)了200，此時(shí)你會(huì)發(fā)現(xiàn)，在右邊的手機(jī)屏幕上，圖片往右移了200像素。改變數(shù)值的另一種方法是，在這個(gè)數(shù)字上長按，往左或往右拉，往左拉是不斷減小當(dāng)前數(shù)值，往右則不斷增大。其他屬性的效果，可以自行改變相應(yīng)的數(shù)值，在手機(jī)屏幕上直接看到變化。
Adding Patches（增加模塊）
現(xiàn)在我們有了圖片，需要考慮怎么使用Tap（輕按）手勢(shì)來縮放圖片。Origami有個(gè)叫Interaction（交互）的模塊，可以支持在Viewer和安裝有Origami Live的iOS設(shè)備上使用Tap手勢(shì)。按下Command+回車,打開Patch Library（模塊庫）。在搜索框里輸入“interaction”，出現(xiàn)“Interaction 2”，按下回車，即把這個(gè)模塊添加到文檔里。
Getting Taps（得到輕按手勢(shì)）
我們可以看到，Interaction 2模塊有4個(gè)輸出口，首先看第一個(gè)“Down”，它會(huì)告訴我們你的手指是否壓在屏幕上。如果想看到實(shí)際輸出的結(jié)果，我們可以添加一個(gè)Text Layer來觀察。按下Command+回車,打開Patch Library（模塊庫）。（請(qǐng)記住這個(gè)快捷鍵，很常用）輸入“Text Layer”，找到這個(gè)模塊，按下回車，就把它添加到文檔了。這時(shí)可以看到，右邊的Viewer顯示了“Text”字樣。
雙擊Text屬性的右邊文字“Text”，可以更改文字內(nèi)容。如果我們想知道“Down”的輸入是什么，只需要把“Down”端口連接到“Text”端口。
現(xiàn)在我們看到，右邊的Viewer顯示了“0”。這時(shí)，如果我們點(diǎn)擊一下Viewer的屏幕，顯示的文本將變成“1”，當(dāng)我們松開手，又變成了“0”。實(shí)際上，“Down”端口的從0到1，如果連接到Layer模塊上的“Scale”端口上會(huì)比較有意義。當(dāng)我們把“Down”連接到“Scale”，可以看到Viewer的圖片完全消失了。聰明的你一定能猜到，當(dāng)我們點(diǎn)擊一下屏幕，圖片又會(huì)出現(xiàn)。顯然，我們需要一種方法，能把這種從0到1的變化轉(zhuǎn)成有用的東西。所以我們需要使用Transition Patch（過渡模塊）。
Transition Patch（過渡模塊）
要添加過渡模塊，同樣可以使用按下Command+回車,打開Patch Library然后搜索、回車得到。同時(shí)，也可以使用Origami為常用操作所設(shè)置的快捷鍵。在鍵盤按下“t”，也可以快速地添加Transition Patch。
仔細(xì)觀察一下，它有三個(gè)輸入口，第一個(gè)“Progress”通常會(huì)接收0到1之間的數(shù)值。然后，這個(gè)模塊會(huì)把Progress輸入的數(shù)值，轉(zhuǎn)換輸出一個(gè)在Start Value和End Value之間的數(shù)值。精確地說，如果Progress為p，StartValue為s，End Value為e，那么輸出值y=s+p*（e-s）。
比如，如果Progress設(shè)為0，Start Value設(shè)為100，End Value設(shè)為200，那么輸出的Value數(shù)值為100+0*（200-100）=100。若此時(shí)把Progress改為1，其他不變，那么輸出的Value則為100+1*（200-100）=200。原理就是這樣，非常簡單。
現(xiàn)在，我們來試著使用它。先刪除掉Text Layer，去掉Down和Scale之間的連線。拔掉連線很容易，按住連線的末端那頭拖動(dòng)到在連線以外的地方，然后松手，就成功拔掉了。此時(shí)要注意，Scale的數(shù)值還是之前的0，要改回1。請(qǐng)了解，端口永遠(yuǎn)都會(huì)記住上一次的數(shù)值。
這時(shí)，我們希望實(shí)現(xiàn)這樣的效果：手機(jī)屏幕默認(rèn)全屏顯示圖片，點(diǎn)擊屏幕則把圖片縮小到一半來顯示。顯然，需要使用Interaction 2和Transition模塊一起實(shí)現(xiàn)。先把Interaction 2的Down端口連接到Transition的Progress，再把Transition的Value輸出端插到Layer模塊的Scale。按照剛才我們對(duì)Down的測試結(jié)果，沒點(diǎn)擊屏幕時(shí)輸出的數(shù)值為0，點(diǎn)擊屏幕時(shí)輸出的數(shù)值為1。所以當(dāng)沒點(diǎn)擊屏幕時(shí)，Progress的值為0，點(diǎn)擊屏幕時(shí)，Progress的值就變成了1。
當(dāng)沒點(diǎn)擊屏幕時(shí)，我們希望輸出給Scale的數(shù)值是1，這樣才能全屏顯示圖片嘛。根據(jù)上面給出的公式y(tǒng)=s+p*（e-s），也就是1=s+0*（e-s）。這是很簡單的方程，所以s也就是Start Value為1。然后，在點(diǎn)擊屏幕時(shí)，希望輸出給Scale的數(shù)值是0.5，也就是0.5=s+1*（e-s）=1+1*（e-1)。所以，e=0.5，End Value設(shè)為0.5就實(shí)現(xiàn)了我們的想要效果。
當(dāng)然，你可以隨意調(diào)整End Value的數(shù)值，把圖片縮放得更好看些。這時(shí)，右邊的Viewer默認(rèn)全屏顯示圖片，當(dāng)點(diǎn)擊手機(jī)屏幕時(shí)，圖片縮小為原來的一半；當(dāng)松開手時(shí)，圖片又變成了全屏顯示。不過圖片放大和縮小的感覺很生硬，因?yàn)闆]有平滑的動(dòng)畫效果。所以接下來，我們就到制作動(dòng)畫這個(gè)讓人激動(dòng)的步驟了。
