AAA教育

動(dòng)效設(shè)計(jì)是2018年的熱門趨勢(shì)之一。當(dāng)然，創(chuàng)造動(dòng)效并沒(méi)有必要從0開(kāi)始，有大把的設(shè)計(jì)項(xiàng)目可以供你快速上手，納入到設(shè)計(jì)項(xiàng)目當(dāng)中去。

如果你仔細(xì)找找的話，會(huì)發(fā)現(xiàn)許多有趣的用來(lái)構(gòu)建UI動(dòng)效的工具，而這些素材和工具正在成為越來(lái)越多設(shè)計(jì)項(xiàng)目中不可或缺的催化劑。必須承認(rèn)，這些代碼生成器和動(dòng)畫工具能設(shè)計(jì)師和前端事半功倍。

今天的文章，我們將會(huì)推薦10個(gè)靠譜的開(kāi)源免費(fèi)網(wǎng)頁(yè)動(dòng)效庫(kù)，幫你設(shè)計(jì)加速。

 

1. GSAP

GSAP 可能目前最炫酷的免費(fèi)動(dòng)畫庫(kù)之一了。它運(yùn)行于純粹的 JavaScript 之上，是目前最強(qiáng)健的動(dòng)畫資源庫(kù)之一。

它符合 HTML5 的規(guī)范，并且和幾乎所有的現(xiàn)代瀏覽器都能良好的協(xié)同，可以SVG、畫布元素甚至 jQuery 對(duì)象良好地協(xié)同，諸如 EaselJS 這樣的庫(kù)也可以和 GSAP 聯(lián)動(dòng)。

如果你需要一個(gè)強(qiáng)大的網(wǎng)頁(yè)動(dòng)畫庫(kù)的話，GSAP絕對(duì)值得一看。


 

2. Anime.js

當(dāng)我第一次看到Anime.js 這個(gè)庫(kù)的時(shí)候，徹底被它迷住了。這玩意非常強(qiáng)大，功能并不僅限于UI/UX動(dòng)畫的制作。

你可以借助 Anime.js 將動(dòng)畫加持在LOGO、按鈕、圖像等各種各樣的元素上。它支持各種常見(jiàn)的觸發(fā)機(jī)制，比如點(diǎn)擊、懸停、滑動(dòng)，你可以借助它定義一系列的動(dòng)畫。


 

3. Wicked CSS

Wicked CSS 是一個(gè)相對(duì)更新一些的動(dòng)效庫(kù)，它主要是基于CSS代碼的。Wicked CSS 借助 CSS3的特性，提供了一些堪稱不可思議的特效。

在它的首頁(yè)上，你會(huì)看到許多實(shí)時(shí)演示，你可以通過(guò)這些范例學(xué)會(huì)如何讓對(duì)象進(jìn)行旋轉(zhuǎn)、翻轉(zhuǎn)、劃入等不同類型的動(dòng)畫效果。

有些動(dòng)畫效果很簡(jiǎn)單，但是它同樣可以實(shí)現(xiàn)許多復(fù)雜而有趣的動(dòng)畫，這也是Wicked CSS 有意思的地方。


 

4. Animate CSS

也許 Animate.CSS 才是你想要的最終的網(wǎng)頁(yè)動(dòng)效解決方案。這個(gè)開(kāi)源代碼庫(kù)是幾年前發(fā)布的，但是時(shí)至今日它依然是最有用的動(dòng)效代碼庫(kù)。

開(kāi)發(fā)者 Daniel Eden 是這個(gè)項(xiàng)目的發(fā)起者，他以最簡(jiǎn)化的方式在網(wǎng)頁(yè)上發(fā)布自定義的 CSS3動(dòng)畫，通過(guò)半年多時(shí)間的積累，構(gòu)建出了一個(gè)完整的動(dòng)畫庫(kù)，并且?guī)缀蹩梢詰?yīng)對(duì)絕大多數(shù)的項(xiàng)目。

