中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

早在Facebook推出Facebook Home時(shí)，相信強(qiáng)大的原型工具Quartz Composer就進(jìn)入了很多設(shè)計(jì)師的法眼，無須編寫代碼就可以輸出細(xì)膩豐富的動(dòng)畫，這個(gè)太厲害了，和大家一樣，彼時(shí)我也信誓旦旦勵(lì)志要學(xué)會(huì)這個(gè)玩意兒，于是開始參考教學(xué)視頻摸索，甚至拿著Quartz Composer的Guideline企圖翻譯，結(jié)果發(fā)現(xiàn)并不是那么簡單。于是學(xué)QC這件事情就一直一直擱淺，直到Facebook又推出了Paper，有了Origami這個(gè)插件，QC的門檻瞬間降低了很多，終于，感覺自己入！門！了??！尤其是和Sketch聯(lián)動(dòng)，做demo真是方便了很多。這里按照自己的理解參考各種資料的總結(jié)對(duì)Origami整理了一份入門篇文檔，真的可以幫助零基礎(chǔ)的同學(xué)入門，歡迎同樣在研究的同學(xué)一起探討，有不對(duì)的地方求指正~

基本概念

首先說一下“模塊”（patch），模塊是QC里面最基本的元素，不同的模塊實(shí)現(xiàn)不同的功能，要搭建一個(gè)原型，實(shí)際上就是把不同的模塊按照邏輯像搭積木那樣拼裝的過程。

模塊可以簡單區(qū)分為這樣兩類：圓角和方角。

圓角是最普通的模塊，而方角的模塊叫做“宏”（Macro），可雙擊進(jìn)入詳細(xì)編輯。（我把它理解為文件夾）

模塊還會(huì)有顏色的區(qū)別，藍(lán)色的模塊是輸出模塊，在畫布中可以被看到；黑色模塊是最常見的狀態(tài)；紫色模塊表示模塊內(nèi)部還有其他子模塊。

模塊和模塊之間用連線的形式拼接起來，模塊左側(cè)是輸入接口，右側(cè)是輸出接口，將A模塊右側(cè)的輸出點(diǎn)連接到B模塊左側(cè)的輸入點(diǎn)，即可將A模塊的結(jié)果輸出到B模塊。

基本邏輯

這個(gè)模型是在一個(gè)文章里面一位朋友分享的，我覺得非常到位，基本上每一條操作都是這樣的執(zhí)行邏輯。

每一個(gè)動(dòng)畫首先有一個(gè)交互觸發(fā)動(dòng)作，然后用一個(gè)開關(guān)來控制一個(gè)動(dòng)作的兩種狀態(tài)，兩種狀態(tài)對(duì)應(yīng)變換兩個(gè)數(shù)值，然后表現(xiàn)在層上~ 數(shù)值變化前多一個(gè)彈性動(dòng)畫來控制動(dòng)效。

下圖是最簡單的圖片放大縮小的例子，在數(shù)值變化的地方給圖片大小一個(gè)初始值和結(jié)束值，就可以簡單的實(shí)現(xiàn)點(diǎn)擊圖片放大縮小的效果了~~~~

小試牛刀

搞清楚基本概念和基本邏輯之后，就可以上手試試了。

我們先新建一個(gè)Origami file。

如下圖，會(huì)彈出左右兩個(gè)窗口，這是Origami默認(rèn)的文件，由此也可以看出Origami為移動(dòng)而生~ 第一個(gè)patch可以控制右側(cè)手機(jī)的樣式、橫屏還是豎屏等等，第二個(gè)patch是方角的，也就是上面說的宏（Macro），雙擊它就可以將我們想要設(shè)計(jì)的內(nèi)容放在手機(jī)里面了。第三個(gè)patch是藍(lán)色的顯示層。

每一個(gè)patch都可以雙擊修改名字，在后面內(nèi)容變多的時(shí)候，起好名字變得非常重要?？梢钥吹矫恳粋€(gè)patch都有自己的輸入輸出參數(shù)，可以都調(diào)一下試試看效果~~~

在viewer窗口，有很多很好用的快捷鍵可以調(diào)整展示的樣式。例如，每次我會(huì)很習(xí)慣地去掉拿著手機(jī)的手……在viewer窗口激活的狀態(tài)下， 鍵盤輸入H，就可以去掉手了；鍵盤輸入=/-可以切換背景樣式；鍵盤輸入F可以全屏展示，去掉手機(jī)框。

Demo1. Hello Origami

按照開發(fā)教程最習(xí)慣性的做法，我們先來做一個(gè)“Hello Origami”的demo。

