在原型設計中，我們也常常需要做一些簡單的動畫效果。如何才能夠完成呢？本文將從三個方面進行梳理，希望對你有幫助。

工作中發(fā)現(xiàn)，在原型設計當中，偶爾需要做一些簡單的動畫效果。畢竟動態(tài)相較于靜態(tài)，往往更加引人注目。就好比電商頁面當中，搶紅包的懸浮球常常也是動態(tài)展示。那么，今天就一起來做一個跳動的動畫吧。

一、實現(xiàn)效果

二、實現(xiàn)原理

• 過程很簡單：小球往上彈起，到達指定位置就下落，回到原點的時候繼續(xù)彈起。
• 先給小球添加交互【載入時】，觸發(fā)小球從位置一運動到位置二；
• 有了第一步的觸發(fā)，我們就可以添加交互【移動時】，在這個事件下，一共有兩個情形。情形一：小球在位置二，我們要讓他返回位置一；情形二：小球在位置一的時候，我們就讓他回到位置二。這樣循環(huán)往復，就實現(xiàn)了小球的跳動效果。

三、實現(xiàn)步驟

1.小球原始坐標為（123，110），打開交互編輯器，添加事件【載入時】，添加動作【移動】，設置【動作】讓小球從坐標（124，110）移動到（124，100）；

2.小球到達坐標（124，100）后，添加事件【移動時】，從圖示位置添加兩個情形；

3.在情形一下，添加條件：如果y值=100（因為小球移動過程中只在y軸上發(fā)生移動，所以這里條件只需滿足y的值為100）；

4.[[This,y]]不用手動輸入哦，直接點擊fx，【插入變量或函數(shù)】就可以找到啦，如圖：

5.條件設置好之后，就繼續(xù)添加動作【移動】，把小球從位置二移動到位置一；

6.在情形二下，添加條件：如果y值=100。同理，添加動作【移動】，把小球從位置一移動到位置二；

7.記得所有移動的動作都要設置動畫的時間哦，不然你的小球就會瞬間轉移，看不到效果啦。

碎碎念：第一次發(fā)文，盡量把過程講得詳細一點點，歡迎大家一起交流呀，文中要是有什么錯誤還望各路大神指出~

本文由 @醬心蘿卜 原創(chuàng)發(fā)布于人人都是產品經理，未經許可，禁止轉載。

題圖來自 Unsplash，基于CC0協(xié)議