推薦三兩款前端動畫庫，anitmate.css, velocity-animate， anime,

xzavier 發(fā)布于2019-08-20 16:10 / 1810人閱讀

摘要：所以就說說吧優(yōu)點可自定義動畫效果，支持隊列動效支持回調(diào)函數(shù)支持動畫的，等等功能缺點缺少自定義特效文檔比較少使用遇到的小問題默認(rèn)不是勻速的，需要設(shè)置詳細(xì)整理待續(xù)

在最近一段時間的工作里，常常用到動畫，我主要接觸了三個

animate.css
anime
velocity

下面分析一下他們的優(yōu)缺點

animate.css

優(yōu)點：
animate.css主要是使用css實現(xiàn)動畫效果，目前已經(jīng)有幾十種預(yù)定義的動畫，使用起來非常簡便，基本上都能找到我們想要的動畫效果，通過給dom結(jié)構(gòu)添加相應(yīng)的類.animated .動效類這個dom就擁有了動效。是不是非常的簡單。
API（假裝是正確的翻譯）

fade: {
        title: "淡入淡出",
        fadeIn: "淡入",
        fadeInDown: "向下淡入",
        fadeInDownBig: "向下快速淡入",
        fadeInLeft: "向右淡入",
        fadeInLeftBig: "向右快速淡入",
        fadeInRight: "向左淡入",
        fadeInRightBig: "向左快速淡入",
        fadeInUp: "向上淡入",
        fadeInUpBig: "向上快速淡入",
        fadeOut: "淡出",
        fadeOutDown: "向下淡出",
        fadeOutDownBig: "向下快速淡出",
        fadeOutLeft: "向左淡出",
        fadeOutLeftBig: "向左快速淡出",
        adeOutRight: "向右淡出",
        fadeOutRightBig: "向右快速淡出",
        fadeOutUp: "向上淡出",
        fadeOutUpBig: "向上快速淡出"
      },
      bounce: {
        title: "彈跳類",
        bounceIn: "彈跳進入",
        bounceInDown: "向下彈跳進入",
        bounceInLeft: "向右彈跳進入",
        bounceInRight: "向左彈跳進入",
        bounceInUp: "向上彈跳進入",
        bounceOut: "彈跳退出",
        bounceOutDown: "向下彈跳退出",
        bounceOutLeft: "向左彈跳退出",
        bounceOutRight: "向右彈跳退出",
        bounceOutUp: "向上彈跳退出"
      },
      zoom: {
        title: "縮放類",
        zoomIn: "放大進入",
        zoomInDown: "向下放大進入",
        zoomInLeft: "向右放大進入",
        zoomInRight: "向左放大進入",
        zoomInUp: "向上放大進入",
        zoomOut: "縮小退出",
        zoomOutDown: "向下縮小退出",
        zoomOutLeft: "向左縮小退出",
        zoomOutRight: "向右縮小退出",
        zoomOutUp: "向上縮小退出"
      },
      rotate: {
        title: "旋轉(zhuǎn)類",
        rotateIn: "順時針旋轉(zhuǎn)進入",
        rotateInDownLeft: "從左往下旋入",
        rotateInDownRight: "從右往下旋入",
        rotateInUpLeft: "從左往上旋入",
        rotateInUpRight: "從右往上旋入",
        rotateOut: "順時針旋轉(zhuǎn)退出",
        rotateOutDownLeft: "向左下旋出",
        rotateOutDownRight: "向右下旋出",
        rotateOutUpLeft: "向左上旋出",
        rotateOutUpRight: "向右上旋出"
      },
      flip: {
        title: "翻轉(zhuǎn)類",
        flipInX: "水平翻轉(zhuǎn)進入",
        flipInY: "垂直翻轉(zhuǎn)進入",
        flipOutX: "水平翻轉(zhuǎn)退出",
        flipOutY: "垂直翻轉(zhuǎn)退出"
      },
      strong: {
        title: "強調(diào)類",
        bounce: "彈跳",
        flash: "閃爍",
        pulse: "脈沖",
        rubberBand: "橡皮筋",
        shake: "左右弱晃動",
        swing: "上下擺動",
        tada: "縮放擺動",
        wobble: "左右強晃動",
        jello: "拉伸抖動"
      }

使用栗子

$("#yourElement").addClass("animated bounceOutLeft");

缺點：

1、animated.css 官方提供了幾十種動效，但是總會遇到一些動效可能需要修改，或者有些動效他名沒有提供。這個時候，animate.css就顯得有點吃力了，因為目前沒提供自定義的動畫api。

