動畫效果：“做最精彩的一代”，讓你的網(wǎng)頁動起來！

時間：2023-07-26 04:24:02 | 來源：網(wǎng)站運營

時間：2023-07-26 04:24:02 來源：網(wǎng)站運營

動畫效果：“做最精彩的一代”，讓你的網(wǎng)頁動起來！：動畫效果，前端工程師制作網(wǎng)頁時的常用工具，能極大提升用戶體驗、提高網(wǎng)頁美觀度。

如何讓你的網(wǎng)頁動起來？且看本期分解。

本文建議搭配 <郭富城-動起來> 閱讀。

---

實際上，界面動畫效果背后涉及到的參數(shù)非常簡單——只有三種，即時間、變化、曲線。無論多復(fù)雜的動效也是這三種參數(shù)經(jīng)過組合拼接出來的。進一步說，在制作動畫效果時，我們可以從以下四個方面著手。

1.變化一個物體的變化大致可以分為四類：位移、旋轉(zhuǎn)、尺寸、自身屬性（自身透明度與顏色變化）。以下圖為例，點擊這個輸入框可以實現(xiàn)這樣的效果：

這樣的效果雖然看起來簡單，但是實現(xiàn)起來也很簡單！我們可以將其拆解為3步：

Step1，一條紅色的橫線自左往右出現(xiàn)。

Step2，輸入框的背景色變透明。

Step3，將輸入框的字體顏色變?yōu)榍熬吧?br>
最后再讓這3步同時發(fā)生，就實現(xiàn)了這個動畫效果。

當(dāng)然我們也可以添加一些別的變化，比如給橫線添加改變顏色，同時在中間添加過渡時間，就能看到它慢慢地從紅變成藍色；再與第一步結(jié)合，就實現(xiàn)了一邊自左至右出現(xiàn)一邊改變顏色的效果。

2. 時長時長即過渡時間，過渡時間越長，用戶看到的動畫時間就越長，參數(shù)變化就越明顯。

如下圖中的三個星星：

第一個過渡時間較長，可以清楚看到它的運動軌跡，變大旋轉(zhuǎn)，以及顏色從灰到橙到黃的一個漸變；

而最后一個過渡時間幾乎沒有，就像是瞬間發(fā)生的，直觀感覺上并沒有動畫效果。這與我們平時寫的點擊事件類似：鼠標移上去時鏈接會變藍，按鈕會變色。有時這會對用戶體驗造成不好的影響，畢竟瞬間發(fā)生有可能會讓大家嚇一跳，而過渡則能給人一個緩沖時間來適應(yīng)變化。以下圖為例：

顯然右邊的動畫效果更易讓人接受。（但加班本身就難以讓人接受。）

3.曲線曲線描述的是物體運動時的速度變化。以五個最基本的運動曲線為例；最基礎(chǔ)的速度曲線有線性、緩入、緩出、緩入緩出和彈跳五種。

在動效設(shè)計中，合理地運用曲線可以產(chǎn)生不一樣的效果，例如彈跳可以實現(xiàn)彈簧抖動的效果等等。

4.時間軸時間軸是復(fù)雜動效中最為重要的，它的作用是讓動畫效果按照一定的時間順序發(fā)生從而產(chǎn)生流暢感。為了更好地為大家介紹時間軸，我們不妨以下圖中的網(wǎng)站為例，試著模仿它的動效。

將上述效果進行拆解——先圖片左移，緊接著第一段文字、第二段文字、第三段文字依次消失。

對此進行模仿就可以得到下圖的動畫效果。

總結(jié)最后，我們來欣賞幾個優(yōu)秀的網(wǎng)站：

1.隨鼠標的移動變化圖標大小：

2.利用時間軸實現(xiàn)矩形黑框的特殊出現(xiàn)：

3.可收縮導(dǎo)航頁的實現(xiàn)：

4.圖片在浮現(xiàn)過程中大小與內(nèi)容尺寸同時變化：

以上就是本期推送的主要內(nèi)容，感謝您的瀏覽！下期再見！

（圖片來源于網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系刪除。）

---

熙派官網(wǎng)：

熙派公眾號：SIMPLEBY熙派

(圖片來源于網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系刪除。)