Axure入門案例系列——Axure制作氣泡閃動圖
編輯導(dǎo)讀:閃動的氣泡在產(chǎn)品中是很常見的功能,用以動態(tài)的提示。本文作者用Axure進行案例演示,分析如何用Axure制作氣泡閃動圖,希望對你有幫助。
在一些常見的大屏可視化中,均會以閃動的氣泡作為一些提示符,進行動態(tài)的提示。
一、準(zhǔn)備
- Axure 9(或Axure 8、10)軟件已安裝。
- 掌握基本的軟件使用。
二、本教程知識點
- 交互動效延時
- 填充的漸變樣式
- 連續(xù)動態(tài)的交互實現(xiàn)
三、詳細(xì)教程
1. 功能
實現(xiàn)目標(biāo)元件在界面中持續(xù)的動態(tài)變化。
2. 制作方式(以均勻變化為例)
1)利用元件的載入交互,設(shè)定元件的尺寸變化
- 尺寸的設(shè)置,相對于原始的尺寸進行變化。例如設(shè)置尺寸比原始尺寸小,則先進行變小的動效。
- 中心點選擇,中心點絕對了以什么為中心進行縮放(放大),常規(guī)選擇中心。
- 動畫時長,若不進行動畫時長的設(shè)置,將會以很快的速度進行加載?;驹陬A(yù)覽界面出來時已經(jīng)加載完成。此處為了又相對縮放(放大)的效果,需設(shè)定時長。
注:1秒為1000毫秒。通過設(shè)置300-500毫秒,時間越短,交互的動銷變化越快。
2)利用元件的尺寸改變時交互,進行持續(xù)的交互延續(xù)
整體的交互效果就是為“ 大(原始狀態(tài))– 小 — 大 — 小 ”的循環(huán),在此處可以借助元件的尺寸改變進行連續(xù)的觸發(fā)交互。
首先設(shè)定對應(yīng)尺寸恢復(fù)至原始大小(或差不多的尺寸)。設(shè)置同等的動畫時長。
- 重點:為了保證交互的連續(xù),此處的動畫時長應(yīng)該于載入時的交互一致,才可達到勻速收縮。若想實現(xiàn)縮放非勻速可進行時間的差異化設(shè)定。
- 關(guān)于尺寸,尺寸恢復(fù)至原始大小,若涉及漸變可以少或多幾個像素,這樣看起來交互能夠自然。
恢復(fù)至原始大小后,再重復(fù)設(shè)定縮小的交互。設(shè)置縮小的屬性通載入時縮小的屬性即可。
3. 其它相關(guān)知識點
1)如何設(shè)置連續(xù)持續(xù)由小變大
只需在“ 大(原始狀態(tài))– 小 — 大 — 小 ”的狀態(tài)中的最后一個環(huán)節(jié)(“ 大(原始狀態(tài))– 小 — 大 — 小 ”)中移除動畫時長即可。移除動畫時長,對應(yīng)元件會瞬間變小進行后續(xù)的循環(huán)。
2)如何處理漸變效果
此處案例的漸變是通過元件填充的顏色中的徑向?qū)崿F(xiàn)。
- 可以進行畫布放大進行調(diào)整徑向細(xì)節(jié)。
- 顏色多重過渡時主要過渡的自然。
- 每個關(guān)鍵點可以進行單獨的透明度調(diào)整,可以通過透明度進行相關(guān)效果的調(diào)整。
3)如何設(shè)置圖標(biāo)的變化
圖標(biāo)的效果變化其實和上述案例的設(shè)置一致,只需將對應(yīng)的交互效果設(shè)定在圖標(biāo)上即可。
四、總結(jié)
部分交互效果無法一次性實現(xiàn),可以適用交互動作的嵌套進行實現(xiàn)。
#專欄作家#
Brose,微信公眾號:PMYX,人人都是產(chǎn)品經(jīng)理專欄作家。關(guān)注廣告營銷、K12教育、智慧零售。擅長系統(tǒng)需求挖掘與功能設(shè)計。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自Unsplash,基于CC0協(xié)議。
做了三個交互后怎么循環(huán)呀
不反對搬運,可以這圖那么糊咋看啊
1、文章為原創(chuàng)
2、利用了官方的知乎文章直接導(dǎo)入,過來的圖就是這樣,下次我直接上傳原圖,不使用導(dǎo)入吧