CSS/SCSS 作一個心跳的動畫 keyframe

CSS/SCSS 作一個心跳的動畫

1、心電圖數據化

作動畫，須要動畫曲線，心跳的曲線天然是心電圖，網上隨便找一個差很少的，選取完整的一部分

1. 橫向10等分

找到基線，橫向10等分。
整個圖是一個心跳週期，10等分一會好算時間，對應 keyframe 中的 10% 20% 30% ...

2. 縱向10等分

以基線爲基準，找到上半部分最高的位置做爲最高處，從基線到最高處10等分。
再複製一份上面的座標到下面。

3. 找到曲線中的關鍵點

找到曲線的關鍵點，這些就是咱們要在動畫中記錄的變化位置

2、寫動畫 css

拿到圖形數據以後，咱們就須要對它進行代碼化了。
其實就是把上面每一個關鍵點都寫到動畫 css 的關鍵幀中。

這裏咱們用 SCSS 寫，由於它可使用算式。

SCSS 的使用教程移步這裏： SCSS 平常基礎用法

原理

動畫時間軸
圖中橫向的 1-10 對應 keyframe 中的 from,10%,20%,30%...to

css 縮放實現
css 中使用 transform: scale() 實現對圖形的放大縮小動畫

css 動畫縮放的比例如何算
圖形的原始大小是 scale(1)
咱們先設置一個縮放的最大值，好比 scale(1 + 0.2)，那麼變化的增幅就是 0.2，這個 0.2 就表明圖中 從基線位置到最高點的距離 ，這樣就能夠計算出每一個關鍵點的增幅。
好比：第二個關鍵點的位置差很少是 (橫向 12%，縱向 10%)，那麼css關鍵幀中就是

開寫 SCSS 動畫

// 定義一個變量：增幅
$max-amplitude: 0.2;

// 第一幀的增幅就是：$max-amplitude * 0.1
@keyframes heart-bounce {
  from {transform: scale(1);}
  12% {transform: scale(1 + $max-amplitude * 0.1);}
  to {transform: scale(1);}
}

按照圖中位置補齊全部關鍵點就是

@keyframes heart-bounce {
  from {transform: scale(1);}
  12% {transform: scale(1 + $max-amplitude * 0.1);}
  20% {transform: scale(1 - $max-amplitude * 0.05);}
  28% {transform: scale(1 - $max-amplitude * 0.1);}
  32% {transform: scale(1 + $max-amplitude * 1);}
  38% {transform: scale(1 - $max-amplitude * 0.2);}
  50% {transform: scale(1 - $max-amplitude * 0);}
  58% {transform: scale(1 - $max-amplitude * 0.1);}
  70% {transform: scale(1 - $max-amplitude * 0.5);}
  80% {transform: scale(1 - $max-amplitude * 0.1);}
  to {transform: scale(1);}
}

這樣生成的 css 是這樣的

@keyframes heart-bounce {
  from {transform: scale(1); }
  12% {transform: scale(1.02); }
  20% {transform: scale(0.99); }
  28% {transform: scale(0.98); }
  32% {transform: scale(1.2); }
  38% {transform: scale(0.96); }
  50% {transform: scale(1); }
  58% {transform: scale(0.98); }
  70% {transform: scale(0.9); }
  80% {transform: scale(0.98); }
  to {transform: scale(1); } }
/*# sourceMappingURL=heartbeat.css.map */

這樣動畫代碼出來了，再定義一個類名 .heart-beat 來調用這個動畫

.heart-beat{
    animation-duration: 1s; // 一個完整動畫的持續時間
    animation-iteration-count: infinite; // 動畫循環次數：無限循環
    animation-name: heart-bounce; // 調用的動畫名，對應上面的 .heart-bounce
}

這樣，在你須要跳動的圖片或文字上使用該 class 便可

效果如圖：