滑鼠移動雪花動畫特效

cola · 2021年12月27日03:16

原文：今年聖誕節我們做了一個軌跡特效套件. 嘗試著重現 90… | by fin | 嗨，世界 | Dec, 2021 | Medium

注意的重點，不是特效本身
而且效能和部份程式的用法

使用 requestAnimationFrame
使用 canvas
滑鼠移動 - 在裝置不同的問題：mousemove 與 touchstart
動畫效能的 FPS

image2488×1004 354 KB
Chrome Devtool 檢查動畫效能

image750×268 43.3 KB

個人觀注的 code snippet
所有 promise 都成功，才執行下個動作

Promise.all(images.map(url => loadImage(url))).then((results) => {
    canvasImages = results.filter(result => result !== null)

    if (results.length) {
      init()
    }
  })