用CSS3動畫，讓頁面動起來

以前就聽說過有個庫，叫animate.css，但是自己並沒有在實際項目中使用過，這次正好要做個招聘頁面，得以利用一下這個庫，在經常會卡頓的UC瀏覽器中也能流暢執行。

掃描下面的二維碼，可以看到在線的demo頁面：

如果對CSS3動畫的一些基礎概念不是很熟悉，可以參考《CSS3中的動畫效果記錄》。

 

一、animate.css庫中的相關知識點

從github上面下載下來是一個css文件，文件里面有3000多行代碼，大部分的代碼還是能看懂的。

但里面的代碼還是有很多耐人尋味的地方。

1. 關鍵幀的選定，不僅有整數，還有小數，並且也不是說有規律的，幾的倍數。

2. 速度曲線的選定，使用的是cubic-bezier函數，自定義貝塞爾曲線，這里有個在線制作貝塞爾曲線的工具。

3. 全程使用transform屬性來實現動畫效果，使用了大量的translate3d、rotate3d、scale3d，這樣還能開啟硬件加速。

4. 使用perspective屬性設置鏡頭到元素平面的距離。

 

1）內置的動畫有多種

1. bounce（跳動）、flash（閃光）、pulse（脈沖）、rubber band（橡皮筋）、shake（抖動）、swing（搖擺）、wobble（搖擺不定）

2. fade（淡入或淡出）

3. flip（翻轉）

4. rotate（旋轉）

5. slide（滑動）

6. zoom（放大或縮小）

 

2）translate3d、rotate3d、scale3d

上圖就是一個3D坐標，人眼的正對面是z軸的正方向。可以在線調試這三個屬性的效果。

1. translate3d語法如下：

據說tz軸位移向量的長度不能設置為百分比值，如果取值為百分比值，將會認為無效值。

2. rotate3d語法如下：

x，y，z是一個0到１之間的數值，主要用來描述元素圍繞X軸或Y軸或Z軸旋轉的矢量值

a：是一個角度值，主要用來指定元素在3D空間旋轉的角度，如果其值為正值，元素順時針旋轉，反之元素逆時針旋轉。

下圖中two到three是繞着X軸旋轉，six到one是繞Y軸旋轉。而繞Z軸就和2D的旋轉效果類似。

3. scale3d語法如下：

 

二、頁面開發過程

1）設計稿

踩到的第一個坑，我頁面采用了flexible.js可伸縮布局，這樣寬度就和設計稿一樣了。設計稿的寬度是750px，也就是iPhone6的CSS像素。

我伸縮下也變成了750px，這樣在設置邊距的時候就可以直接用設計稿上面的了。關於屏幕適配可以參考《移動開發屏幕適配分析》

寬度是搞好了，但是高度卻不一樣，手機上面是1198px，設計稿是1206px，chrome上的模擬器是1256px。

額，怪不得我按照設計稿的邊距設置，在模擬器或手機上都達不到效果圖的樣子。

 

2）實現原理

在翻頁的時候，將當前頁面隱藏掉，給新頁面加個樣式，觸發動畫。

下圖中的“li”就是在翻頁后加一個樣式“play”，觸發整個動畫開始執行。

“li”中的子元素就是img圖片，發生動畫的就是這些img標簽：

CSS代碼如下：

.img3 {
  width: 4.666667rem;
  height: 2.133333rem;
  left: 2.8rem;
  top: 4rem;
  z-index: 4;
}
.play .img3 {
  -webkit-animation: zoomInUp 1s 1.2s backwards;
  animation: zoomInUp 1s 1.2s backwards;
}

下圖中，這個箭頭其實是兩個動畫的結合體，不過在IOS可以實現兩個動畫，而在Android中只能實現一種。

先放大然后再用脈沖效果。

.arrow {
    animation: zoomIn 1s 5s backwards, pulse 1s 0s infinite;
}

 

3）animation-fill-mode的使用

一開始不太明白，這動畫怎么才能觸發，而且一開始各個元素是隱藏掉的，這咋做到的，后面參考了些頁面，發現了下面這個屬性。

animation-fill-mode：規定對象動畫時間之外的狀態。

將其設置為“backwards”：在 animation-delay 所指定的一段時間內，在動畫顯示之前，應用開始屬性值（在第一個關鍵幀中定義）。

在第一幀中設置為透明，然后就能達到一個一個出現的效果了。

左圖所示，這個時候就可以在第一幀中設置透明，注意不能用display:none，來隱藏，display不會出現動畫。

如果不設置為“backwards”，那就會像右圖所示，先顯示然后隱藏，再開始動畫。

  

 

4）rem與CSS自動前綴

我現在是用SASS來寫CSS，上面代碼中的rem都是在編譯的時候動態計算出來的。

-webkit的那個前綴也是在編譯的時候動態添加的。

現在開發會使用前端自動化構建工具gulp。具體配置可以參考《前端自動化構建工具gulp記錄》

 

三、JavaScript部分

1）slider綁定

給“ul”綁定touchstart、touchmove、touchend。touch的相關概念可以參考《觸屏touch事件記錄》

在touchmove中計算偏移量，超過指定的偏移才在touchend觸發滑動效果。

頁面中動畫很多，有的地方需要在動畫結束后觸發一些效果，所以要綁定“webkitTransitionEnd”事件。

$slider.on("webkitTransitionEnd", 'li', function() {
  isSlide = false; //slide動畫結束 防止暴力切換
});
$slider.on('touchstart', function(e) {
  var touch = e.touches[0];
  startX = touch.clientX;
  startY = touch.clientY;
  if (isSlide) {
    e.preventDefault();
  }
}).on('touchmove', function(e) {
  var touch = e.touches[0],
    posY = touch.clientY,
    posX = touch.clientX;
  offsetY = posY - startY;
  offsetX = posX - startX;
  isMove = true;
  e.preventDefault();
}).on("touchend", function(e) {
  if (!offsetY || Math.abs(offsetY) < 30 || !isMove) {
    return;
  }
  $this = $(e.target);
  if ($this[0].tagName != 'LI') {
    $this = $this.closest('li');
  }
  var current = $this.index();
  $this.siblings('li').removeClass('play'); //防止出現重疊BUG
  if (offsetY > 0) { //向下滑動
    direction = "down";
    $next = $this.prev();
  } else { //向上滑動
    direction = "up";
    $next = $this.next();
  }

  if (current == 0 && direction == 'down') {
    return;
  }
  if (current == length - 1 && direction == 'up') {
    return;
  }

  if (direction == 'up') {
    $this.addClass('move-up');
  } else {
    $this.addClass('move-down');
  }
  isSlide = true;
  offsetY = 0;
  offsetX = 0;
  setTimeout(function() {
    $this.removeClass('play move-up move-down');
    $next.addClass('play').siblings('li').removeClass('play');
  }, 300);
});

 

2）e.preventDefault

在“touchstart”和“touchmove”都調用了這個方法，這句話的意思是阻止默認行為。

第一個調用是為了防止在手指快速的上下滑動的時候觸發“touchend”中的切換。

第二個是Android 4.0+的一個BUG，就是有時候不會觸發“touchmove”事件，加了這個后就能觸發。

不過加了這個后，相應位置的滾動就無效了，囧。

關於事件處理的相關概念可以參考《JavaScript中事件處理》

 

 

參考資料：

CSS3 Transform的perspective屬性

CSS3 3D Transform