JavaScript動畫函式庫

動畫的原理是隨時間經過「讓某值從0（0%）連續變化至1（100%）」

具體來說是「起點」、「時間」和「變化量」的三大概念

首先可用「變化時間」和「經過時間」計算出「完成度」

接下來將「完成度」乘上「變化量」，加上「起點」就能得出動畫中的值

code:pseudocode

動畫完成度 = 經過時間 / 變化時間

動畫中途值 = 起點 + 變化量 * 動畫完成度

之後將此計算連續執行，就是動畫函式庫的原型

實際範例

code:javascript

const target = document.getElementById("mitarashi")

const startX = 50

const startY = 50

const endX = 500

const endY = 150

const diffX = endX - startX

const diffY = endY - startY

const time = 1000

let progress = 0

requestAnimationFrame(update)

function update(timestamp) {

progress = timestamp = / time

progress = Math.min(progress, 1)

const resultX = startX + diffX * progress

const resultY = startY + diffY * progress

if (progress < 1) {

requestAnimationFrame(update)

}

}

函式化、加上延遲功能