Adobe XD交互動效教程|用蒙版制作網(wǎng)頁按鈕懸停交互動畫效果

時(shí)間：2023-07-24 14:00:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-07-24 14:00:01 來源：網(wǎng)站運(yùn)營

Adobe XD交互動效教程|用蒙版制作網(wǎng)頁按鈕懸停交互動畫效果：我們本次教程目標(biāo)效果如下圖，一個(gè)向左推拉的網(wǎng)頁按鈕懸停動畫：

Step 1

新建描邊矩形和文字，字體和參數(shù)大家可以根據(jù)自己的愛好來設(shè)置。把矩形和文字編成為一組。

Step 2

在鏤空按鈕組上面右鍵→復(fù)制，我們得到一個(gè)新的組，重命名為懸停。

此時(shí)我們的畫板上有兩個(gè)鏤空按鈕堆疊在一起，為了看清楚，我們可以把下面的鏤空按鈕組給隱藏。

Step 3

修改懸停按鈕組的視覺參數(shù)。由于白色在視覺上有放大的效果，所以字號要縮小一些，字重也要變細(xì)一點(diǎn)。這里我把字號縮小了5pt，字重從heavy調(diào)為bold。

因?yàn)閼彝０粹o是在鏤空按鈕之后出現(xiàn)，我們可以把兩組的位置調(diào)換一下。

Step 4

制作蒙版。我們從之前的組內(nèi)直接復(fù)制一個(gè)矩形，并把矩形拖拽到兩組之上。此時(shí)矩形覆蓋住兩個(gè)按鈕。

同時(shí)選中矩形和兩個(gè)按鈕→右鍵→制作帶有形狀的蒙版。

此時(shí)所有的元素將合成為一個(gè)蒙版組，我們可以看到兩個(gè)按鈕露出在蒙版外面。

Step 5

制作按鈕組件。我們來到右側(cè)面板，選中蒙版組之后，點(diǎn)擊組件面板的添加按鈕，把蒙版組轉(zhuǎn)化為一個(gè)按鈕組件的“默認(rèn)狀態(tài)”。

之后，我們點(diǎn)擊默認(rèn)狀態(tài)后的添加按鈕，來生成按鈕組件的懸停狀態(tài)。

到這里，我們的所有準(zhǔn)備工作就做好了，文件應(yīng)該如下圖狀態(tài)：

Step 6

下面我們就開始調(diào)整組件在兩個(gè)狀態(tài)下的不同外觀，要注意的是一定要對元素進(jìn)行對應(yīng)調(diào)整，我們可以理解為制作動效前后的兩個(gè)關(guān)鍵幀。

首先我們把按鈕組件切換到默認(rèn)狀態(tài)。在默認(rèn)狀態(tài)下，按鈕是鏤空的，所以我們將鏤空組保留在原地，把懸停組向右移動到蒙版的邊界外，這樣在默認(rèn)狀態(tài)下則看不見懸停組。

然后我們可以把“Register”的在默認(rèn)狀態(tài)下的不透明度調(diào)為0，這樣文字在過渡時(shí)會有一個(gè)漸入效果。當(dāng)然如果不調(diào)整的話會是另一種效果，同學(xué)們可以自行設(shè)計(jì)。

然后我們把按鈕組件切到懸停狀態(tài)，同理，我們這次把鏤空組向左推到蒙版邊界之外，把懸停組推進(jìn)蒙版邊界內(nèi)，同時(shí)把“Register”的不透明度調(diào)回100。此時(shí)我們的設(shè)計(jì)步驟全部完成。

Step 7

我們切換到XD的原型制作界面，把組件切到默認(rèn)狀態(tài)，此時(shí)我們可以看到XD已經(jīng)把原型動作設(shè)置好了。注意：有不少同學(xué)說軟件沒有自動設(shè)置，通常都是因?yàn)橥浨袚Q到默認(rèn)狀態(tài)。

在交互面板，前三項(xiàng)不需要調(diào)整。緩動和持續(xù)時(shí)間可以根據(jù)自己的愛好來個(gè)性化調(diào)整。

現(xiàn)在大家可以點(diǎn)擊軟件右上角的桌面預(yù)覽按鈕，我們的按鈕懸停動效就制作好了。

同學(xué)們可以舉一反三，自己嘗試制作類似原理的蒙版按鈕：