framer

設計師 學習 Framer 第三章:運用 Animation 讓原型更生動

在 Part 2:設計師 學習 Framer 第二章:從 Sketch 到 Framer 的最後,我們設計了一個簡單愛心狀按鈕的互動,大家一定都覺得僅是切換的效果,超級死板的對吧!接下來,就讓我們運用 Framer 提供的 Animation 功能,來讓我們的原型更有趣~

framer_part2_06

Animation 動畫

在這個範例裡,我們希望讓愛心可有有放大縮小的動畫特效。在一個動畫事件裡,主要是由屬性(大小、XYZ …等)、時間、還有動畫曲線三種元素構成。

objectA.animate                         # 將 objectA 執行動畫事件
properties:                                   # 宣告要被控制的屬性
x: 100                                            # 將 objectA 的 X座標 移動到 100 的位置
time: 0.3                                       # 花費時間 (秒)
curve: “spring(300,10,0)”         # 曲線

 

在上一個教學裡,我們已經學會了以 sketch.heartBtn.on Events.Tap, -> 來做出點擊事件,接下來在這事件下寫上:

sketch.heartBtnActive.scale = 0               #將 heartBtnActive 按鈕比例設成 0

sketch.heartBtnActive.animate                #將 sketch.heartBtnActive 執行動畫
properties:                                                    #告訴系統有哪些屬性要設置動畫
scale: 1                                                           #比例大小
time: 0.3                                                       #時間 (秒)
curve: “spring(300,10,0)”                         #動畫曲線 (決定移動距離在時間內的分配)

 

在動畫開始前,我們先將 heartBtnActive 這個按鈕的比例縮成 0,這樣才會從最小開始放大,不然你的動畫是不會有效果。

接著,在 heartBtnActive 圖層上,設下動畫事件,我們希望讓比例大小從 0 變到 1,所以要控制的屬性只有 scale,而把時間則設定成 0.3 秒,其實只要設定到這裡,就可以看到動畫效果,但可能不是那麼生動。

framerjs

 

真正讓愛心彈跳的其實是 curve: “spring (300, 10, 0) 這個動畫曲線設定。Spring 這個曲線就是在模擬彈簧拉動放掉後,所產生的力道。三個參數分別為張力(Tension), 摩擦力(Friction)以及 Velocity(速度)。 如果你真的有興趣才去研究背後的物理,但大部分的設計師還是依賴著我們的眼睛與感覺去選擇正確的設計,所以這邊提供一個小工具:Framer JS Animation playground,在這上面可以盡情地試出喜歡的彈簧效果。

framer_part3_02

 

當然除了彈簧效果外,Framer 的動畫曲線也有一般常見的 Linear, Ease-in/out。想要瞭解更多變化可以到 Doc/Animation 看喔!

framer_part3_03

 

目前為止,heartBtn 點擊事件應該是

framer_part3_04

 

小練習:
把動畫的效果,也複製到 loopBtn 與 shuffleBtn 的事件去吧!

 

State 狀態

在設計 UI 按鈕時,通常會設計不同的按鈕狀態,而 Framer 裡面的 States 可以讓我們很簡單的去定義出按鈕各種不同狀態,並可以自由狀態中進行切換。

這邊我們使用一個畫面中的 PlayBtn 當一個簡單的範例。

BUTTON STATES

 

因為我們出圖只出了一張 Normal State,所以現在我們需要製作 Pressing State。那製作的方式有兩種,一種是回到 Sketch 製作全新 PlayBtn 的 Pressing State,然後利用切換圖片的方式。另一種則是直接在 Framer 針對 PlayBtn 創建 Pressing State。

由於我們渴望的效果是,壓暗並縮小 scale 到 0.9,所以可以直接採用第二種方式,這邊可以使用之前提到的 Auto-Code 功能。

framer_part3_06

 

此時,會看到兩個部分在畫面上被強調,

framer_part3_07

 

看到右邊的部分,基本上這就是你可以自由調整圖層的所有屬性參數,依據我們的需求,將 scale 1.0 改成 0.9,壓暗的效果,可以透過將 Brightness 設成 80。你會看到在程式碼 stateA 底下自動出現你所修改的參數,沒錯 AutoCode 會自動產生你所修改的內容的程式碼。

讓我們把 stateA 改成 pressing,方便讓我們知道這是按住的狀態。如果你希望重新修正這個狀態的參數,你可以點擊在 pressing 旁邊那個小框框進行重新編輯。

framer_part3_08

 

playBtn 在程式裡有兩種 State,一個是 normal State(或是你也可稱為 Default State,該 State 是系統預設),另一個則是剛剛創建的 pressing State。原則上,可以在一個按鈕(圖層)上,一口氣增加很多不同的 State,譬如說,hover, selected 等等。

現在讓我們在 playBtn 加上 TapStart 這個觸發事件吧。(onTapStart 是偵測按鈕開始被觸碰那一瞬間,而通常都會搭配 onTapEnd 使用)

sketch.playBtn.onTouchStart ->

 

然後我們在底下加上切換到 pressing state 的程式碼

sketch.playBtn.onTouchStart ->
sketch.playBtn.states.switch ( “pressing”)

 

點擊看看你的 playBtn,你會發現按鈕會慢慢從 normal state 漸變成 pressing state。但是速度上似乎有點過慢,那是因為 Framer 在切換 state 時候,會自動產生漸變的動畫,而這個動畫的設定會使用系統的預設動畫設定值(time: 1.0 curve: “ease”)。在這邊我們需要修改一下切換狀態的動畫參數,而這參數只會針對 playBtn 有所影響。

sketch.playBtn.states.animationOptions =
time: 0.1
curve: “ease-out”

 

現在按下去就正常多了!

framer_part3_09

 

最後讓我們加上 tapEnd 的觸發事件吧!我們要讓 playBtn 隱藏起來,並出現 pauseBtn。

sketch.playBtn.onTapEnd ->
sketch.playBtn.visible = false
sketch.pauseBtn.visible = true

 

完整的微互動原型就大功告成了!

小練習: 在點下播放鈕後,讓上面播放進度條(currentTimeBar)會隨著時間增加

Framer Project 檔案:http://share.framerjs.com/muf7roraw1in/

將下來 Part 4 教學,將會教大家如何使用 Draggable (拖拉物件)以及 scroll componet (滑動物件),如果有相關問題,隨時歡迎大家到 Framer JS Taiwan 詢問喔:)

衍伸閱讀

本文章所屬設計大舌頭與作者所有,未經授權,不得轉載!如需轉載,煩請通知

如果你也喜歡我們的文章,請 Follow 我們的 Facebook 專頁,每天都會分享許多精選文章!

分享此文: