Nhảy tới nội dung

Hoạt ảnh trên Canvas (Canvas Animation)

Tạo hoạt ảnh trên HTML5 canvas mượt mà, độc lập với tốc độ khung hình (frame rate / FPS) sử dụng thời gian (delta time) và các hàm easing.

Vẽ đối tượng động trên Canvas​

Để đối tượng di chuyển, tọa độ được cập nhật qua hàm update() và xóa nét vẽ cũ qua clearRect() ở hàm draw() trước khi vẽ vị trí mới:

function draw() {
    // Xóa toàn bộ canvas
    context.clearRect(0, 0, canvas.width, canvas.height);

    context.fillStyle = '#ff8080';
    context.fillRect(rectX, rectY, 150, 100);
}

Loop

Di chuyển dựa trên thời gian (Delta Time)​

Để tốc độ di chuyển của đối tượng không bị phụ thuộc vào cấu hình phần cứng (FPS cao thì chạy quá nhanh, FPS thấp thì chạy chậm), ta tính toán khoảng thời gian đã trôi qua giữa các khung hình (Delta Time):

let secondsPassed = 0; // Delta time (giây)
let oldTimeStamp = 0;
let movingSpeed = 50; // 50 pixel mỗi giây

function gameLoop(timeStamp) {
    // Tính toán thời gian đã trôi qua
    secondsPassed = (timeStamp - oldTimeStamp) / 1000;
    oldTimeStamp = timeStamp;

    // Giới hạn thời gian nhảy tối đa để tránh lỗi giật lag khi chuyển tab
    secondsPassed = Math.min(secondsPassed, 0.1);

    update(secondsPassed);
    draw();

    window.requestAnimationFrame(gameLoop);
}

function update(secondsPassed) {
    // Tính vị trí mới dựa trên thời gian
    rectX += (movingSpeed * secondsPassed);
    rectY += (movingSpeed * secondsPassed);
}

Sử dụng Easing Functions​

Các hàm Easing làm cho chuyển động trở nên tự nhiên và sinh động hơn:

function update(secondsPassed) {
    timePassed += secondsPassed;

    // Sử dụng các hàm easing cho hiệu ứng chuyển động
    rectX = easeInOutQuint(timePassed, 50, 500, 1.5);
    rectY = easeLinear(timePassed, 50, 250, 1.5);
}

Easing