2、假如我們dom結(jié)構(gòu)已經(jīng)有 tranform或者其他相關(guān)的css設(shè)置，這個時候通過添加animted的動畫類，那么我們原來的css效果會被覆蓋。解決方案只能是在dom的外圍再用一個div.wrap包含著然后把動畫效果加載.wrap中來避免覆蓋原有效果,相關(guān)討論issue

velocity

優(yōu)點：

1、Velocity 是一個簡單易用、高性能、功能豐富的輕量級JS動畫庫。它能和 jQuery 完美協(xié)作，并和$.animate()有相同的 API，但它不依賴 jQuery，可多帶帶使用。 Velocity 不僅包含了 $.animate() 的全部功能，還擁有：顏色動畫、轉(zhuǎn)換動畫(transforms)、循環(huán)、緩動、SVG 動畫、和滾動動畫等特色功能。
支持原生js，jq，react寫法，作為vue粉，失望的是，他暫時沒有vue相關(guān)的插件
2.也有幾十種類似animate.css的預(yù)定義動畫api
3.支持自定義動效，拼裝隊列動效等等
4.動畫回調(diào) 比如 Begin & Complete & Progress 回調(diào)函數(shù)
中文文檔請點擊
缺點：
1.其實我覺得對我而言，滿足我各種需求，沒啥缺點，要一定得揪點的話，我能說api demo 不夠多，需要自己多嘗試各種組裝。
2.目前很多童鞋比較少去用jquery的情況下，Velocity就喪失了很多有點，比如他自定義的動畫就是結(jié)合Velocity-ui + jq的

anime

anime.js(/??n.?.me?/)是一個輕量、靈活的JavaScript 動畫庫.他可以配合css，svg，Dom節(jié)點和js對象工作。
其實用了velocity的人大可不必再去用anime 因為anime擁有的,并且velocity兼容性要比anime好
但是恰巧我用了。。。所以就說說吧
優(yōu)點：
1.可自定義動畫效果，支持隊列動效
2.支持begin, run, update, complete回調(diào)函數(shù)
3.支持動畫的play()，pause(),restart()等等功能
缺點：
1.缺少自定義特效
2.文檔demo比較少

使用遇到的小問題：
1.默認(rèn)不是勻速的，需要設(shè)置 easing: "liner"

（詳細(xì)整理待續(xù)）

云服務(wù)器 GPU云服務(wù)器 java 動畫庫推薦一款代理服務(wù)器前端推薦 animated

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/82769.html

發(fā)表評論

登陸后可評論

0條評論

xzavier

男|高級講師

我要關(guān)注我要私信

TA的文章

騰訊云李叢：基礎(chǔ)架構(gòu)演進應(yīng)當(dāng)為整個社會運作效率的提升作出貢獻_云資訊

閱讀 2928·2021-10-14 09:42
hostyun，中國香港大帶寬便宜VPS，三網(wǎng)直連(含cn2)，低至18元/月，可付費自主切換IP

閱讀 3694·2021-08-11 11:19
前端學(xué)習(xí)資源

閱讀 3542·2019-08-30 13:57
Vue代碼模塊定位插件vue-component-finder介紹

閱讀 3120·2019-08-30 13:49
cad快速看圖軟件中怎么快速繪制一個圓？

閱讀 1534·2019-08-29 18:38
2017美團點評面試實習(xí)經(jīng)歷

閱讀 898·2019-08-29 13:16
前端監(jiān)控實踐——FMP的智能獲取算法

閱讀 1850·2019-08-26 13:25
Zepto 源碼分析 4 - 核心模塊入口

閱讀 3230·2019-08-26 13:24

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

推薦三兩款前端動畫庫，anitmate.css, velocity-animate， anime,

相關(guān)文章

可能是最全的前端動效庫匯總

[譯]2018年值得關(guān)注的10大JavaScript動畫庫

前端常用插件、工具類庫匯總

JS動畫之緩動函數(shù)分析及動畫庫

JS動畫之緩動函數(shù)分析及動畫庫

發(fā)表評論

0條評論

xzavier

男|高級講師

TA的文章

騰訊云李叢：基礎(chǔ)架構(gòu)演進應(yīng)當(dāng)為整個社會運作效率的提升作出貢獻_云資訊

hostyun，中國香港大帶寬便宜VPS，三網(wǎng)直連(含cn2)，低至18元/月，可付費自主切換IP

前端學(xué)習(xí)資源

Vue代碼模塊定位插件vue-component-finder介紹

cad快速看圖軟件中怎么快速繪制一個圓？

2017美團點評面試實習(xí)經(jīng)歷

前端監(jiān)控實踐——FMP的智能獲取算法

Zepto 源碼分析 4 - 核心模塊入口

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

推薦三兩款前端動畫庫，anitmate.css, velocity-animate， anime,

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

推薦三兩款前端動畫庫，anitmate.css, velocity-animate， anime,