動畫的應用已不局限在卡通動漫領域，在網頁設計中也有所運用，從全屏動态圖到懸浮特效，随處可見。網頁動效時尚前衛，新奇有趣，且用戶體驗極好(hǎo)。關于網頁動效你需要知道(dào)的一切，這(zhè)篇文章告訴你。 

動畫的應用已不局限在卡通動漫領域，在網頁設計中也有所運用，從全屏動态圖到懸浮特效，随處可見。網頁動效時尚前衛，新奇有趣，且用戶體驗極好(hǎo)。

内蒙古網站制作，内蒙古網站設計，内蒙古網站建設，呼和浩特網站建設，呼和浩特網站制作、呼和浩特網站設計首選内蒙古呼和浩特先誠網絡科技公司。先誠官網：

/

    注：本文均來自百度搜索，如涉及版權問題，請聯系我們，我們會第一時間解決。

那麼(me)問題來了，如何使用網頁動效成(chéng)了一大難題。用戶浏覽網頁快速，爲吸引其注意力，從簡單的動效或者GIF動态圖到幾分鍾的小動畫制作，已成(chéng)爲簡單實用的網頁設計小工具。

就像一個卡通人物在你的屏幕中走動，或者你mac電腦裡(lǐ)的app圖标在你桌面(miàn)加載的時候像一個皮球一樣(yàng)的跳動，動畫其實就是讓靜止的或二維的某個物體看起(qǐ)來像有了生命一樣(yàng)按照一定物理規律運動。

說到動畫，你就不能(néng)不想起(qǐ)迪士尼。在80年代初期，由這(zhè)家公司的兩(liǎng)位頂級動畫設計師Frank Thomas 和 Ollie Johnston編寫了著名的《迪士尼動畫原則》，這(zhè)本書對(duì)動畫12原則的詳細解釋，至今仍然是動畫的主要構架。它們的12原則分别是：

1.擠壓與拉伸

2.預備動作

3.表演及呈像方式

4.連貫動作法與關鍵動作法

5.跟随動作與重疊動作

6.漸快與漸慢

7.弧形運動軌迹

8.附屬動作

9.時間控制

10.誇張

11.純熟的手繪技巧

12.吸引力

網頁動畫經(jīng)常會被(bèi)保存爲GIF，CSS，SVG，WebGL或者視頻格式。它們可以是當你鼠标懸停在某一單詞的時候出現的下劃線，也可以是一個全屏的視頻，或者是一個背景圖片。任何你能(néng)想到的都(dōu)能(néng)做成(chéng)動畫。通過(guò)與其它的設計技能(néng)相結合，動畫可以是很微妙的，也可以是在你面(miàn)前讓你難以忽略的。

2015的新趨勢

如今，動畫在網頁設計中的使用越來越多。網頁動态設計的關鍵是要适度。小巧簡單的動畫往往新穎有趣，奪人眼球。用戶甚至察覺不出動效的存在。布局大的動畫能(néng)帶給你有趣的視覺體驗，引人入勝。但如果你過(guò)度使用動效，樣(yàng)式太多，以緻混亂，結果往往适得其反。

是啥讓網頁動效開(kāi)始流行？現實！當今設計領域，扁平細緻風格設計随處可見。用戶需要更多的線索，告訴他們要做什麼(me)。一些簡單的動畫能(néng)夠引導用戶，同時不會改變審美。它有助于增加指令，和命令設計體系，簡單的視覺能(néng)爲用戶提供足夠的方向(xiàng)。在這(zhè)種(zhǒng)情況下，動畫在簡單和實用之間建立了一種(zhǒng)平衡。

另一項促使網頁動效流行的因素是用戶，用戶使用工具需要簡潔高效，所以你不需要用FLASH做複雜的動畫。（如果你還(hái)在建FLSH，是時候停止了。）還(hái)有很多其他方法可以制作動效。如今的動畫不再拘泥于網站或服務器，制作動效要能(néng)讓用戶快速加載，使用順暢，不能(néng)中途卡住。

大 vs 小 動畫

背景圖變化的大動畫

小動畫：Henry的眉毛會動哦～

當涉及到網頁動畫時，我們可以簡單的把它分爲兩(liǎng)類：大和小。 (你應該可以猜到它們的樣(yàng)子。)

