動畫(huà)早就(jiù)不(bù)是(sh↑•'ì)早期人(rén)們印象中的(de)低(dī)齡向玩(wán)物(" ±✘wù)了(le)，從(cóng)早年(nián)的(de)盧卡斯影(yǐng ★∑®)業(yè)到(dào)今天的(de)工(gōnε→πg)業(yè)光(guāng)魔，動畫(huà)技>​£×(jì)術(shù)證明(míng)了(le)它可(kě)以實現(↔∑xiàn)無限的(de)可(kě)能(néng)性；從(cóng)70年(nián)代 ₩的(de)高(gāo)達、EVA到(dà•'≈o)之後的(de)宮崎駿、皮克斯，動畫(huà)的(de)深度和(←☆hé)內(nèi)涵也(yě)早已不(bù)弱于電(diàn)影(yǐng×₹≥)和(hé)文(wén)學作(zuò)品。而随‍→著(zhe)技(jì)術(shù)的(de)積累，網頁中的(de)動畫( αhuà)也(yě)已經是(shì)遍地(dì)™÷←☆開(kāi)花(huā)，它時(shí)尚，有(yǒu)趣，也(yě)人(rén)性化φ∏(huà)。不(bù)斷湧現(xiàn)的(de)新技(jì)術(shù)和(hé)新工(gōng∑÷♥)具令網頁動畫(huà)設計(jì)的(de)門(mén•δ)檻逐年(nián)降低(dī)，高(gāo)速網絡也(yě)使得(de)×α漂亮(liàng)的(de)動效和(hé)純萌的(de)GIF幾乎是(shì)無縫地(dì)加★ 載到(dào)網頁中。今天，我們可(kě)以斬釘截鐵(tiě)•λ地(dì)說(shuō)，動畫(huà)已經是(shì)最常見(jiàn)也(yě)是(sh$≤ì)最實用(yòng)的(de)網頁設計(jì)工(gōng<φ™φ)具之一(yī)了(le)。

将靜(jìng)止或者二維平面上(shàng)的(de)物(wù)體(tǐ)賦予生(÷✔♥↑shēng)機(jī)與活力，讓它們以符合或者貼近(jìn€£∞↔)物(wù)理(lǐ)定律的(de)方式來(lái)運動，這(zhè)就(jiù™ ₽α)是(shì)我們所熟知(zhī)的(de)動畫(huà)。Mac 桌面上(shà<↓πng)那(nà)個(gè)著名的(de)圖标​♠→跳(tiào)動動畫(huà)就(jiù)是(shì)最典型¥↑的(de)例子(zǐ)之一(yī)，那(nà)種模拟皮球在地(dì)上(shàng)αβ×彈跳(tiào)的(de)效果顯得(de)真實而有∑©$Ω(yǒu)質感，這(zhè)種動畫(huà)設計(jì)是(sh÷→Ωì)遵循著名的(de)動畫(huà)設計(jì)12原→§₩÷則的(de)。

天貓&京東(dōng),內(nèi)蒙£≠古電(diàn)商品牌策劃,內(nèi)蒙古微(wēi)信營銷,內(nèi)蒙古微(wēi)網站(zhàn),呼和(hé)浩特電(diàn)商'&☆品牌策劃,呼和(hé)浩特微(wēi)信營銷,呼和(hé)浩特微(wēi)網站(zhàn),內(♥₩nèi)蒙古網站(zhàn)制(zhì)作(zuò)，內(nèi)蒙古網站(zhànε¶)設計(jì)，內(nèi)蒙古網站(zhàn)建設，呼和(hé)浩特網站(zhàn)建設，呼和(hé)浩特網站(zhàn)制(zhì)作(δ☆↑zuò)、呼和(hé)浩特網站(zhàn)設∏↑ 計(jì)首選內(nèi)蒙古呼和(hé)浩特先誠網絡φ∏科(kē)技(jì)公司。先誠官網：/

