Sprite Sheet - Khi những bức ảnh nhảy múa trên Website

Phong Nguyễn Dương

Bạn muốn có một hiệu ứng tuyệt đẹp nào đó để ra mắt khách hàng??!!

Bạn muốn trang web của mình thật sinh động nhưng lại chưa có nhiều kiến thức về back-end??!!

Hay đơn giản, bạn là một tín đồ của những hiệu ứng đẹp mắt??!!

Vậy thì Sprite Sheet là một sự lựa chọn không tồi đâu.

Thấy chàng trai hát rock máu lửa trên kia chứ, yên tâm, bạn sẽ làm được sớm thôi.

Còn giờ thì Let's go:

Các bước thực hiện:

Bước 1: Đương nhiên là tạo trang HTML rồi !!
Ở đây mình sẽ tạo một file index.html nha!!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sprite Sheet - Nodejs.vn, Nodemy.vn</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div style="display: flex; justify-content: center;">
        <div class="sprite-sheet">

        </div>
    </div>
</body>
</html>

Bước 2: Có ngôi nhà rồi, trang trí ngôi nhà thôi!!
Thêm một file CSS nữa nha!! Ở đây là style.css
Code như sau:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.sprite-sheet{
    width: 103px;
    height: 89px;
    background-image : url("https://i.imgur.com/FDHsu.png");
    animation: moveX 0.25s steps(3) infinite,
               moveY 0.5s steps(2) infinite;
}
@keyframes moveX{
    from{background-position-x:0px;}
    to{background-position-x:-309px;}
}
@keyframes moveY{
    from{background-position-y:0px;}
    to{background-position-y:-178px;}
}

Bước 3: Giải thích
Okieee, tới phần hay rồi đây, ta cùng tìm hiểu sâu hơn nhé.

Trước hết, ta cần hiểu tổng quát cơ chế của hiệu ứng Sprite Sheet:

Nếu ai biết về những bộ phim nhựa cách đây hơn chục năm thì sẽ biết ngay nguyên lý của hiệu ứng này!!

Sprite Sheet sẽ chạy liên tục từng hình ảnh ở trên một cách thật nhanh và tạo cảm giác cho mắt chúng ta rằng hình ảnh đang chuyển động.
Nếu hơi khó hiểu thì anh em có thể phản hồi ở dưới nha!!!

Giờ ứng dụng vào code nha:

Ta nhìn lên ảnh trên thì có thể thấy, hàng ngang có 3 cột tương ứng với 3 khung hình, hàng dọc có 2 cột, mỗi cột chứa 3 khung hình.

.sprite-sheet{
    width: 103px;
    height: 89px;
    background-image : url("https://i.imgur.com/FDHsu.png");
    animation: moveX 0.25s steps(3) infinite,
               moveY 0.5s steps(2) infinite;
}

Width, height là chiều dài và chiều cao của một khung hình.

@keyframes moveX{
    from{background-position-x:0px;}
    to{background-position-x:-309px;}
}
@keyframes moveY{
    from{background-position-y:0px;}
    to{background-position-y:-178px;}
}

Chúng ta dễ thấy các con số:

background-position-x (309px) = width (103px) x 3 (số khung hình theo 1 hàng ngang)
background-position-y (178px) = width (89px) x 2 (số khung hình theo 1 hàng dọc)

Ta hiểu rằng trong 0,25s mỗi khung hình di chuyển từ x = 0 đến x = -309px trong 3 bước, vậy mỗi bước nó sẽ di chuyển -103px, hay giật lùi 103px. (đương nhiên, màn hình windows của chúng ta vẫn hiển thị từ vị trí x = 0 nhé, vậy nó mới ảo diệu )

Như vậy, một lần hiệu ứng

    animation: moveX 0.25s steps(3) infinite,
               moveY 0.5s steps(2) infinite;

hoạt động, moveX và moveY sẽ đồng loạt chạy các khung hình trên trục của chúng.
moveX và moveY phải đồng loạt chạy xong ở cùng một thời điểm, vậy nên mất 0,25s để chạy toàn bộ 1 hàng ngang thì 2 hàng ngang sẽ mất 0,5s (các bạn cùng theo dõi code nha).

Một vài từ khóa:

animation: hiệu ứng chuyển động, sử dụng để tạo hiệu ứng di chuyển cho các phần tử.
(với code trên, ta hiểu rằng moveX sẽ chạy trong 0,25s và lặp lại vô hạn bằng từ khóa "infinite").
@keyframe: dùng để điều khiển diễn biến một hoạt động của thành phần, được dùng kèm với thuộc tính animation.
(với code trên, ta hiểu rằng moveX sẽ dịch chuyển từ vị trí x = 0 đến vị trí x = -309px mỗi lần chạy).
steps: các bước thực hiện animation.

Tổng kết:
Vậy là chúng ta đã cùng nhau tìm hiểu thêm được một hiệu ứng rất tuyệt vời phải không nào .
Nếu có bất cứ thắc mắc gì, hãy để lại phản hồi cho chúng mình biết nha!!
Chúc mọi người thực hiện thành công Sprite Sheet!!!

Xem code tại đây nha!!!

namndwebdev

Tuyệt nhỉ,
Cái này làm animation trong game thì tuyệt rồi.