動畫在Web上的運用到目前為止已不是新課題,。大家常常能看到的Web動畫有CSS動畫、JavaScript動畫,、SVG動畫和HTML5的Canvas動畫,。最近開始也有不少同學(xué)開始在探討WebGL動畫。

隨著年關(guān)將近,，今天決定將Web上使用到的一些動畫做一個資源整合(主要是為后期的工作做一些儲備,，因為未來的一段時間的工作主要會和動畫交互關(guān)聯(lián)在一起)。在這個集合中主要涵蓋了動畫的庫,、框架,、教程和性能等。

Web動畫資源圖形化

早前看到@awwwards-team整理了一份Web Animation Infographics,，今天直接先拿來一用,。讓大家對Web Animation有一個直觀的了解。

Web Animation地圖

Web Animation工具

Web Animation性能與技巧

CSS Animation

至于CSS Animation如何在Web中使用,，這里不做闡述,，這篇文章只是給大家提供現(xiàn)在使用率較高的幾個CSS Animation Libraries。

Animate.CSS

官網(wǎng)GitHub

Animate.CSS整理了幾十種動畫特效,，而這些動畫特效都是使用CSS的animation,。可以直接使用到具體的項目中,，也可以在基于其基礎(chǔ)上做進一步的改良,，從而達到你自己需要的動畫效果。

animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.

在其基礎(chǔ)上擴展出來了AniCollection,、Magic CSS3 Animation,、CSS3 Animation Cheat Sheet、Motion UI等,。

Effeckt.css

官網(wǎng)GitHub

Effeckt.css提供了Web頁面中各種交互的動畫效果,，比如彈出框、按鈕,、列表,、提示信息等,。

A Performant Transitions and Animations Library

Hover.css

官網(wǎng)GitHub

Hover.css收集了很多應(yīng)用在鏈接、按鈕,、Logo和圖片等上面的懸浮效果,。這些效果都是使用CSS3的transition或animation完成?？梢院芎唵蔚膽?yīng)用到你的元素中,，而且它還提供了Sass和LESS版本，可以根據(jù)自己的需求調(diào)整變量值,。

JavaScript Animation

很多時候CSS Animation并不能滿足項目的實際需求,，或者說希望通過JavaScript和CSS Animation配合得更完美。因此也誕生了很多款非常優(yōu)秀的,、輕量級的,、簡易的JavaScript Animation 庫和框架。

AniJS

官網(wǎng)GitHub

AniJS是一個處理CSS Animation的聲明式庫,，使開發(fā)者使用更快和更有說服力,。

Velocity.js

官網(wǎng)GitHub

Velocity是一個動畫引擎，它可能是最好用的動畫庫了,。Velocity 提供了類似于jQuery中$.animated()的API,，但其不要基于jQuery。它的最大特性就是速度快,，而且還支持SVG,、滾動、transform,、loops和easings等,。更值得稱贊的是，其兼容性特別強,，兼容到IE8和Android 2.3,。

GSAP

官網(wǎng)GitHub

GSAP是另一個有用的動畫庫，其主要關(guān)注的是性能和兼容性,。其非常靈活而且輕量,，另一大好處是不依賴任何第三方庫，比如jQuery,。

Animo.js

官網(wǎng)GitHub

Animo.js是一個強大的而又小的工具,，主要用來管理CSS Animation?？梢灾付ɑ厝フ{(diào)函數(shù)完成動畫,。

Bounce.js

官網(wǎng)GitHub

Bounce.js是一款在線制作動畫的小工具和JS庫，允許你通過@keyframe創(chuàng)建CSS3 Animation,。在線可以很容易生成靜態(tài)的@keyframe,，而且不需要任何額外的JavaScript,。

Move.js

官網(wǎng)GitHub

Move.js是一個支持CSS3 Animation的JavaScript庫。

Transit

官網(wǎng)GitHub

這是一個有關(guān)于CSS Transform和Transition的jQuery插件,。

Morf.js

官網(wǎng)GitHub

上面只是羅列了一些較有意思的CSS Animation和JavaScript Animation的庫或框架,，其實還有很多類似的：

• favico.js
• CSShake
• scrollReveal.js
• Wow.js
• parallax.js
• Tween JS
• Motio

其實在Web Animation不再僅僅局限于CSS和JavaScript的Animation?，F(xiàn)在還有SVG,、HTML5 Canvas和WebGL等，而且它們對應(yīng)也有一些優(yōu)秀的庫,。在這里就不再羅列出來,，大家感興趣可以從第一張圖上找到對應(yīng)的名稱。比如SVG中的Snap.js,、SVG.js,；WebGL中的Three.js和Canvas中的Fabric.js等。

Web Animation教程

有關(guān)于Web Animation的教程,，我們以后將會在這兩個地方匯總：

• Web Animation中文教程
• Web Animation英文教程

如果大家對Web Animation感興趣,，歡迎參與一起分享與學(xué)習(xí)。在GitHub我們創(chuàng)建了一個庫,，這里將會收集一些優(yōu)秀的外文教程,如果您發(fā)現(xiàn)有什么好的教程,，歡迎給我們提Issues，當(dāng)然如果您愿意參與翻譯,，那就更好了,。

今天特別推薦幾篇有關(guān)于Web Animation的教程:

• Web Animation API
• GSAP中文教程
• TimelineMax系列教程
• 網(wǎng)頁動畫的十二原則
• Myth Busting: CSS Animation vs. JavaScript
• CSS Animations and Transitions Performance: Looking inside the Browser
• Why Moving Elements with Translate() is better than Pos:abs Top/Left
• High Performance Animations.
• Leaner, Meaner, Faster Animations with requestAnimationFrame.

Web Animation DEMO

一切真理都出自于實戰(zhàn)，同樣的,，在未來有關(guān)于Web Animation的DEMO分享,，我們都將在Codepen上完成。在這里我們除了會放自己做的DEMO之外,，還會收集各式各樣的DEMO,。如果你感興趣，歡迎關(guān)注它,。

總結(jié)

其實是一篇專門對Web Animation的資源收集的文章,，如果你對Web Animation不感興趣，可能對你來說沒有任何意義,。如果你也對這些炫酷的Animation所吸引,，那么這篇文章將會變成你的百寶箱。別的不多說了,，感興趣的歡迎收藏,，如果您有這方面的經(jīng)驗或資料，歡迎與我們一起共享,。

大漠

常用昵稱“大漠”,，W3CPlus創(chuàng)始人,，目前就職于手淘。中國Drupal社區(qū)核心成員之一,。對HTML5,、CSS3和Sass等前端腳本語言有非常深入的認(rèn)識和豐富的實踐經(jīng)驗，尤其專注對CSS3的研究,，是國內(nèi)最早研究和使用CSS3技術(shù)的一批人,。CSS3、Sass和Drupal中國布道者,。2014年出版《圖解CSS3：核心技術(shù)與案例實戰(zhàn)》,。

如需轉(zhuǎn)載，煩請注明出處：http://www./animation/web-animation-resources.html