Animations

Animations

1. Bezier curve 貝塞爾曲線

1. 什麼是貝塞爾曲線？

貝塞爾曲線被用於在計算機圖形學中繪製圖形，或者用在CSS動畫中, 或者不少其餘地方。
貝塞爾曲線由控制點構成, 有如下幾個特色:

• 控制點並不都在曲線上。
• 曲線的階等於點的數目減去一個。
  【對於兩點，則是一個線性曲線（一條直線），三點-二次曲線（拋物線），四點-三次曲線。】
• 曲線老是在控制點的凸包內。

2. 如何計算貝塞爾曲線？

假設有控制點：P1 = (x1, y1) P2 = (x2, y2) P3 = (x3, y3) P4 = (x4, y4)
曲線的座標取決於最後的方程式， 參數t在[0, 1]之間。

• 假若有兩個點，則公式是:
  
• 假若有三個點，則公式是:
  
• 假若有四個點，則公式是：
  

根據這個公式，咱們就能夠計算x和y的座標值了，以三個點爲例:

假設這三個點的座標是：(0,0), (0.5, 1) (1, 0)

因此這時當t的值，從0到1變化時，咱們就能夠根據上面的方程式算是對應的(x, y)座標，再將這些座標連成線，就畫成了貝塞爾曲線。
t = 0, (0, 0)
t = 0.2, (0.2, 0.36)
t = 0.4, (0.4, 0.64)
t = 0.6, (0.6, 0.84)
t = 0.8, (0.8, 0.96)
t = 1, (1, 1)

2. CSS Animations

咱們能夠使用CSS3提供的transition來實現動畫，而不借助Javascript的幫助.
CSS transition的想法很是簡單，就是咱們來描述一個屬性以及這個屬性將如何變化，當屬性改變時，瀏覽器繪製動畫過程。
CSS transition有四個屬性：
transition-property 定義屬性名稱
transition-duration 定義動畫持續時間
transition-timing-function 經過函數的方式來描述動畫的執行過程
transition-delay 定義動畫的延遲時間
固然transition的屬性也能夠簡寫成：transition:property duration timing-function delay

transition-property 不是全部的屬性能夠作成動畫，能夠的屬性見這裏https://www.w3.org/TR/css-tra...
若是這樣定義:transition-property: all意味着要把全部屬性作成動畫.

transition-duration 持續時間須要使用ms或者s爲單位。
transition-delay 定義延遲的時間
若是這樣定義: transition-delay: 1s 動畫在1s後開始進行
若是這樣定義: transition-delay: -1s, 當delay是負值時, 則會減小相應的動畫持續時間. 由於這時延遲執行就變成了超前執行。
transition-timing-function 描述動畫的執行過程

1. 貝塞爾曲線

最經常使用的就是貝塞爾曲線了cubic-bezier(x1, y1, x2, y2)
執行CSS動畫的貝塞爾曲線是三階貝塞爾, 有四個控制點:
第一個點是: P1(0, 0)
最後第一個點是: P4(1, 1)
因此咱們只須要定義中間的兩個點: P2(x1, y1) P3(x2, y2)
因此計算曲面上點座標的公式就是:

因爲x1 = 0, x4 = 1, 因此簡化一下就是:

因爲y1 = 0, x4 = 1, 因此簡化一下就是:

假定中間兩個點的左邊是: (0, 0.5) (0.5 ,1.0)
那麼對應的公式就變爲:

而t的範圍又是[0, 1], 因此咱們就能夠給定t不一樣的值，而後畫出對應的曲線。

其中已經有幾個內置的貝塞爾曲線能夠用了,
linear cubic-bezier(0, 0, 1, 1)
ease cubic-bezier(0.25, 0.1, 0.25, 1.0)
ease-in cubic-bezier(0.42, 0, 1.0, 1.0)
ease-out` cubic-bezier(0, 0, 0.58, 1.0)
ease-in-out cubic-bezier(0.42, 0, 0.58, 1.0)

貝塞爾曲線不只能夠實現平滑的曲線，還能夠實現跳躍的曲線.
若是某個點的y座標出現了負值或者很大值時，貝塞爾曲線就能夠跳的很是低或者很是高。
好比: transition: left 5s cubic-bezier(.5, -1, .5, 2);

2. Steps函數

steps(number, start/end)定時函數可讓動畫一步一步的執行.
第一個參數定義步數
第二個參數若是爲start, 意味着在動畫開始的時候, 就要當即執行第一步.
若是爲end, 意味着不在開始的時候執行，並且每一秒結束的時候執行.
step-start效果等用於steps(1, start).
step-end效果等用於steps(1, end).

3. transitionend事件

當CSS的動畫結束時，會觸發transitionend事件.
一般用來在動畫完成後作些操做，或者合併動畫效果.

boat.onclick = function() {
      let times = 1;

      function go() {
        if (times % 2) {
          // swim to the right
          boat.classList.remove('back');
          boat.style.marginLeft = 100 * times + 200 + 'px';
        } else {
          // swim to the left
          boat.classList.add('back');
          boat.style.marginLeft = 100 * times - 200 + 'px';
        }
      }
      go();
      boat.addEventListener('transitionend', function() {
        times++;
        go();
      });
    };

4. Keyframes

語法: @keyframes animationname {keyframes-selector {css-styles;}}
animationname 必需, 定義動畫的名稱
keyframes-selector 必需, 定義動畫時長的百分比.
合法值: 0~100%, from{ } 等價於0%, to{ }等價於100%
0%是動畫開始的時間, 100%是動畫結束的時間.
css-styles必需, 定義一個或多個CSS樣式屬性.

定義好@keyframes規則後，就能夠配合animation屬性來一塊兒建立動畫了.
舉個栗子:

.zorro {
      width: 50px;
      padding: 20px;
      text-align: center;
      background: gold;
      position: relative;
      animation: zorro 1s ease-in 0s 6 alternate;
    }
    @keyframes zorro {
        from {
          top: 0px;
          left: 0px;
        }
        33% {
          top: 0px;
          left: 150px;
        }      
        66% {
          top: 120px;
          left:0px;
        }            
        to {
          top: 120px;
          left: 150px;
        }
    }

from等價於0%, to等價於100%,中間能夠定義其餘百分比的動畫時長.

3. Javascript Animations

JS能夠處理一些CSS不能處理的動畫.

1. setInterval

最簡單的一個方式就是使用setInterval, 經過設定必定的間隔，而後在相應間隔作元素屬性的變化, 在一段時間後, clearInterval, 這樣就能夠作成一個動畫了.

train.onclick = function() {
      let start = Date.now();
      let timer = setInterval(function() {
          let timePassed = Date.now() - start;
          train.style.left = timePassed / 5 + 'px';
          if (timePassed > 2000) clearInterval(timer);
      }, 20);
    }

咱們定義一輛火車, 而後每隔20ms, 讓火車動一下, 運動了2s後, 中止火車, 這樣就造成了一個勻稱運動的動畫.