動效軟件 Form 教程:狀態控制

這篇文章根據官方推薦的視頻,來介紹一下如何用 Form 實現:

分別先添加兩個名為 State Output 和 State Input 的 Patch 到當前工程中。這里說明一下,State Output 能夠輸出一個預先設定的數值并且存儲在 State Snput 當中,換言之就是一個狀態的存儲,這個狀態可能對應的是拖動某個控件時其位置等信息,比如接下來具體講解的這個例子。

同時再添加一個Color View Patch 和一個 Math Patch,設置為加法,按下圖所示連接。簡單解釋一下,從 State Output 會輸出一個數值(默認是0),傳遞給加法器之后(設置+0.1),會進一步傳遞給 State Input 和 Color View。到 State Input 中的數據會被暫時存儲,通過 State 接口返回給 State Output,再次輸出進行累加。而每一次累加的結果也會通過 X Position 接口使得 Color View 發生變化。最后的結果就是,白色方塊慢慢勻速向右側滑動。(從連接線上的數值能看到加法以后的結果)

現在,我們希望白色方塊能夠跟隨手指的拖動而移動。添加 Pan Interaction Patch,并做如下圖連接。原本 State Output 中輸出的值是+0.1,現在,將 X Delta 接口傳遞給加法器進行累加,結果就是 State Output 的數值加上 X 坐標的變化量。Pan Interaction 能夠搜集白色方塊上手勢滑動的變量,效果是現在方塊可以隨著手指向左右移動了。

一般我們還會限定控件的移動返回,比如不能讓這個白色方塊移動到界面之外(因為那樣你就不能操縱它回來了),所以這里添加一個Clamp Patch,名字很形象,叫做夾具。將 Clamp Patch 的最小值和最大值分別設置為0和120,并且放置在 Color View 和加法器之間,如下圖所示。這樣,白色方塊就只能在屏幕內滑動,而不會越過邊界了。

有的時候,像這類滑動控件的動畫經常會用到,因此可以將這些動作打包并添加到自己的庫中。首先把除了 Color View 以外的所有 Patch 打包成一個 Group,命名為Pan Clamp。雙擊進入 Group 的內部,我們要給這個通用組建設置輸入和輸出窗口。添加一個 Input Splitter Patch,,在 Patch 上右鍵,選擇Publish Outpus,選擇 Output,將接口輸出:

最后給 Clamp 的最大最小值也設置入口,總體如圖連接。

現在,點擊頂部的 Document,再選擇 Add Selection to Library,填寫描述等內容,就完成了。

視頻下載

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • (未經允許,不得擅自轉載) 都說產品設計師的設計可以用 Axure + Sketch + Origami三者聯動,...
    鎮雷閱讀 6,394評論 9 37
  • 界面中常常會出現很多規則排列的重復元素,所以今天來學習一下 Form 中的復制器 Replicator Patch...
    鎮雷閱讀 2,056評論 2 13
  • Spring Cloud為開發人員提供了快速構建分布式系統中一些常見模式的工具(例如配置管理,服務發現,斷路器,智...
    卡卡羅2017閱讀 134,837評論 18 139
  • 發現 關注 消息 iOS 第三方庫、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,180評論 4 61
  • 有點文化底蘊不夠的感覺,汪洋恣肆什么意思理解不了,是不是要象自然光一樣隨心隨意散著光芒,今天感覺老天爺特別照顧我,...
    童希園閱讀 189評論 0 1