對(duì)動效或者說(shuō)動畫(huà)最熟悉的(de)，無疑是(shì)✔₩迪士尼。Frank Thomas 的(de)《生(shēng)命的(de)錯(c₽±≤¥uò)覺：迪士尼動畫(huà)》中，就(jiù)詳細總結了(le)創造今天動畫(huà)的(&₩£ de)12個(gè)原則：

·擠壓和(hé)拉伸

·預期

·登台

·連續動作(zuò)和(hé)姿态對(duì)應

·緩進緩出

·弧形運動

·次要(yào)動作(zuò)

·時(shí)序

·誇張

·立體(tǐ)刻畫(huà)

·吸引力

文(wén)末相(xiàng)關鏈接中，會(huì)附上(shàng)關于這(z±₩Ω↓hè)12原則的(de)相(xiàng)關文(wén)獻。

網頁動畫(huà)的(de)實現(xiàn)方式很(hěn)多(duō)✘<，最常見(jiàn)的(de)是(shì)$₩‍ 使用(yòng)Gif圖，CSS，SVG，WebGL 以及視(shì)頻 φ<(pín)。但(dàn)是(shì)和(hé‍γ≠§)動漫不(bù)同，網頁中的(de)動畫(hu'↑à)可(kě)以是(shì)任何元素，小(xiǎo)到(dδΩ☆ào)下(xià)劃線，大(dà)到(dào)背景和(hé)整個(g¥★σ☆è)頁面，它可(kě)以随著(zhe)頁面加載而出現(x‍Ω‌•iàn)，也(yě)可(kě)能(néng)是(shì)鼠标移動到(dào)某個(gè)ε÷ 位置上(shàng)之後被觸發。和(hé)其他(tā)的(de)設計(jì)手法相(xiàng)似∑×®，動畫(huà)可(kě)以是(shì)非常微¥±(wēi)妙、觸動人(rén)心的(de₩β¥∑)，也(yě)可(kě)以是(shì)開(kāi)門(mén)見(jiàβ∑ n)山(shān)、清晰直觀的(de)。所以，最重要(yà©πo)的(de)是(shì)看(kàn)你(nǐ)✘•怎麽運用(yòng)動效，是(shì)在合适的(de)時(shí)候給人(rén)會(huì)心一✔‌(yī)擊，還(hái)是(shì)擺在顯眼的(d↑©e)位置，令人(rén)不(bù)會(huì)錯(cuò£Ω¶)過。

當我們談及網頁動效的(de)時(shí)候，它和(hé)動漫、÷×∞≈CG、電(diàn)影(yǐng)、遊戲中的(de)動畫(huà)，是(shì)截×↔ 然不(bù)同的(de)。當我們在網頁的(de)語境♣∑ε‌之下(xià)提及動畫(huà)和(hé)動效♦£的(de)時(shí)候，它作(zuò)為(w≤ èi)一(yī)個(gè)典型的(de)設計(jì)趨勢和(hé)設計(jì÷​✘£)手法，節制(zhì)是(shì)是(shì)最關鍵的(de)因素。小(xiǎo)ε↑巧簡單的(de)動效在網頁中會(huì)更具吸引力α×₹，也(yě)更加有(yǒu)趣，那(nà)些(xiē)真正“隐形”✔ '的(de)動效會(huì)讓用(yòng)戶難以察覺，卻更好(hǎo)地(dì)讓他(tā)們有↔≥(yǒu)更好(hǎo)的(de)體(tǐ)驗。但(dàn)是(shì ←)顯著而抓人(rén)眼球的(de)複雜(zá)​γ動效也(yě)很(hěn)重要(yào)，它們會(huì)強化(huà)設計(jì)感。不(bù♠ε)過在動畫(huà)和(hé)動效的(de)設計(jì∑‌≈)上(shàng)，一(yī)緻性很(hěn)重$£要(yào)，過于複雜(zá)的(de)規劃可(kě)能(nén↔Ω≥g)會(huì)讓整體(tǐ)效果混亂。♠±

讓動畫(huà)成為(wèi)設計(jì)趨勢，其實是>☆δ(shì)整個(gè)設計(jì)圈的(de)走向造成的(de)。扁平化(huà®★)和(hé)極簡風(fēng)的(de)流行(xíng)開(kāi)來(l×₹≠ái)，網頁設計(jì)确實簡約了(le)很(hěn)多(duō)， ♦$但(dàn)是(shì)用(yòng)戶需要(yào)更多(duō)的(de)信息來(lái)σ®¥告訴他(tā)們應該怎麽做(zuò)，而動畫(hu←∏à)就(jiù)是(shì)最好(hǎo)的(de)方案——無需影(yǐng)響整體¶&π(tǐ)美(měi)感就(jiù)可(kě)以給用(yòng)戶以足夠∑β€←的(de)引導。即使是(shì)最簡單的(de)設計(jì)，動畫(huà)的(de)存在₩ 都(dōu)能(néng)給予用(yòng)戶以說(shuō)明(mín★>©•g)和(hé)指引，這(zhè)樣前提下(xià)誕生<♠<(shēng)的(de)動效，在簡單和(hé)易用(yòng)性之間(jiān)達成了(l‍αδe)平衡。

動畫(huà)其實在後端和(hé)用(yòn¥‍₩g)戶端和(hé)有(yǒu)很(hěn)多(duō)不(bΩ≤♠ù)錯(cuò)的(de)影(yǐng)響。首先是(shì)大(dà)家(jiā)再也(yě₹×β•)不(bù)需要(yào)用(yòng)Flash來(lái)事(shì)₩​"先複雜(zá)的(de)動畫(huà)了(le)，它的(de)實現(x≈‍™iàn)方式也(yě)相(xiàng)當的↔≥‌<(de)自(zì)由和(hé)多(duō)樣，今天的(de)動畫(huà)ε↔>♠不(bù)會(huì)像曾經的(de)Flash​•∏等技(jì)術(shù)那(nà)樣拖慢(màn)網站≠↓≈(zhàn)的(de)呈現(xiàn)速度甚至影(yǐngΩβ‌≈)響服務器(qì)，加載速度飛(fēi)快(kuài)，體(tǐ)驗優異。

大(dà)和(hé)小(xiǎo)的(de)競争無處不(bù)在，即使是(φ&shì)動畫(huà)的(de)領域也(yě)同樣是(sΩ hì)如(rú)此。

規模較大(dà)的(de)動畫(huà)常常是(shì)以視(shì)頻(pí‍±↕>n)的(de)形式存在的(de)，它們通(tōn₽σ♦g)常會(huì)占滿整屏或者一(yī)個(gè)比較關鍵的(de)部位，循環、簡練是(sh•§π≠ì)它們的(de)特色。這(zhè)些(xiē)動畫(huà)為(wèi&↕∑)整個(gè)設計(jì)創造了(le)焦點，用(yòng)戶即使沒有(yǒu)執行¥¶(xíng)任何操作(zuò)，也(yě)能(néng)看(kàn)到(♠✔dào)它們。以Studio Meta的(de)網站(z♥←←hàn)為(wèi)例，當你(nǐ)閱讀(dú)文(wén)案的(de σ)時(shí)候，沒一(yī)張大(dà)圖都(dōu) ‌≠會(huì)逐步縮放(fàng)。

小(xiǎo)動效會(huì)出現(xiàn)在網站(zhàn)的(de)各個(g♠α λè)角落，當你(nǐ)同網站(zhàn)進行(xíng)交互的(de)時(shí) ‌"候，會(huì)發現(xiàn)它們的(de)©≤存在。這(zhè)些(xiē)動效可(kě)能(néng)會(huìα≥≥∏)在光(guāng)标懸停的(de)時(shí)候觸發，可(kě)能(néng)是(shì)∑↑一(yī)個(gè)指引性的(de)标識，也(yě)可(kě)能(néng)γ 以更加微(wēi)妙的(de)方式呈現(xiàn)。這(zhè)些(​​∏xiē)微(wēi)小(xiǎo)的(de)動效會(huì)對(duì)整體→≤γ(tǐ)的(de)美(měi)感産生(shē<λ‌ng)影(yǐng)響，在 Henry Brown 的(de)這(zh&§$è)個(gè)案例中，動畫(huà)就(jiù)非常的(de)小(xiǎo)而微(wē≠ε♠i)妙，仔細觀察，你(nǐ)會(huì)發現(xiàn)人(rén)物(wù)的(de)眼睛在₹£"∏閃爍。

當我們談及每一(yī)種設計(jì)趨勢的(de)時(shí)候，都(dōu)需要(yào)探討(βσtǎo)一(yī)個(gè)重要(yào)的(de)問(wèn)題：什(shén)麽時←≠<✔(shí)候才能(néng)使用(yòng)它們。動畫(huà)×♥∞©可(kě)能(néng)是(shì)一(yī)種非常討(tǎo)巧的(de)設計(jì)手段，它有 ←(yǒu)用(yòng)，但(dàn)是(sh₽✔♦ì)并非适用(yòng)于每一(yī)個(gè)設計(jì)項目。動畫↔ε(huà)應該是(shì)平滑無縫的(de)ק，而非滞塞機(jī)械的(de)，它的(de)服務對(duì)象是(shφ'≠ì)用(yòng)戶，并且和(hé)其他(tā)內(nèi)容的(de)呈現(xià₩↔‍n)形式不(bù)一(yī)樣。

使用(yòng)動畫(huà)和(hé)動效的(d€♥£e)首要(yào)目的(de)是(shì)提高(gāo)網頁的(de)可(kě)用(€σ♦yòng)性。簡單的(de)動效可(kě)以有(yǒu)效的(dεφφe)引導用(yòng)戶，幫助他(tā)們了(le)解點♠α♠擊之後會(huì)去(qù)怎麽樣，即使是(shì)需要(yào)使用(yònσ✘₩βg)複雜(zá)的(de)視(shì)差$α 滾動動效，設計(jì)師(shī)也(yě)會(huì)搭配一(y≤↕ī)些(xiē)簡單的(de)動畫(huà)來(lái)作(zuò)€‌為(wèi)引導和(hé)輔助之用(yò☆→¶™ng)。

可(kě)用(yòng)性的(de)呈現(x↑×iàn)形式：

·解釋功能(néng)，展示網站(zhàn)的(de)運作(zuò)

·呈現(xiàn)變化(huà)，比如(rú)展示可(kě) ↕點擊的(de)元素，或者表單那(nà)的(de)正确填寫方式

·創建流程，或者引導用(yòng)戶執行(xíng)動作(zuò)召喚類的βΩ<(de)操作(zuò)

使用(yòng)動效的(de)第二個(gè)理(lǐ)由是(shì)出自(zì)美(m₽ §₹ěi)學需求。動畫(huà)和(hé)動效無疑↑↔是(shì)擁有(yǒu)強裝飾性的(de)元素，如¥↔δ₩(rú)果某個(gè)動效是(shì)出于視(shì)覺裝飾的(de)作(zu✘Ω↕γò)用(yòng)而進行(xíng)設計(jì)的(de)話(huà ≠λγ)，無疑是(shì)可(kě)以接受的(de)。這(zhè)種裝飾性的(de)動畫($Ω✘huà)不(bù)僅有(yǒu)助于講述故事(shì)，而且可(kě)¶∏φ以建立用(yòng)戶界面之間(jiān)的€π(de)情感聯系，它可(kě)以通(tōng)過視(shì)覺上(shàng)的(de)™∞變化(huà)引發用(yòng)戶的(de)興趣，在不(bù)斷的(de)交互中讓用(yò↔•ng)戶停留更長(cháng)的(de)♥¶±>時(shí)間(jiān)，不(bù)斷回來(lái)。

如(rú)果你(nǐ)要(yào)創建純粹的(de)動畫(huà)，那(nà↔←₹×)麽你(nǐ)楈枒仔細思考它能(néng)做(zuò)什(shén)麽，會(huì)帶來(lái)£σφ什(shén)麽。你(nǐ)希望用(yòng)戶有(yǒuππ↕)什(shén)麽樣的(de)反饋？想分(fēn)享一(yī)些(xiē)獨✘☆ 特的(de)內(nèi)容，還(hái)是(shì)用(yòng)動效給用(yò→ε'∏ng)戶帶來(lái)愉悅的(de)體(tǐ)驗？這(zhè)很(hěn)重要✔γ"(yào)。

一(yī)些(xiē)資源

準備為(wèi)網站(zhàn)加入動畫(huà)和(hé)動效麽？接下(xià)來(lái)的(₽↔♣¥de)一(yī)些(xiē)文(wén)章(zhāng)或者網站(zhàn)可(kě)能εβ<β(néng)會(huì)給你(nǐ)一(yī  ¥)些(xiē)幫助。(這(zhè)些(xiē)文(wén)章(zhāng)都®​☆(dōu)是(shì)英文(wén)的(de)，恩)

·《生(shēng)命的(de)錯(cuò‌✔¥♦)覺》會(huì)告訴你(nǐ)一(yī)些(xiē)關于動畫(huε♥à)的(de)12個(gè)基本原則

·《網頁動畫(huà)的(de)運作(zuò)》是(shì)一(yī)個(gè)列表，其‍♣∏≥中的(de)資源會(huì)告訴你(nǐ)網頁☆♥動畫(huà)是(shì)如(rú)何運作(zuò)的(de)

·《CSS動效新手指南(nán)》是(sh ×™≥ì)告訴你(nǐ)如(rú)何運用(yòng) ₽"CSS屬性來(lái)制(zhì)作(zuò)動畫(huà)的(de)

·《彈性SVG元素》是(shì)教你(nǐ)如(rú)何使用(↓≠÷♠yòng)SVG組件(jiàn)的(de)教程

·《UI動畫(huà)的(de)藝術(shù)》是(shì)Mark Geyeδ§r 的(de)文(wén)章(zhāng)

·《創建優秀動畫(huà)的(de)15個(gè)H₩<&♦TML5工(gōng)具》，如(rú)果你(nǐ)掌握了(le)基礎知(zhī)識，這(zhè)$×個(gè)工(gōng)具列表會(huì)非常有(yǒu)用(yòng)

·《動畫(huà)師(shī)的(de)急救包》這(zhè)篇文(wén)章(zhāng)也(yě)是(shì)介紹各種形式動畫(huà)的(♣♠​γde)基本原理(lǐ)的(de)

結語

評判動畫(huà)和(hé)動效其實并不(bù)難，隻要(yào®♠"↓)看(kàn)它是(shì)否為(wèi)用(yòng)戶帶€¥‌來(lái)更好(hǎo)的(de)體(tǐ)驗，就(jiù)知(zhī)道(dào)了( §™le)：它能(néng)否産生(shēng) ÷"情感聯系，能(néng)不(bù)能(néng)讓人"¥σ∞(rén)會(huì)心一(yī)笑(xiàα♦o)，能(néng)不(bù)能(nénπλ'g)讓網站(zhàn)更好(hǎo)使用(yòng)。

動畫(huà)是(shì)一(yī)種有(y¥←£♦ǒu)趣的(de)技(jì)術(shù)，它×&↕的(de)運用(yòng)範疇會(huì)越來(lái)越廣，如(rú)果你(nǐΩγ≤>)對(duì)它有(yǒu)興趣，就(jiù)持續研究下(xià)去(qù)，它♥"就(jiù)是(shì)未來(lái)。

原文(wén)地(dì)址：designshack

原文(wén)作(zuò)者： CARRIE$→ COUSINS 

優設譯文(wén)：http://www.uisdc.com/intr±'Ω&oduction-to-webdesign-animation

注：本文(wén)均來(lái)自(zì)百度搜索，如(rú)涉及版權問(wèn)題，請(q↕ σ∏ǐng)聯系我們，我們會(huì)第一(yī)時(shí)間(jiān)解決。