技術 07 - 動畫的基礎

在Canvas做動畫不難，其實只是重複兩個動作： 清掉舊畫面 繪製出目前的畫面 很久以前，在HTML中做動畫，大概都是透過setTimeout()或setI...

技術 DAY 28. JavaScript Canvas 動畫

DAY 28. JavaScript Canvas 動畫 動畫其實就是把一張張靜態圖片連續播放，讓人看到感覺像是動畫我們可以每次繪圖時改變內容大小，形狀顏色等等...

技術 用 Three.js 來當個創世神 (11)：專案實作#6 - 人物基本動畫

在昨天的移動點光源實作上，我們透過更改光源的位置來達到動畫的效果，今天讓我們深入動畫的操作並實際上透過讓苦力怕擺頭、走動、膨脹的動作來練習基本動畫。 P...

技術 21 倒數計時...開始！論 requestAnimationFrame、 setInterval 和 setTimeout

前言 昨天我們成功從電腦那取得了時間，但是時間不會動...今天就繼續跟我一起勇闖時間城，把停滯的時間找回來吧哈哈哈！(天啊今天的開場白也太中二) setTime...

技術 Chapter2 - Canvas動畫（I）玩轉路徑和位移 動畫原來這麼簡單

這個章節呢，同樣會以實作為主，在解決問題中帶大家學習，逐漸引入JS的語言特性，前面一樣會從簡單的開始，後面八成會開始越講越快，若有不明白的歡迎留言詢問! 路徑和...

技術 Chapter1 - 補充 CORS + autoplay政策 + requestAnimeFrame致命缺點

前言 事情是這樣的，其實我都是事先寫好code，當天才寫文章，本來昨天有三個重要的點要額外拉出來講的，就這麼被我忘了！擔心有人真的很認真照著步驟跟著做了，卻在上...

技術 Chapter5 - 輕鬆用Canvas實現轉場動畫和運鏡處理

接下來時間真的很緊，也顧不上結構了，只能就目前想到的功能，先以直覺的方式編寫了，如果講不太清楚還多多包涵！昨天的一定要先看唷，今天是接著作下去的 轉場 玩家從進...

技術 Chapter1－DJ最愛的音頻動感圖像（IV）讓音樂動起來！開篇基礎設定和動畫框架

話不多說先上圖 從左到右依序執行，最後該函式會再呼叫自己一次，圖中淡化的區塊是下個章節的主題 然後把它跟程式碼做對應： function Animatio...

技術 Day 23 - 用 canvas 與 requestAnimationFrame 做 進度條

前述 雖然用一般的 css 就可以完成進度條，但為了符合主題，用了 canvas 來完成！ codesendBox import React, { useSt...