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

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

Animation 動畫

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

objectA.animate # 將 objectA 執行動畫事件
properties: # 宣告要被控制的屬性
x: 100 # 將 objectA 的 Ｘ座標 移動到 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 秒，其實只要設定到這裡，就可以看到動畫效果，但可能不是那麼生動。

 

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

 

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

 

 

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

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

 

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

 

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

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

 

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”

 

現在按下去就正常多了！

 

最後讓我們加上 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 詢問喔：）

–

衍伸閱讀

• 設計師 學習 Framer 第一章：前言與觀念
• 設計師 學習 Framer 第二章：從 Sketch 到 Framer

–

本文章已獲得作者 Chris Chen 授權，原文：從設計師角度學習 Framer Part 3：運用 Animation 讓原型更生動

 

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