大型動畫是在頁面(miàn)上有一定規模的。大動畫通常以一個運行的視頻形态出現，一般會在屏幕最顯著的位置上，小電影的形态是它的重要特點之一。這(zhè)些動畫是整體設計中的一個重點。用戶通常不需要操作任何動作就能(néng)看到這(zhè)些動态的動畫。如果你近距離觀察 Studio Meta 網站，你會發(fā)現當你滾動閱讀文案的時候，每個大圖片都(dōu)在變化。

小動畫是你與網頁交互時發(fā)現的一些小動效，它們可能(néng)是以浮動層的形式出現，例如一些小裝飾或者有用的導航或者工具。小動畫是構成(chéng)頁面(miàn)整體美感的點睛之筆，但并不是設計的重點。 在Henry Brown網頁的簡單動畫中，如果你近距離觀察，你會發(fā)現插畫中的眼睛其實是閃爍的。

每個流行趨勢都(dōu)面(miàn)臨使用時機的問題，包括動畫效果的使用。動畫效果可以成(chéng)爲你工具箱裡(lǐ)神奇的魔法棒，但也并非适用于所有項目。動畫效果應當是流暢，無縫的，而非跳躍或機械的。它需要在不阻礙内容的同時滿足用戶的某項需求。

使用動畫效果的首要目的是增加可用性。簡潔的動畫效果是幫助用戶了解産品的絕佳工具，例如應去點擊哪個按鈕，或在網頁中如何進(jìn)行下一步。很多設計師在設計滾動或點擊時使用簡潔的動畫效果配合複雜的滾動效果（這(zhè)包括從簡單的圖标彈出到“向(xiàng)下滾動”的文字彈出的一切）。

可用性包含以下幾個方面(miàn)：

· 交流功能(néng)或如何使用網站

· 演示更新，如正确地填寫表格或對(duì)可點擊元素進(jìn)行高亮處理

· 爲行爲召喚吸引間接或直接用戶

使用動畫效果的第二個原因則有關審美。動畫效果是很贊的“裝飾”。有時動畫元素的目标單純爲打造視覺效果，這(zhè)點被(bèi)廣泛認可。這(zhè)種(zhǒng)裝飾性的動畫效果有助于情懷的傳遞或在用戶與界面(miàn)之間建立情感聯系。可以出于激發(fā)視覺效果，長(cháng)期拉近用戶距離等目的使用動畫效果。

在創建純視覺動畫效果的時候需要思考它究竟可以完成(chéng)什麼(me)需求。要考慮你希望用戶（和産品）産生什麼(me)樣(yàng)的關聯。它應該是妙趣橫生的還(hái)是驚豔無比的？它是否是以分享爲目的獨特内容？甚至純視覺（動畫效果）也應當具備一定得目标。

擴展閱讀

準備好(hǎo)開(kāi)始做動畫了嗎？下面(miàn)是一些可供深度閱讀的資料以及一些可幫助你快速開(kāi)始的工具。

Illusion of Life video介紹了12種(zhǒng)簡單實用的設計準則。

A List Apart 中的Web Animation at Work講述了有效設計動畫的要素。

Beginner’s Introduction to CSS Animation展示了怎樣(yàng)用CSS使邊緣平滑。

Elastic animated SVG elements輔助介紹了怎樣(yàng)使SVG中的組件生動的組合起(qǐ)來。

Mark Geyer的Art of UI Animations presentation用動畫來表示一些寓意。

如果你已經(jīng)完全掌握了相關的基礎知識，15 Top HTML5 Tools to Create Advanced Animation With將(jiāng)會是你進(jìn)行下一步的好(hǎo)夥伴，裡(lǐ)面(miàn)有很多實用的工具介紹。

The Animator’s Survival Kit介紹了适合于各種(zhǒng)動畫格式的基本規則。

總結：

談起(qǐ)動畫，大家的經(jīng)驗是：優質的動畫可以提升用戶體驗。它可以成(chéng)爲情感聯系的一種(zhǒng)形式，一種(zhǒng)有趣積極的體驗或者是讓一個網站更容易被(bèi)用戶使用或浏覽。

動畫是一項讓各種(zhǒng)應用程序變得更加優秀的有趣技術。如果你正在尋找靈感，一定要回顧這(zhè)篇文章，并且通過(guò)文章内的鏈接訪問網站，找到視覺案例同時感受與衆不同的動畫體驗。玩得高興！