項(xiàng)目主頁(yè)上有大量的演示，GitHub上還有許多很棒的文檔供你參考。


 

5. Tuesday

Tuesday 所提供的動(dòng)畫最令人著迷的地方，是其中動(dòng)畫都非常的簡(jiǎn)單、有用。借助這個(gè)庫(kù)，你可以有效的控制頁(yè)面中元素的出現(xiàn)和消失的方式。

這些動(dòng)畫并不是那種炫酷屌炸天的，相反它們是非常微妙的，真正從美學(xué)和用戶體驗(yàn)的層面提升整個(gè)頁(yè)面的設(shè)計(jì)。

Tuesday 是純粹的CSS代碼，幾乎可以和任何網(wǎng)站無(wú)縫地銜接起來(lái)。


 

6. CSShake

坦率的講，我從來(lái)沒(méi)有見(jiàn)過(guò)比 CSShake 更加奇怪或者有趣的 CSS庫(kù)了。它所帶來(lái)的動(dòng)畫效果非常的瘋狂、獨(dú)特，它并不一定適合每個(gè)網(wǎng)站。

換句話來(lái)說(shuō)，就是 CSShake 所提供的動(dòng)效其實(shí)是獨(dú)一無(wú)二的，這也是為什么它會(huì)存在于這個(gè)列表當(dāng)中。


 

7. Mo.js

通過(guò)細(xì)節(jié)仔細(xì)對(duì)比了諸多的 JavaScript 庫(kù)之后，不得不說(shuō) Mo.js 是最好的動(dòng)效庫(kù)之一。Mo.JS 非常的龐大，而且它是完全為UI/UX設(shè)計(jì)而生的動(dòng)效庫(kù)。

關(guān)于 Mo.js 有大量的文檔和教程，它的代碼操作并不復(fù)雜，了解之后就可以輕松掌握。

它有著許多令人驚嘆的功能，無(wú)論是導(dǎo)航欄，還是LOGO或者其他復(fù)雜的元素，它都能夠?qū)⑺麄兒侠淼膭?dòng)畫化。

 

8. Animate Plus

Animate Plus 是一個(gè)輕量級(jí)的動(dòng)效庫(kù)，它只有2KB，但是它有著自定義 JavaScript 動(dòng)畫所需的全部基本功能。

使用npm你可以輕松地將 Animate Plus 安裝好，你只需要按照Github 上的代碼進(jìn)行設(shè)置即可。其中所包含的絕大多數(shù)都是基本的Demo，所以你不會(huì)碰到復(fù)雜的問(wèn)題，不過(guò)通過(guò)Github，你會(huì)找到所有你需要的選項(xiàng)和方法。

 

9. Bounce.js

只需要點(diǎn)擊幾下，你就可以借助Bounce.js創(chuàng)造出強(qiáng)大的CSS3 和 JS動(dòng)畫了。

在主頁(yè)上，你會(huì)找到一個(gè)模塊化的自定義動(dòng)畫生成器，通過(guò)這種方式，Bounce.js 會(huì)幫你將特定的功能添加到你的頁(yè)面上，無(wú)需添加額外的代碼。

和其他的同類工具不同的地方在于，它不僅僅是一個(gè)庫(kù)，而是有這用戶可以直接操作的實(shí)際功能，它帶有一個(gè)完整的網(wǎng)頁(yè)構(gòu)建器。Bounce.js 是為數(shù)不多的可以直接在瀏覽器中進(jìn)行設(shè)計(jì)和設(shè)置的動(dòng)畫庫(kù)之一。


 

10. Magic

Magic 可能是最有趣的動(dòng)效庫(kù)之一。它集合了許多基于CSS3的動(dòng)畫效果，并且?guī)в性S多在別的地方根本找不到的自定義樣式。這是一個(gè)非常大的CSS3代碼庫(kù)合集，你也會(huì)在這里學(xué)會(huì)許多巧妙的動(dòng)畫設(shè)計(jì)技巧。