@JingDesign?：作為一款好用的，號(hào)稱不用一行代碼就可以簡單方便完成動(dòng)效及交互設(shè)計(jì)的工具，V2.0版本確實(shí)帶給我們了更多的驚喜。在之前，F(xiàn)linto完成交互操作主要依靠兩個(gè)畫板之間做過度動(dòng)畫，雖然表面上看起來很方便，但是在真正的實(shí)際工作中，由于沒有類似于Symbols或者Flash的影片剪輯一樣的功能，因此使用受到不少限制，靜電之前也吐槽過這類連線工具的弊端，不過現(xiàn)在Flinto中新加入了Behavior Designer功能，使用此功能后，可以實(shí)現(xiàn)不少微交互效果，特別是在同一個(gè)屏幕中，我們可以展示N個(gè)微交互，而不用來來回回的跳轉(zhuǎn)畫板，真的很方便，靜電的印象真的已經(jīng)大為改觀。不得不說，Flinto越來越成熟了，可以作為大家做交互動(dòng)效的主力工具。下面，來跟著靜電一起來看看吧。

試用版過期？現(xiàn)在你可以再次免費(fèi)試用

如果你之前下載的試用版Flinto 已經(jīng)過期，現(xiàn)在更新到新版本的Flinto V2 即可再次開啟14天的試用。不過，這么好的工具，還是推薦大家去官網(wǎng)購買吧。（購買地址：https://www.flinto.com/mac ? 目前99美刀，Mac Appstore或者獨(dú)立版本均可）

全新的Behavior Designer

新的Behavior Designer區(qū)別于之前的Transition方式，此功能主要用來設(shè)計(jì)UI界面中的微交互效果。比如基于滾動(dòng)的交互，循環(huán)播放的動(dòng)畫，開關(guān)按鈕，以及按鈕的點(diǎn)擊效果等等，都可以使用Behavior Designer來完成，從此一個(gè)界面中可以承載更多獨(dú)立的交互效果。同時(shí)，動(dòng)作（Behavior）是可以復(fù)用的，就像Transitions一樣；并且，Behaviors可以被打斷，比如超響應(yīng)交互方式。

使用Behavior Designer設(shè)計(jì)動(dòng)畫效率非常高，并且修改動(dòng)畫也很直觀。你修改的就是你實(shí)際看到的效果，所以不用擔(dān)心自己的思維與工作實(shí)際顯示效果脫節(jié)。

行為可以被應(yīng)用于組和一系列的狀態(tài)中。通過在每個(gè)狀態(tài)中添加鏈接，你可以在這些狀態(tài)之間跳轉(zhuǎn)，同時(shí)動(dòng)畫會(huì)自動(dòng)被觸發(fā)（類似于Principle中的Drive效果）。

要設(shè)計(jì)開關(guān)按鈕，首先我們要?jiǎng)?chuàng)建一個(gè)“開”和“關(guān)”的狀態(tài)。每一個(gè)狀態(tài)應(yīng)該有一個(gè)點(diǎn)擊手勢做對(duì)應(yīng)。當(dāng)然，你也可以添加左右滑動(dòng)手勢作為附加效果以增加真實(shí)性。

要制作循環(huán)播放動(dòng)畫效果，首先將動(dòng)畫的起始狀態(tài)做出來，然后使用定時(shí)器將這些狀態(tài)鏈接在一起即可。

對(duì)基于滾動(dòng)的動(dòng)畫效果，使用新的“滾動(dòng)”手勢將兩個(gè)狀態(tài)相連。然后當(dāng)你在定義的范圍內(nèi)滾動(dòng)頁面的時(shí)候，基于兩個(gè)狀態(tài)直接的漸變動(dòng)畫就會(huì)生效。如上面的例子，演示了在一個(gè)組中的兩個(gè)不同行為：一個(gè)用于收縮頭部對(duì)象文字，另一個(gè)用于右側(cè)的視差動(dòng)畫。

退出Behavior Designer后，你可以繼續(xù)專注于原型中其它部分的設(shè)計(jì)，而不用擔(dān)心交互效果的具體細(xì)節(jié)。

可用于多個(gè)文檔的動(dòng)作和轉(zhuǎn)場效果

全新的Flinto 2可以在多個(gè)文檔中共享轉(zhuǎn)場效果和動(dòng)作。從一個(gè)文檔中拷貝鏈接到另一個(gè)文檔中即可在新文檔中復(fù)用效果。當(dāng)然，應(yīng)用于組的行為也可以被拷貝到新文檔中復(fù)用。

此功能對(duì)于團(tuán)隊(duì)協(xié)作非常有幫助，同時(shí)，我們可以更方便的使用別人分享到網(wǎng)絡(luò)中的動(dòng)畫效果。

可用于多個(gè)文檔的動(dòng)作和轉(zhuǎn)場效果

Flinto2中新的轉(zhuǎn)場編輯器同樣引人注目，因?yàn)樗F(xiàn)在更好用了。我們解決了使用者在之前的轉(zhuǎn)場編輯器中常見的令人困惑的問題，并增加了新的設(shè)置來創(chuàng)建“對(duì)齊屏幕”轉(zhuǎn)場效果。

· 新的起始于結(jié)束屏幕中的縮略圖讓使用者可以更明確的分辨哪個(gè)狀態(tài)是開始，哪個(gè)狀態(tài)是結(jié)束

· 屏幕邊框被移除，以便于把它們當(dāng)作組來處理。點(diǎn)擊并拖動(dòng)屏幕將移動(dòng)整個(gè)畫面。雙擊或者按住Command點(diǎn)擊鼠標(biāo)則可以進(jìn)入組內(nèi)部來編輯其中的元素。

· 新的“對(duì)齊屏幕”選項(xiàng)可以鎖定屏幕的對(duì)齊位置，減少在調(diào)整過程中位置的出錯(cuò)。

馬上現(xiàn)在下載Flinto for Mac 2：https://www.flinto.com/mac

歡迎關(guān)注譯者公眾號(hào)：

適合交互設(shè)計(jì)師的軟件：

• 《上手親測！資深交互設(shè)計(jì)師推薦的6大必備神器（附教程）》

交互神器推薦：

• 《設(shè)計(jì)師新寵！交互神器ORIGAMI》
• 《設(shè)計(jì)利器搶先看！QUARTZ COMPOSER+ORIGAMI 2.0介紹及教程》
• 《動(dòng)效神器第二波！ORIGAMI五分鐘零基礎(chǔ)入門秘籍》

原文地址：blog.flinto.com

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量150萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com