Origami五分鐘入門秘籍
早在Facebook推出Facebook Home時,相信強大的原型工具Quartz Composer就進入了很多設計師的法眼,無須編寫代碼就可以輸出細膩豐富的動畫,這個太厲害了,和大家一樣,彼時我也信誓旦旦勵志要學會這個玩意兒,于是開始參考教學視頻摸索,甚至拿著Quartz Composer的Guideline企圖翻譯,結果發(fā)現(xiàn)并不是那么簡單。于是學QC這件事情就一直一直擱淺,直到Facebook又推出了Paper,有了Origami這個插件,QC的門檻瞬間降低了很多,終于,感覺自己入!門!了!!尤其是和Sketch聯(lián)動,做demo真是方便了很多。這里按照自己的理解參考各種資料的總結對Origami整理了一份入門篇文檔,真的可以幫助零基礎的同學入門,歡迎同樣在研究的同學一起探討,有不對的地方求指正~
基本概念
首先說一下“模塊”(patch),模塊是QC里面最基本的元素,不同的模塊實現(xiàn)不同的功能,要搭建一個原型,實際上就是把不同的模塊按照邏輯像搭積木那樣拼裝的過程。
模塊可以簡單區(qū)分為這樣兩類:圓角和方角。
圓角是最普通的模塊,而方角的模塊叫做“宏”(Macro),可雙擊進入詳細編輯。(我把它理解為文件夾)
模塊還會有顏色的區(qū)別,藍色的模塊是輸出模塊,在畫布中可以被看到;黑色模塊是最常見的狀態(tài);紫色模塊表示模塊內(nèi)部還有其他子模塊。
模塊和模塊之間用連線的形式拼接起來,模塊左側是輸入接口,右側是輸出接口,將A模塊右側的輸出點連接到B模塊左側的輸入點,即可將A模塊的結果輸出到B模塊。
基本邏輯
這個模型是在一個文章里面一位朋友分享的,我覺得非常到位,基本上每一條操作都是這樣的執(zhí)行邏輯。
每一個動畫首先有一個交互觸發(fā)動作,然后用一個開關來控制一個動作的兩種狀態(tài),兩種狀態(tài)對應變換兩個數(shù)值,然后表現(xiàn)在層上~ 數(shù)值變化前多一個彈性動畫來控制動效。
下圖是最簡單的圖片放大縮小的例子,在數(shù)值變化的地方給圖片大小一個初始值和結束值,就可以簡單的實現(xiàn)點擊圖片放大縮小的效果了~~~~
小試牛刀
搞清楚基本概念和基本邏輯之后,就可以上手試試了。
我們先新建一個Origami file。
如下圖,會彈出左右兩個窗口,這是Origami默認的文件,由此也可以看出Origami為移動而生~ 第一個patch可以控制右側手機的樣式、橫屏還是豎屏等等,第二個patch是方角的,也就是上面說的宏(Macro),雙擊它就可以將我們想要設計的內(nèi)容放在手機里面了。第三個patch是藍色的顯示層。
每一個patch都可以雙擊修改名字,在后面內(nèi)容變多的時候,起好名字變得非常重要??梢钥吹矫恳粋€patch都有自己的輸入輸出參數(shù),可以都調(diào)一下試試看效果~~~
在viewer窗口,有很多很好用的快捷鍵可以調(diào)整展示的樣式。例如,每次我會很習慣地去掉拿著手機的手……在viewer窗口激活的狀態(tài)下, 鍵盤輸入H,就可以去掉手了;鍵盤輸入=/-可以切換背景樣式;鍵盤輸入F可以全屏展示,去掉手機框。
Demo1. Hello Origami
按照開發(fā)教程最習慣性的做法,我們先來做一個“Hello Origami”的demo。
雙擊Layer Group,進入界面內(nèi)編輯態(tài),這里有一個已經(jīng)存在的patch是Fill Layer,這是一個填充圖層,用來設置背景。
在編輯區(qū)域,鍵盤輸入T,就出現(xiàn)了一個Text Layer。 這里說一下,調(diào)出所有patch庫的快捷鍵是“command + enter”。(請叫我快捷鍵癮君子~)
可以看到viewer區(qū)域已經(jīng)有“text”顯示了,選中Text Layer 按“command+1”,可以呼出這個layer的設置項,就可以隨便調(diào)整試試看了,我們在Text項里寫上“Hello Origami”,就完成Demo1啦~~~
Demo2,可交互的Origami
接下來我們試著讓案例交互起來,做一個點擊窗口,文案顏色和背景顏色互換的demo。
在編輯窗口,鍵盤輸入I,可以看到出來了一個Interaction2的紫色patch,這是一個交互指令patch,輸出交互指令,down是鼠標按下狀態(tài),up是鼠標單擊狀態(tài),tap是觸碰,drag是拖拽(這里提一下,從手機來操作時,感覺up和tap是一樣的,我也有點不理解)。
在編輯窗口,鍵盤輸入“command + enter”,呼出Patch?Library,輸入Color Transition,其實看名字大家應該就知道這是個啥,對就是這個東西來切換顏色。再在編輯窗口,鍵盤輸入“shift + S”,得到Switch patch,這是一個開關。
連接幾個patch,我們就可以切換Hello Origami的顏色了,同樣的方式,把背景再同步切換一下,Demo2 完成~~~~
和切換顏色同樣的道理,我們可以用Transition切換文本的大小。Layer中,scale是控制大小的元素,按百分比變化,1為100%以此類推。這時候你可能會覺得切換效果不夠柔和,很生硬,在編輯窗口,鍵盤輸入A,出現(xiàn)一個Pop Animation,這是一個動畫過渡的效果,把這個patch放在顏色變化前,就會有過渡效果啦~~~~
如下圖,就出來一個最簡單的閃屏感覺的動畫。
一些概念
關于坐標
在Origami里,每一個patch的anchor point,默認狀態(tài)在畫布中心(0,0),我們可以對每一個patch定義它的anchor point, 舉例來說,如果想要一個元素在左上角,則可以設置它的anchor point為top left,然后設置它位于左上角的位置是(100,-100),如此,就可以得到一個距離頂部和左邊緣分別100的位置。
關于單位
在Origami里,width、height、position都是以pixels為單位;opacity和scale是百分制,0-1分別對應0和100%。
常用patch
這部分也是參考了網(wǎng)友的智慧~~~把他們按照類型簡單歸了一下類,很清晰~
顯示類
交互觸發(fā)類
交互響應類
其他
常用快捷鍵
大招來了 Origami + Sketch
在Sketch里,只要把文件的名稱命名規(guī)范,就可以用插件自動切圖,再然后在Origami里面,所有圖都可以用Live Image這個patch來承載,這樣當你在Sketch調(diào)整圖片的時候,使用快捷鍵“shift + option + command + o”,便可以一鍵同步到你的動態(tài)demo。
終極武器
你可以說以上內(nèi)容其實我們都可以用PS + AE完成,但Origami有一個終極理由讓你使用它來做動畫——導出代碼。
因為QC本來就是Xcode的一個可視化程序,因此它的運行邏輯其實和代碼是一樣的,Origami做了一件事情是可以直接一鍵導出代碼,據(jù)說開發(fā)GG可以直接使用哦!這個我也還沒有試過,如果真的可以很方便的導出代碼直接給開發(fā)用,那么又省掉一個環(huán)節(jié)提高效率啦~~~~~~~
下圖的案例是簡單做了一個QQ音樂里面播放頁彈出的動效~
附錄
以下是對我?guī)椭畲蟮膸讉€網(wǎng)址,這份文檔很多內(nèi)容也參考了他們,非常感謝~~~
http://facebook.github.io/origami/
http://www.zhihu.com/question/20956344
http://www.csdn.net/article/2014-06-09/2820131
http://www.douban.com/group/topic/49037071/
作者:外星來的蘋果
來源:騰訊ISUX
原文地址:http://isux.tencent.com/origami.html
?? 內(nèi)容不錯
感謝分享