Javascript 手刻動畫

by on # javascript

requestAnimationFrame

let time = 0;

function render(t) {
    console.log(t - time); //間隔約 16~17 毫秒,約 60 FPS,根據硬體
    time = t;
    // setTimeout(render, 1000 / 60); //如果要跑多次,這邊也要放一個 setTimeout
    requestAnimationFrame(render);
}

// setInterval(render, 1000 / 60); //60 FPS
// setTimeout(render, 1000 / 60); //如果 setTimeout 只放這裡,只會跑一次

requestAnimationFrame(render);

X = X0 + V (線性等速運動)

V = V0 + AT (加速度)

  • canvas.width = canvas.width; 修改canvas寬度,也會觸發clear。

XY都動

重力、反作用力、摩擦力

布朗運動 (隨機運動)

發射

煙火

發射煙火

參考

javascript, motion
comments powered by Disqus