AnimateMate

可能是最好的 Sketch 動畫插件。Sketch 目前被廣泛應(yīng)用于 HTML5 的原型界面設(shè)計(jì)，或者被應(yīng)用于數(shù)據(jù)可視化的，動畫部分則一般經(jīng)由軟件 Principle 等實(shí)現(xiàn)。不過現(xiàn)在，你可以選擇一款實(shí)用的 Sketch 插件直接在 Sketch 中輸出高品質(zhì)的 WEB 動畫。

Granim

一個騷氣的 js 庫。用于快速創(chuàng)建 WEB 內(nèi)的令人嘆為觀止的漸變動畫，網(wǎng)址是▼

https://sarcadass.github.io/granim.js/

WAIT!

動效速度測試平臺。當(dāng)我們在 WEB 中構(gòu)建了一些迷你的 PNG 或者 SVG 圖標(biāo)動畫時(shí)，如何快速確定動畫的延時(shí)、間隔、速度關(guān)系？反復(fù)調(diào)整和預(yù)覽著實(shí)令工程師頭疼。所以這個網(wǎng)站著力解決關(guān)鍵幀百分比的快速計(jì)算問題▼

http://waitanimate.wstone.io/#!/

FLIP

動畫絕對值計(jì)算器。通過對動畫的第一幀和最后一幀截取，測算有關(guān)寬、高、左邊距、頂邊距等運(yùn)動絕對參數(shù)▼

https://github.com/GoogleChrome/flipjs

Starability.css

評星系統(tǒng)交互模板。如果你的 HTML5 開發(fā)牽涉到評星功能，這個 CSS 組件庫就可以幫上忙了▼

http://blog.lunarlogic.io/starability/

Animsition

過渡動畫庫。目前預(yù)存了 58 種過渡動畫，各種 Fade 各種 Rotate 各種 Flip 各種 Zoom，可以讓過渡動畫像 AE 過渡插件一樣便捷載入▼

http://git.blivesta.com/animsition/

iTyped

打字動畫。不需要依賴 jQuery 的打字機(jī)效果動畫，可以調(diào)節(jié)速度和大小的小巧工具▼

https://github.com/luisvinicius167/ityped

Mojs

CSS 動效庫。這是一個正在不斷開發(fā)完善的 庫，雖然目前還未開放路徑、彈性等控件，但是它的 CSS 形狀庫已經(jīng)非常令人驚喜▼

http://mojs.io/

SmoothState.js

加載優(yōu)化。對于首頁的啟動、回跳進(jìn)行加載動畫優(yōu)化，這對移動端 H5 營銷來說尤其重要▼

https://github.com/miguel-perez/smoothState.js

CountUp

計(jì)數(shù)器模板。一個簡潔的計(jì)數(shù)器跳動 js 組件，可以用于在 WEB 完成諸如訪問量、分?jǐn)?shù)展示等和數(shù)字有關(guān)的計(jì)數(shù)動畫▼

http://inorganik.github.io/countUp.js/

Anime

CSS/JS 動畫分享庫。像一個在線小商城，有很多開發(fā)者自己上傳的千奇百怪的 CSS 或者 JS 動畫可以參考和引用▼

http://animejs.com/

Ember Burger Menu

漢堡式菜單樣式生成器。越來越多的站點(diǎn)在自適時(shí)采用漢堡式折疊菜單，而這個網(wǎng)站就可以快速更改這種菜單的具體屬性，并引用到你自己的項(xiàng)目中去▼

https://offirgolan.github.io/ember-burger-menu/

HTML5 Maker

HTML5 動畫制作器。這個網(wǎng)站的性質(zhì)和《》中提到的差不多，適合開發(fā)者快速生成一些原型作品▼

http://html5maker.com/

HYPE3

專業(yè)級本地 HTML5 設(shè)計(jì)軟件。很早以前就向大家推薦過，基于平行時(shí)間線邏輯的 HTML5 可視化設(shè)計(jì)開發(fā)平臺，你甚至可以用它做一個脫機(jī)的交互演示文稿▼

http://tumult.com/hype/

Google Web Designer

以視覺設(shè)計(jì)為核心的代碼可擴(kuò)展工具。用來做布局和設(shè)備終端適配測試比較方便，界面很有 AE 的風(fēng)格▼

https://www.google.com/webdesigner/

Blysk

HTML5 動畫制作器。界面很古板，有點(diǎn)像十年前的一些 FLASH 制作器，所以你甚至可以在上面考慮試試 FLASH 風(fēng)的火柴人漫畫，當(dāng)然用 HTML5 手法實(shí)現(xiàn)▼

http://bly.sk/

Animatron

HTML5 視頻編輯平臺。<video> 作為 HTML5 的重要特性，很多開發(fā)者卻仍然搞不清它的發(fā)布形式和加載策略，那么在 Animatron 上你可以快速編輯 HTML5 環(huán)境下的視頻，利用它的自帶動畫素材庫完成有趣的扁平風(fēng)格卡通動效組件或者視頻▼

https://www.animatron.com/

Interaction Plus

交互設(shè)計(jì) JS 插件。你可以在 envato 上搜索到這款付費(fèi)插件，提供了不少浮窗、按鈕等素材。

Choreographer.js

CSS 動效庫。試著在頁面打開后滾動鼠標(biāo)滾輪，你會發(fā)現(xiàn)有趣的事情正在發(fā)生，它就是一個收集了大量趣味 CSS 動效庫的網(wǎng)站▼

https://christinecha.github.io/choreographer-js/

Kute.js

JS 動效庫。內(nèi)容豐富，首頁的幾個演示就非常嘆為觀止，也是 HTML5 圈的良心分享網(wǎng)站▼

http://thednp.github.io/kute.js/

來源：http://www.sohu.com/a/150155227_678107

到此這篇關(guān)于20個專業(yè)HTML5動畫工具推薦(珍藏版)的文章就介紹到這了,更多相關(guān)HTML5動畫工具內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評論