2019獨角獸企業(yè)重金招聘Python工程師標準>>>

最近用到了一個非常強大的工具，這是一款由 facebook 出品的原型設計軟件，老規(guī)矩我們先來看一下效果。大家也可以先進去官網(wǎng)看看效果 Origami 官網(wǎng)

scroll.gif

swipe.gif

Origami 運行模擬器

我門在編輯 Origami 的時候，相應的效果圖會直接運行在運行模擬器，我們可以在手機上安裝 Origami 軟件，這樣就可以在真機實時獲取運行效果了

Origami 圖形編輯界面

Origami 提供了一個非常方便的圖形界面編輯器，我們只需要簡單的拖拽連線就可以實現(xiàn)很多復雜的交互。

Origami 組件

Origami 的編輯器，給我的直觀感覺就是用圖形在編程，因為他提供了非常多的組件（Patch，翻譯不太準確，不過這種說法好像更好理解），每種組件都有特定的功能。組件提供端口（Port）我們可以理解為每個Port 代表一個值，每個值通過連線來傳遞，左邊的端口代表輸入的數(shù)據(jù)，組件在接收左邊端口傳來的值后會對這些值進行處理然后把結(jié)果值輸出在右邊的端口。如果下圖所示

2A70A09A-128E-4933-AB01-BDB2B0D6CFD1.png

可以看到Device Info 組件，可以實時的獲取設備的信息，然后通過右端口輸出。而輸出端口的參數(shù)又可以作為其他組件的輸入端口的參數(shù)，以此類推。靈活的使用這些組件可以組合出強大的功能。我們來簡單的修改一下上圖的連線，如下圖所示

通過獲取設備的旋轉(zhuǎn)角度，然后實時的改變圖層三維旋轉(zhuǎn)信息，效果圖如下

Pop animation

Origami 提供Pop animation 組件，Pop animation 在交互動畫來說是非常常用的一個動畫庫，他能夠很好的體現(xiàn)于用戶之間的交互，提供很多平滑，舒服的效果。畢竟都是 Facebook 自家的兒子，能夠很好的支持。而且還有一個很重要的一點，Origami 支持動畫的導出為代碼，程序員直接可以使用這些導出的代碼（從此程序員再也不會聽到，“你說這個動畫效果是不是快了”，?????）

Origami 組件（Patch）介紹

組件是 Origami 的基石，熟悉了每個組件的功能 Origami 就算入門了，接下來介紹一下常見的組件

Layer

用來顯示一張圖片到 屏幕（最常用的一個組件），如下圖所示

輸入端口參數(shù)說明：
Enable ：（是否現(xiàn)實在屏幕上）
Anchor ：Point （錨點） 圖片內(nèi)的停泊點，就是把一張圖片上的點座位準點，在移動到某個位置（Position）的時候，把這個錨點和位置對準。
Position ： Layer 所處的位置信息包括 X Y Z
Rotation ：Layer 的旋轉(zhuǎn)角度 XR YR ZR
Width ：Layer 的寬度
Height ：Layer 的高度
Image ：Layer 顯示的圖片內(nèi)容
Mask Image ：遮蓋圖片
Color ： 背景色
Opacity ：透明度
Scale ：圖片的放大比率

Interaction 2

用來獲取點擊在圖層（Layer，Text Layer，Hit Area 等等）或者屏幕的手勢事件

注意：最上面右上角 有一個輸出，用于鏈接Layer，如果鏈接了Layer，就只接收該Layer 的點擊事件，如果沒有鏈接默認是連到屏幕上（即能夠接收所有的點擊事件）
Enable ：如果為 YES 的話就能夠獲得事件，如果為 NO 就獲取不到事件
Down、Up、Tap、Drag 用于區(qū)分不同的觸發(fā)事件

Hit Area

Hit Area 一般和 interaction 2 配合使用，用于設置點擊的區(qū)域

一些重復出現(xiàn)的屬性就不說了
Setup Mode ： 用于設置模式，如果為YES 則

Transition

可以樣一個百分比值線性轉(zhuǎn)化為，起點到終點之間的某個值

Progress：百分比值
Start Value：起點
End Value：終點
Value：轉(zhuǎn)化后的值

Pop animation

可以樣輸入的值彈性的變化，

Number ：傳入的參數(shù)需要設置的值
Bounciness ：彈性
Speed ：變化的速率
Progress ：彈性變化后輸出的值

Scroll

讓圖層具備滾動功能

Image ：要滾動的圖片，一般與 Layer 的 Image 一致

XScrolling、YScrolling ：設置滾動的模式，page（每次滾一頁） 、free（自由滾動）、off （關閉滾動）

XPosition、YPosition ： 實時計算輸出滾動的位置
info ：滾動的額外信息、鏈接 Scroll Info 來查看

Swipe

用于監(jiān)聽滑動手勢 （上下劃，左右滑），觸發(fā)傳動事件，會在兩個位置之間來回傳動

?

Enable : 值為 Yes 監(jiān)聽 Swipe 滑動手勢， NO 忽略 Swipe 手勢
Direction ：水平方向，豎直方向
Start Position ：傳動的起始位置
End Position ：傳動的終止位置
Flip ： 當有一個Pulse 就觸發(fā)傳動事件，會來回切換傳動狀態(tài)（在起始點和終止點之間）
Jump to Start ： 當有一個Pulse 就觸發(fā)傳動事件， 傳動為起始點
Jump to End ： 當有一個Pulse 就觸發(fā)傳動事件，傳動為終止點
settings ： 于Swipe setting patch相連，來做一些自定義的東西

Position ： 實時計算當前的位置
Progress ： 實時返回傳動的進度
index ：用于記錄傳動的狀態(tài)，（是起始點，還是終止點）

Origami 實時性

Origami 可以方便的鏈接Sketch文件和PSD文件，這是一個非常強大的功能。大家可以注意到，本文通篇都在強調(diào)一個詞 “實時” ，因為實時給我們帶來的是效率，修改了什么，直接就可以體現(xiàn)出來。不管你是在修改編輯界面，還是直接修改 Sketch、PSD 文件。我們都直接可以在與行模擬器上直接看到效果。

Origami 學習

我們可以 研究 Origami Demo 快速的學習 Origami

這里我們來簡單介紹一下官方的demo，效果如下

longpress.gif

屏幕快照 2016-06-29 上午10.00.32.png

我們首先在編輯界面添加一張背景圖片，如下圖所示

屏幕快照 2016-06-29 上午10.05.04.png

然后我們給一個區(qū)域添加一個手勢，并且這個手勢被觸發(fā)的時候會對輸出的值進行一個Pop Animation 動畫計算，如下圖所示

在計算Pop Animation 把計算后的數(shù)值分別用于，改變汽車圖片的大小Scale，和設置底層跌破的透明度

以上就介紹到那么多。

Origami 學習相關網(wǎng)站

官方教學視頻
官方文檔
Origamin demo 網(wǎng)站
MartinRGB 的Demo

作者：HuminiOS-極光

原文：http://www.jianshu.com/p/abc926e295dd#

轉(zhuǎn)載于:https://my.oschina.net/jpushtech/blog/840303

總結(jié)

以上是生活随笔為你收集整理的交互神器 Facebook Origami的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。