Tween (Hoạt Ảnh Nội Suy)

Tween (viết tắt của "in-between") là một kỹ thuật được sử dụng để tạo sự chuyển đổi mượt mà giữa các giá trị theo thời gian. Nó bao gồm việc tính toán các giá trị trung gian giữa điểm bắt đầu và điểm kết thúc để tạo hoạt ảnh cho các thuộc tính như vị trí, kích thước, màu sắc hoặc các thuộc tính khác của đối tượng.

Tạo một Tween

Đầu tiên chúng ta khởi tạo một lớp đối tượng:

class GameObject {
    constructor(x, y) {
        this.x = x;
        this.y = y;
        this.color = "black";
    }
}

class Circle extends GameObject {
    constructor() {
        super();
        this.radius = 100;
    }

    render(ctx) {
        ctx.fillStyle = this.color;
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
        ctx.stroke();
    }
}

Tạo lớp Tween nhận giá trị nguồn (source value) và nội suy nó đến giá trị mục tiêu (target value) trong một khoảng thời gian (duration):

class Tween {
    constructor(source, target, duration) {
        this.source = source;
        this.target = target;
        this.duration = duration;
        this.elapsed = 0;
    }

    update(deltaTime) {
        this.elapsed += deltaTime;
        
        // Giới hạn thời gian trôi qua không vượt quá duration
        if (this.elapsed >= this.duration) {
            this.elapsed = this.duration;
        }
        
        // Nội suy tuyến tính (Linear Interpolation)
        return this.source + (this.target - this.source) * (this.elapsed / this.duration);
    }
}

Sử dụng Tween để làm mượt chuyển động của đối tượng:

const circle = new Circle();
circle.x = 100;
circle.y = 100;

const tweenX = new Tween(circle.x, 500, 3); // Di chuyển x từ 100 tới 500 trong 3 giây
const tweenY = new Tween(circle.y, 300, 3); // Di chuyển y từ 100 tới 300 trong 3 giây

function update(dt) {
    circle.x = tweenX.update(dt);
    circle.y = tweenY.update(dt);
}