網頁設計中的動畫簡介

動畫不再僅僅是漫畫。從全屏移動圖像到小型懸停效果，動畫的觸感隨處可見。動畫是時尚，有趣和用戶友好的。
而使用動畫的障礙已經開始下降。隨著大多數用戶進行高速連接以及創(chuàng)建簡單動作或傻瓜gif到幾分鐘動作等任何操作，動畫已成為實用且有用的網頁設計工具。
動畫基礎
當以靜止或二維形式創(chuàng)建的東西被“帶入生活”并且似乎以遵循物理定律的方式移動時，動畫就會發(fā)生。這是一個漫畫人物在屏幕上漫步的方式，或者是一個應用程序圖標在加載到Mac桌面時如何像球彈跳一樣。
其中一個幾乎與動畫同義的詞是迪斯尼。在二十世紀八十年代早期，兩家公司的高級動畫師寫了一本詳細描述動畫原理的書。弗蘭克托馬斯和奧利約翰斯頓的“ 幻覺生活：迪士尼動畫 ”仍然為今天的動畫提供了框架。
擠壓和伸展
預期
分期
直行動和姿勢構成
遵循并重疊操作
慢進和慢進
弧
次要行動
定時
夸張
純色繪圖
上訴

網頁動畫通常保存為GIF，CSS，SVG，WebGL或視頻。它們可以是任何內容，包括將鼠標懸停在單詞上時出現的簡單下劃線到全屏視頻或背景圖像。與其他任何設計技術一樣，動畫可能很微妙，或者它們可能在你的臉上，很難避免。

2017年新興趨勢
網頁設計中的動畫是我們每天都會看到更多的東西。動畫作為設計趨勢的關鍵是適度。小而簡單的動畫引人入勝且有趣; 用戶可能甚至不會考慮他們是否是動畫。大型動畫可能是一種有趣的視覺效果，可將您引入設計中。但是如果你開始混合太多不同的移動效果，它可能會導致完全混亂。
什么讓動畫時髦是現實主義。在今天的設計風格中，有這么多平面和最小風格的設計，用戶需要更多線索來告訴他們該做什么。動畫的簡單部分可以引導用戶而不改變審美。它有助于添加指令和命令，設計可能過于簡單的方案，以便為用戶提供足夠的方向。在這個例子中，動畫創(chuàng)建了簡潔和易用性之間的愉快媒介。

這一趨勢的另一個促成因素是在設計的后端和用戶端使用工具。您不再需要Flash來制作更復雜的動畫。（如果你還在Flash中建設，現在該停下來了。）它可以通過許多其他方式來完成。今天的動畫不會讓網站或網絡服務器停滯不前，使用戶能夠快速加載效果，并且高速互聯網訪問動畫不會在活動周期的中途停頓。

大型與小型動畫
當談到網頁的動畫時，它可以分為兩大類：大和小。（你大概可以猜到它們的外觀。）
大型動畫是對他們有一定規(guī)模的動畫。通常以運行時間的視頻的形式，大型動畫填充屏幕的重要部分并且是短片的特征。這些動畫是整體設計的焦點。用戶通常不必執(zhí)行任何操作即可看到運動中的動畫。如果您仔細觀看Studio Meta網站，每個大圖像在閱讀副本時都會放大。
小動畫是您在開始與網站互動時發(fā)現的小小片段。這些divots可能是懸停狀態(tài)，微小的裝飾或可用性指南或工具。小動畫是有助于整體美學的重音，但不太可能成為設計的重點。在亨利布朗的網站中，簡單的動畫是如果仔細觀察，圖中的眼睛實際上就會閃爍。
何時使用動畫
每個趨勢的問題，包括這一個，都知道何時使用它。動畫對于您的設計工具包來說可能是一個很好的小竅門，但并不適用于每個項目。動畫應該平滑無縫，而不是跳動或機械。它需要為用戶服務，而不是妨礙內容的發(fā)展。
使用動畫的主要原因是增加可用性。簡單的動畫可以成為很好的指導工具，以幫助人們了解在網站地圖上點擊哪些按鈕或下一步去哪里。許多使用復雜滾動效果的設計師將簡單的動畫與用戶工具配對，以便進行滾動或點擊。（這包括一個簡單的彈跳圖標或彈出說“向下滾動”的單詞的所有內容。）
可用性有幾種形式：
通訊功能或如何使用網站
顯示更改，例如正確填寫表單或突出顯示元素可點擊
創(chuàng)建流程或將用戶引導至號召性用語
使用動畫的第二個原因是美學。動畫可以是一個很好的“裝飾”。有時動畫元素的目標是純粹的視覺效果，這是一個可以接受的用途。這種裝飾動畫可以幫助講述故事或在界面和用戶之間建立情感聯系。動畫的目的可以是引發(fā)視覺興趣，并讓用戶長時間與您的網站互動。
創(chuàng)建純視覺動畫時，應考慮它應該做什么。想想你想讓用戶擁有的連接。它應該是有趣還是令人驚訝？是否有一些獨特的內容是專為共享而設計的？即使是純粹的視覺也應該有一個目標。
資源

準備開始動畫？以下是一些用于進一步閱讀的資源和幫助您開始使用的工具。

在生活視頻幻覺顯示的方式，很容易理解各的12個原則。
” 工作中的網絡動畫 ”從列表除了是什么使動畫的創(chuàng)作有很大的資源。
“ 初學者對CSS動畫的介紹 ”向您展示了如何使用CSS屬性將正方形變成圓形。
彈性動畫SVG元素是關于如何整合和動畫SVG組件的教程。
該UI動畫演示的藝術由馬克·蓋爾使用動畫來解釋概念。
如果您已經理解了基本知識，“ 15個創(chuàng)建高級動畫的頂級HTML5工具 ”是一個很好的下一步和工具列表。
動畫師的生存工具包教導適用于所有形式的動畫的基本原則。

結論

在動畫方面，經驗法則是：良好的動畫會讓用戶的體驗更好。這可以通過情感聯系的形式 - 例如有趣的積極體驗 - 或者通過使網站更易于使用。

動畫是一種有趣的技術，對于各種應用程序來說，它變得更加標準。如果您正在尋找靈感，請務必回過頭來閱讀本文，然后點擊整個視覺示例的鏈接，訪問網站并使用其中的動畫功能進行播放。玩的開心！

本文來自創(chuàng)新互聯品牌網站建設網站設計制作公司-創(chuàng)新互聯
標簽：公司網站制作，成都建設網站，官網建設，網頁制作公司，建網站公司，企業(yè)建站，重慶網站建設公司，成都網頁設計公司，成都網站設計公司，企業(yè)網站建設

當前名稱：網頁設計中的動畫簡介
網頁URL：http://www.muchs.cn/news42/164242.html

成都網站建設公司_創(chuàng)新互聯，為您提供微信小程序、App開發(fā)、網站改版、企業(yè)網站制作、微信公眾號、網站設計

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