今天想分享的 interpolate 仍是屬於 Utility Methods 的其中一個方法，先來看一下效果：

透過滑鼠的靠近與遠離來操控 svg 的放大縮小，上圖是自己之前做的剪紙，就不特別分享 svg 的部分了～

先來看一下 HTML

  <div class="container" id="container">
        <div class="box" id="box">
         <svg>
             //內容省略
         </svg>
        </div>
   </div>

關於 interpolate

interpolate 大多時候被翻譯作線性插值，但這個名詞聽起來好生硬啊...

因此想藉由以下轉換來分享：
想像我們眼前有一個調節音量的旋轉按鈕，透過 0 到 180 度的旋轉，可以操控音量從靜音（假設數值是0）到最大音量（假設數值是6），當我們旋轉這個按鈕時，手的角度就會對應到音量的變化。interpolate 的工作就像是這個音量旋轉按鈕，它在兩個值之間建立平滑的過渡，可以在動畫中做的應用不僅只是將物件放大縮小，也可以控制顏色的漸變、旋轉的過渡，只要給定一個進度值（0 到 1），interpolate 就會算出對應的值，讓動畫變得絲滑自然。
不過有一點要注意，當你使用interpolate時，它並不是直接回傳一個值，而是給你一個專門用來計算的新函式。

interpolate 使用方法如下：（官方指南底加 Utility Methods - interpolate)

interpolate(startValue, endValue, progress)

• startValue（起始值） : 幾乎可以是任何資料類型（數字、字串、陣列、顏色等等）。
• endValue（結束值） : 可以是任何資料類型，只要與 startValue 的類型相同即可。
• progress（進度值） : 介於 0 和 1 之間的數值，其中 0 代表起始點，0.5 代表中間點，1 代表結束點。

所以假設：

interpolate(1, 100, 0.3); //回傳值就是 30

實作的分享就留到明天啦～