資訊專欄INFORMATION COLUMN
摘要：所以就說說吧優(yōu)點(diǎn)可自定義動(dòng)畫效果，支持隊(duì)列動(dòng)效支持回調(diào)函數(shù)支持動(dòng)畫的，等等功能缺點(diǎn)缺少自定義特效文檔比較少使用遇到的小問題默認(rèn)不是勻速的，需要設(shè)置詳細(xì)整理待續(xù)
在最近一段時(shí)間的工作里，常常用到動(dòng)畫，我主要接觸了三個(gè)
animate.css
anime
velocity
下面分析一下他們的優(yōu)缺點(diǎn)
animate.css優(yōu)點(diǎn)：
animate.css主要是使用css實(shí)現(xiàn)動(dòng)畫效果，目前已經(jīng)有幾十種預(yù)定義的動(dòng)畫，使用起來非常簡(jiǎn)便，基本上都能找到我們想要的動(dòng)畫效果，通過給dom結(jié)構(gòu)添加相應(yīng)的類.animated .動(dòng)效類這個(gè)dom就擁有了動(dòng)效。是不是非常的簡(jiǎn)單。
API（假裝是正確的翻譯）
fade: {
title: "淡入淡出",
fadeIn: "淡入",
fadeInDown: "向下淡入",
fadeInDownBig: "向下快速淡入",
fadeInLeft: "向右淡入",
fadeInLeftBig: "向右快速淡入",
fadeInRight: "向左淡入",
fadeInRightBig: "向左快速淡入",
fadeInUp: "向上淡入",
fadeInUpBig: "向上快速淡入",
fadeOut: "淡出",
fadeOutDown: "向下淡出",
fadeOutDownBig: "向下快速淡出",
fadeOutLeft: "向左淡出",
fadeOutLeftBig: "向左快速淡出",
adeOutRight: "向右淡出",
fadeOutRightBig: "向右快速淡出",
fadeOutUp: "向上淡出",
fadeOutUpBig: "向上快速淡出"
},
bounce: {
title: "彈跳類",
bounceIn: "彈跳進(jìn)入",
bounceInDown: "向下彈跳進(jìn)入",
bounceInLeft: "向右彈跳進(jìn)入",
bounceInRight: "向左彈跳進(jìn)入",
bounceInUp: "向上彈跳進(jìn)入",
bounceOut: "彈跳退出",
bounceOutDown: "向下彈跳退出",
bounceOutLeft: "向左彈跳退出",
bounceOutRight: "向右彈跳退出",
bounceOutUp: "向上彈跳退出"
},
zoom: {
title: "縮放類",
zoomIn: "放大進(jìn)入",
zoomInDown: "向下放大進(jìn)入",
zoomInLeft: "向右放大進(jìn)入",
zoomInRight: "向左放大進(jìn)入",
zoomInUp: "向上放大進(jìn)入",
zoomOut: "縮小退出",
zoomOutDown: "向下縮小退出",
zoomOutLeft: "向左縮小退出",
zoomOutRight: "向右縮小退出",
zoomOutUp: "向上縮小退出"
},
rotate: {
title: "旋轉(zhuǎn)類",
rotateIn: "順時(shí)針旋轉(zhuǎn)進(jìn)入",
rotateInDownLeft: "從左往下旋入",
rotateInDownRight: "從右往下旋入",
rotateInUpLeft: "從左往上旋入",
rotateInUpRight: "從右往上旋入",
rotateOut: "順時(shí)針旋轉(zhuǎn)退出",
rotateOutDownLeft: "向左下旋出",
rotateOutDownRight: "向右下旋出",
rotateOutUpLeft: "向左上旋出",
rotateOutUpRight: "向右上旋出"
},
flip: {
title: "翻轉(zhuǎn)類",
flipInX: "水平翻轉(zhuǎn)進(jìn)入",
flipInY: "垂直翻轉(zhuǎn)進(jìn)入",
flipOutX: "水平翻轉(zhuǎn)退出",
flipOutY: "垂直翻轉(zhuǎn)退出"
},
strong: {
title: "強(qiáng)調(diào)類",
bounce: "彈跳",
flash: "閃爍",
pulse: "脈沖",
rubberBand: "橡皮筋",
shake: "左右弱晃動(dòng)",
swing: "上下擺動(dòng)",
tada: "縮放擺動(dòng)",
wobble: "左右強(qiáng)晃動(dòng)",
jello: "拉伸抖動(dòng)"
}
使用栗子
$("#yourElement").addClass("animated bounceOutLeft");
缺點(diǎn)：
1、animated.css 官方提供了幾十種動(dòng)效，但是總會(huì)遇到一些動(dòng)效可能需要修改，或者有些動(dòng)效他名沒有提供。這個(gè)時(shí)候，animate.css就顯得有點(diǎn)吃力了，因?yàn)槟壳皼]提供自定義的動(dòng)畫api。
2、假如我們dom結(jié)構(gòu)已經(jīng)有 tranform或者其他相關(guān)的css設(shè)置，這個(gè)時(shí)候通過添加animted的動(dòng)畫類，那么我們?cè)瓉淼?b>css效果會(huì) 被覆 蓋。解決方案只能是在dom的外圍再用一個(gè)div.wrap包含著 然后把動(dòng)畫效果加載.wrap中來避免覆蓋原有效果,相關(guān)討論issue
velocity優(yōu)點(diǎn)：
1、Velocity 是一個(gè)簡(jiǎn)單易用、高性能、功能豐富的輕量級(jí)JS動(dòng)畫庫。它能和 jQuery 完美協(xié)作，并和$.animate()有相同的 API， 但它不依賴 jQuery，可多帶帶使用。 Velocity 不僅包含了 $.animate() 的全部功能， 還擁有：顏色動(dòng)畫、轉(zhuǎn)換動(dòng)畫(transforms)、循環(huán)、 緩動(dòng)、SVG 動(dòng)畫、和 滾動(dòng)動(dòng)畫 等特色功能。
支持原生js，jq，react寫法，作為vue粉，失望的是，他暫時(shí)沒有vue相關(guān)的插件
2.也有幾十種類似animate.css的預(yù)定義動(dòng)畫api
3.支持自定義動(dòng)效，拼裝隊(duì)列動(dòng)效等等
4.動(dòng)畫回調(diào) 比如 Begin & Complete & Progress 回調(diào)函數(shù)
中文文檔請(qǐng)點(diǎn)擊
缺點(diǎn)：
1.其實(shí)我覺得對(duì)我而言，滿足我各種需求，沒啥缺點(diǎn)，要一定得揪點(diǎn)的話，我能說api demo 不夠多，需要自己多嘗試各種組裝。
2.目前很多童鞋比較少去用jquery的情況下，Velocity就喪失了很多有點(diǎn)，比如他自定義的動(dòng)畫就是結(jié)合Velocity-ui + jq的
anime.js(/??n.?.me?/)是一個(gè)輕量、靈活的JavaScript 動(dòng)畫庫.他可以配合css，svg，Dom節(jié)點(diǎn)和js對(duì)象工作。
其實(shí)用了velocity的人大可不必再去用anime 因?yàn)?b>anime擁有的,并且velocity兼容性要比anime好
但是恰巧我用了。。。所以就說說吧
優(yōu)點(diǎn)：
1.可自定義動(dòng)畫效果，支持隊(duì)列動(dòng)效
2.支持begin, run, update, complete回調(diào)函數(shù)
3.支持動(dòng)畫的play()，pause(),restart()等等功能
缺點(diǎn)：
1.缺少自定義特效
2.文檔demo比較少
使用遇到的小問題：
1.默認(rèn)不是勻速的，需要設(shè)置 easing: "liner"
（詳細(xì)整理待續(xù)）
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/82769.html
摘要：非常的龐大，而且它是完全為設(shè)計(jì)而生的動(dòng)效庫。它運(yùn)行于純粹的之上，是目前最強(qiáng)健的動(dòng)畫資源庫之一?？赡苁莿?chuàng)建滾動(dòng)特效最好用的工具，它支持大量的瀏覽器，只要它們支持和特性?？梢酝ㄟ^安裝吊炸天了，接近現(xiàn)實(shí)生活中的物理運(yùn)動(dòng)碰撞慣性動(dòng)畫庫。 收集日期為2019-02-28，★代表當(dāng)時(shí)的該項(xiàng)目在github的star數(shù)量 Animate.css 56401 ★ 一個(gè)跨瀏覽器的動(dòng)效基礎(chǔ)庫，是許多基礎(chǔ)動(dòng)...
摘要：幸運(yùn)的是，供應(yīng)似乎與需求相匹配，并且有多種選擇。讓我們來看看年值得關(guān)注的十大動(dòng)畫庫。八年了，仍然是一個(gè)強(qiáng)大的動(dòng)畫工具。接下來在這個(gè)令人驚嘆的動(dòng)畫庫列表上的就是了。，通常被稱為動(dòng)畫平臺(tái)，我們忽略它在列表中的排名，它是列表中最受歡迎的庫之一。 原文鏈接原譯文鏈接 現(xiàn)代網(wǎng)站的客戶端依靠高質(zhì)量的動(dòng)畫，這就使得JavaScript動(dòng)畫庫的需求不斷增加。幸運(yùn)的是，供應(yīng)似乎與需求相匹配，并且有多種選...
摘要：頁面調(diào)試騰訊開發(fā)維護(hù)的代碼調(diào)試發(fā)布，錯(cuò)誤監(jiān)控上報(bào)，用戶問題定位。同樣是由騰訊開發(fā)維護(hù)的代碼調(diào)試工具，是針對(duì)移動(dòng)端的調(diào)試工具。前端業(yè)務(wù)代碼工具庫。動(dòng)畫庫動(dòng)畫庫，也是目前通用的動(dòng)畫庫。 本人微信公眾號(hào)：前端修煉之路，歡迎關(guān)注 本篇文章整理自己使用過的和看到過的一些插件和工具，方便日后自己查找和使用。 另外，感謝白小明，文中很多的工具來源于此。 彈出框 layer：http://layer....
摘要：上一篇講了動(dòng)畫定時(shí)器相關(guān)知識(shí)，這一篇介紹下緩動(dòng)函數(shù)及流行的動(dòng)畫庫。動(dòng)畫庫動(dòng)畫庫做的事基本就是一下四點(diǎn)，定時(shí)器，各種屬性變量處理的封裝，過程控制，緩動(dòng)函數(shù)。 上一篇講了JS動(dòng)畫定時(shí)器相關(guān)知識(shí)，這一篇介紹下緩動(dòng)函數(shù)及流行的動(dòng)畫庫。 熟悉的圖 showImg(https://segmentfault.com/img/bV6ACd?w=751&h=533); 實(shí)際使用 jquery anima...
摘要：上一篇講了動(dòng)畫定時(shí)器相關(guān)知識(shí)，這一篇介紹下緩動(dòng)函數(shù)及流行的動(dòng)畫庫。動(dòng)畫庫動(dòng)畫庫做的事基本就是一下四點(diǎn)，定時(shí)器，各種屬性變量處理的封裝，過程控制，緩動(dòng)函數(shù)。 上一篇講了JS動(dòng)畫定時(shí)器相關(guān)知識(shí)，這一篇介紹下緩動(dòng)函數(shù)及流行的動(dòng)畫庫。 熟悉的圖 showImg(https://segmentfault.com/img/bV6ACd?w=751&h=533); 實(shí)際使用 jquery anima...
閱讀 3025·2021-10-14 09:42
閱讀 3810·2021-08-11 11:19
閱讀 3616·2019-08-30 13:57
閱讀 3215·2019-08-30 13:49
閱讀 1612·2019-08-29 18:38
閱讀 962·2019-08-29 13:16
閱讀 1910·2019-08-26 13:25
閱讀 3295·2019-08-26 13:24
