AnimateMate

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

Granim

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

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

WAIT!

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

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

FLIP

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

https://github.com/GoogleChrome/flipjs

Starability.css

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

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

Animsition

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

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

iTyped

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

https://github.com/luisvinicius167/ityped

Mojs

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

http://mojs.io/

SmoothState.js

加載優(yōu)化。對(duì)于首頁(yè)的啟動(dòng)、回跳進(jìn)行加載動(dòng)畫(huà)優(yōu)化，這對(duì)移動(dòng)端 H5 營(yíng)銷(xiāo)來(lái)說(shuō)尤其重要▼

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

CountUp

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

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

Anime

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

http://animejs.com/

Ember Burger Menu

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

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

HTML5 Maker

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

http://html5maker.com/

HYPE3

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

http://tumult.com/hype/

Google Web Designer

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

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

Blysk

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

http://bly.sk/

Animatron

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

https://www.animatron.com/

Interaction Plus

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

Choreographer.js

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

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

Kute.js

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

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

來(lái)源：http://www.sohu.com/a/150155227_678107

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

最新評(píng)論