編輯導讀：閃動的氣泡在産品中是很常見的功能，用以動态的提示。本文作者用Axure進行案例演示，分析如何用Axure制作氣泡閃動圖，希望對你有幫助。

在一些常見的大屏可視化中，均會以閃動的氣泡作為一些提示符，進行動态的提示。

一、準備

• Axure 9（或Axure 8、10）軟件已安裝。
• 掌握基本的軟件使用。

二、本教程知識點三、詳細教程

1. 功能

實現目标元件在界面中持續的動态變化。

2. 制作方式（以均勻變化為例）

1）利用元件的載入交互，設定元件的尺寸變化

• 尺寸的設置，相對于原始的尺寸進行變化。例如設置尺寸比原始尺寸小，則先進行變小的動效。
• 中心點選擇，中心點絕對了以什麼為中心進行縮放（放大），常規選擇中心。
• 動畫時長，若不進行動畫時長的設置，将會以很快的速度進行加載。基本在預覽界面出來時已經加載完成。此處為了又相對縮放（放大）的效果，需設定時長。

注：1秒為1000毫秒。通過設置300-500毫秒，時間越短，交互的動銷變化越快。

2）利用元件的尺寸改變時交互，進行持續的交互延續

整體的交互效果就是為“ 大（原始狀态）– 小 — 大 — 小 ”的循環，在此處可以借助元件的尺寸改變進行連續的觸發交互。

首先設定對應尺寸恢複至原始大小（或差不多的尺寸）。設置同等的動畫時長。

• 重點：為了保證交互的連續，此處的動畫時長應該于載入時的交互一緻，才可達到勻速收縮。若想實現縮放非勻速可進行時間的差異化設定。
• 關于尺寸，尺寸恢複至原始大小，若涉及漸變可以少或多幾個像素，這樣看起來交互能夠自然。

恢複至原始大小後，再重複設定縮小的交互。設置縮小的屬性通載入時縮小的屬性即可。

3. 其它相關知識點

1）如何設置連續持續由小變大

隻需在“ 大（原始狀态）– 小 — 大 — 小 ”的狀态中的最後一個環節（“ 大（原始狀态）– 小 — 大 — 小 ”）中移除動畫時長即可。移除動畫時長，對應元件會瞬間變小進行後續的循環。

2）如何處理漸變效果

此處案例的漸變是通過元件填充的顔色中的徑向實現。

• 可以進行畫布放大進行調整徑向細節。
• 顔色多重過渡時主要過渡的自然。
• 每個關鍵點可以進行單獨的透明度調整，可以通過透明度進行相關效果的調整。

3）如何設置圖标的變化

圖标的效果變化其實和上述案例的設置一緻，隻需将對應的交互效果設定在圖标上即可。

四、總結

部分交互效果無法一次性實現，可以适用交互動作的嵌套進行實現。

#專欄作家#

Brose，PMYX，人人都是産品經理專欄作家。關注廣告營銷、K12教育、智慧零售。擅長系統需求挖掘與功能設計。

本文原創發布于人人都是産品經理，未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議。

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部