雙擊Layer Group，進(jìn)入界面內(nèi)編輯態(tài)，這里有一個(gè)已經(jīng)存在的patch是Fill Layer，這是一個(gè)填充圖層，用來設(shè)置背景。

在編輯區(qū)域，鍵盤輸入T，就出現(xiàn)了一個(gè)Text Layer。 這里說一下，調(diào)出所有patch庫的快捷鍵是“command + enter”。（請(qǐng)叫我快捷鍵癮君子~）

可以看到viewer區(qū)域已經(jīng)有“text”顯示了，選中Text Layer 按“command+1”，可以呼出這個(gè)layer的設(shè)置項(xiàng)，就可以隨便調(diào)整試試看了，我們?cè)赥ext項(xiàng)里寫上“Hello Origami”，就完成Demo1啦~~~

Demo2，可交互的Origami

接下來我們?cè)囍尠咐换テ饋恚鲆粋€(gè)點(diǎn)擊窗口，文案顏色和背景顏色互換的demo。

在編輯窗口，鍵盤輸入I，可以看到出來了一個(gè)Interaction2的紫色patch，這是一個(gè)交互指令patch，輸出交互指令，down是鼠標(biāo)按下狀態(tài)，up是鼠標(biāo)單擊狀態(tài)，tap是觸碰，drag是拖拽（這里提一下，從手機(jī)來操作時(shí)，感覺up和tap是一樣的，我也有點(diǎn)不理解）。

在編輯窗口，鍵盤輸入“command + enter”，呼出Patch?Library，輸入Color Transition，其實(shí)看名字大家應(yīng)該就知道這是個(gè)啥，對(duì)就是這個(gè)東西來切換顏色。再在編輯窗口，鍵盤輸入“shift + S”，得到Switch patch，這是一個(gè)開關(guān)。

連接幾個(gè)patch，我們就可以切換Hello Origami的顏色了，同樣的方式，把背景再同步切換一下，Demo2 完成~~~~

和切換顏色同樣的道理，我們可以用Transition切換文本的大小。Layer中，scale是控制大小的元素，按百分比變化，1為100%以此類推。這時(shí)候你可能會(huì)覺得切換效果不夠柔和，很生硬，在編輯窗口，鍵盤輸入A，出現(xiàn)一個(gè)Pop Animation，這是一個(gè)動(dòng)畫過渡的效果，把這個(gè)patch放在顏色變化前，就會(huì)有過渡效果啦~~~~

如下圖，就出來一個(gè)最簡單的閃屏感覺的動(dòng)畫。

一些概念

關(guān)于坐標(biāo)

在Origami里，每一個(gè)patch的anchor point，默認(rèn)狀態(tài)在畫布中心（0，0），我們可以對(duì)每一個(gè)patch定義它的anchor point， 舉例來說，如果想要一個(gè)元素在左上角，則可以設(shè)置它的anchor point為top left，然后設(shè)置它位于左上角的位置是（100，-100），如此，就可以得到一個(gè)距離頂部和左邊緣分別100的位置。

關(guān)于單位

在Origami里，width、height、position都是以pixels為單位；opacity和scale是百分制，0-1分別對(duì)應(yīng)0和100%。

常用patch

這部分也是參考了網(wǎng)友的智慧~~~把他們按照類型簡單歸了一下類，很清晰~

顯示類

交互觸發(fā)類

交互響應(yīng)類

其他

常用快捷鍵

大招來了 Origami + Sketch

在Sketch里，只要把文件的名稱命名規(guī)范，就可以用插件自動(dòng)切圖，再然后在Origami里面，所有圖都可以用Live Image這個(gè)patch來承載，這樣當(dāng)你在Sketch調(diào)整圖片的時(shí)候，使用快捷鍵“shift + option + command + o”,便可以一鍵同步到你的動(dòng)態(tài)demo。

終極武器

你可以說以上內(nèi)容其實(shí)我們都可以用PS + AE完成，但Origami有一個(gè)終極理由讓你使用它來做動(dòng)畫——導(dǎo)出代碼。

因?yàn)镼C本來就是Xcode的一個(gè)可視化程序，因此它的運(yùn)行邏輯其實(shí)和代碼是一樣的，Origami做了一件事情是可以直接一鍵導(dǎo)出代碼，據(jù)說開發(fā)GG可以直接使用哦！這個(gè)我也還沒有試過，如果真的可以很方便的導(dǎo)出代碼直接給開發(fā)用，那么又省掉一個(gè)環(huán)節(jié)提高效率啦~~~~~~~

下圖的案例是簡單做了一個(gè)QQ音樂里面播放頁彈出的動(dòng)效~

附錄

以下是對(duì)我?guī)椭畲蟮膸讉€(gè)網(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