Animate.css動畫庫，簡單的使用，以及原始碼剖析
阿新 • • 發佈：2020-02-29
專案演練地址
推薦的線上文件社群-MDN
css線上手冊包含css3
animate.css是什麼？能做些什麼？
animate.css是一個css動畫庫，使用它可以很方便的快捷的實現，我們想要的動畫效果，而省去了操作js的麻煩。同時呢，它也是一個開源的庫，在GitHub的點贊高達5萬以上。功能非常強大。效能也足夠出色。
如何使用它？
- 首先你需要到github上下載它，地址
- 拿到它之後，把animate.css引入到你的html檔案。
- 參考官方的文件（當然了，是英文的哈哈哈，程式設計師不會英語可萬萬不行的哦。）就可以十分方便的使用它了。
- 注意哈，內聯元素比如a標籤有些動畫是不支援的。目前該庫正在一點一點的更新中。
- 例子
（一）靜態的使用它
<!-- animated是必須新增的；bounce是動畫效果；infinite從語義來看也秒懂，無限迴圈，不新增infinite預設播放一次 -->
使用的基本公式就是：
<div class="animated 想要的動畫名稱 迴圈的次數 延遲的時間 持續的時間">動畫</div>
<div class="animated bounce infinite delay-2s duration-2s ">動畫</div>（二）動態的使用它 // 主要的思路就是：給動畫物件新增類，然後監聽動畫結束事件，一旦監聽到動畫結束，立即移除前面新增的類。----如果你現在還不會使用js基本語法以及jQuery，那麼確實比較難理解 // 以下是官方給出的jQuery封裝 //擴充套件$物件，新增方法 animateCss $.fn.extend({ animateCss: function (animationName) { var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend'; $(this).addClass('animated ' + animationName).one(animationEnd, function() { $(this).removeClass('animated ' + animationName); }); } // 以下是一個小demo //animate("選擇器","動畫","次數","時延") function animate(seletor, animation_name, count, delay) { var target = document.querySelectorAll(seletor) var timer = null; timer = setInterval( function() { target.forEach( function(x) { x.className += " animated " + animation_name; x.addEventListener("animationend", function(){ x.className = x.className.replace(" animated " + animation_name, "");}); } ) count --; if( count <= 0 ) { clearInterval( timer ); } }, delay) } //使用示例 animate('.haha', "bounce", 2, 1000); // 通過這個例子你就能明白如何動態的使用它了，這個小demo只實現了對animationend的監聽。
- 如果你想更簡單的使用js，請看以下程式碼.注意以下操作均用到了jQuery
// 1.如果說想給某個元素動態新增動畫樣式，可以通過jquery來實現： $('#yourElement').addClass('animated bounceOutLeft'); // 2.當動畫效果執行完成後還可以通過以下程式碼新增事件 $('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething); // 3.你也可以通過 JavaScript 或 jQuery 給元素新增這些 class，比如： $(function(){ $('#yourElement').addClass('animated bounce'); }); // 4.有些動畫效果最後會讓元素不可見，比如淡出、向左滑動等等，可能你又需要將 class 刪除，比如： $(function(){ $('#yourElement').addClass('animated bounce'); setTimeout(function(){ $('#yourElement').removeClass('bounce'); }, 1000); });
- 以上的js程式碼不會？沒關係我們還有別的辦法，實現同樣的效果
/* 我們可以通過自己重寫原始碼裡面的屬性，從而覆蓋原始碼，讓動畫實現我們想要的效果，如果這個你還不會？ok那你還是好好把前面的html啊，css啊移動端的佈局啊，好好的溫習溫習*/
#yourElement {
-vendor-animation-duration: 3s; //設定-vendor-animation-delay: 2s; //設定延遲的時間-vendor-animation-iteration-count: infinite; //
}
/* 關於時間的說明，animated中定義了幾個類。在官方的文件中也給出了，預設的是delay-1s,duration也是1s
slow 2s
slower 3s
fast 800ms
faster 500ms */- 還需要說明的就是在你的專案中使用它，需要注意的地方，如果你還未掌握伺服器端的技術，這點你可以忽略
animate提供了npm以及yarn的下載安裝方式，你可以使用npm 或者yarn來下載並且使用它。如何你可以通過設定配置檔案(animate-config.json)來選取你需要的功能模組。譬如，我不需要flash和shake效果，只要在配置檔案中，設定為false既可。
"attention_seekers": {
"bounce": true,
"flash": false,
"pulse": false,
"shake": true,
"headShake": true,
"swing": true,
"tada": true,
"wobble": true,
"jello":true
}
解析原始碼
這裡最主要的是就是三個關鍵類，
- animated類
- 以下是animated類的部分原始碼
+++
.animated.flip {
-webkit-backface-visibility: visible;
/* 指定元素背面面向使用者時是否可見。 */
backface-visibility: visible;
-webkit-animation-name: flip;
/* 檢索或設定物件所應用的動畫名稱，必須與規則@keyframes配合使用，因為動畫名稱由@keyframes定義 */
animation-name: flip;
}
+++
.animated {
/* 相容性寫法，duration設定的是持續的時間 */
-webkit-animation-duration: 1s;
animation-duration: 1s;
/* 檢索或設定物件動畫時間之外的狀態 both選項就是設定物件狀態為動畫結束或開始的狀態 */
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.infinite {
-webkit-animation-iteration-count: infinite;
/* 指定動畫迴圈可以是無限的(infinite也可以指定具體的迴圈次數比如9) */
animation-iteration-count: infinite;
}
.animated.delay-1s {
-webkit-animation-delay: 1s;
/* 設定延遲的時間 */
animation-delay: 1s;
}
.animated.delay-2s {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
.animated.delay-3s {
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
.animated.delay-4s {
-webkit-animation-delay: 4s;
animation-delay: 4s;
}
.animated.delay-5s {
-webkit-animation-delay: 5s;
animation-delay: 5s;
}
/* 以下的四個是我們之前說的animate中自定義的時間詞彙 */
.animated.fast {
-webkit-animation-duration: 800ms;
animation-duration: 800ms;
}
.animated.faster {
-webkit-animation-duration: 500ms;
animation-duration: 500ms;
}
.animated.slow {
-webkit-animation-duration: 2s;
animation-duration: 2s;
}
.animated.slower {
-webkit-animation-duration: 3s;
animation-duration: 3s;
}
/* 這個是媒體查詢相關的 */
/* prefers-reduced-motion 用於檢測使用者的系統是否被開啟了動畫減弱功能。
reduce
這個值意味著使用者修改了系統設定，將動畫效果最小化，最好所有的不必要的移動都能被移除。
*/
@media (print), (prefers-reduced-motion: reduce) {
.animated {
-webkit-animation-duration: 1ms !important;
animation-duration: 1ms !important;
-webkit-transition-duration: 1ms !important;
transition-duration: 1ms !important;
-webkit-animation-iteration-count: 1 !important;
animation-iteration-count: 1 !important;
}
}
- infinite類
- 這個的原始碼就在上面了
.animated.infinite {
-webkit-animation-iteration-count: infinite;
/* 指定動畫迴圈可以是無限的(infinite也可以指定具體的迴圈次數比如9) */
animation-iteration-count: infinite;
}- 動畫名類，比如bounce
- 以下是定義具體的動畫程式碼，
注意,高大上的bezier曲線。這個timing-function是一個檢索或設定物件動畫的過渡型別的東西，cubic-bezier是貝塞爾曲線，取值在[0,1]之間，需要指定四個值，那麼什麼是貝塞爾曲線呢？哈哈哈如果你高數沒白學，那你應該能明白這個的工作原理，如果你還不是很清楚，請點選這裡
bezier曲線？計算機圖形原理
體會以下bezier曲線
@keyframes bounce {
from,
20%,
53%,
80%,
to {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
transform: translate3d(0, 0, 0);
}
40%,
43% {
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
transform: translate3d(0, -30px, 0);
}
70% {
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
transform: translate3d(0, -15px, 0);
}
90% {
transform: translate3d(0, -4px, 0);
}
}
.bounce {
animation-name: bounce;
transform-origin: center bottom;
}- 你可以看得到，這些程式碼，在專案資料夾結構中，animate把source(意為“源”)裡面的具體實現程式碼合併到一個css檔案中（animate.css)，在source資料夾下，這些具體的動畫效果被做了具體的分類與歸檔。
