Frame by frame animation là gì? Cách làm hoạt hình từng khung cho người mới

Frame by frame animation là gì, khác keyframe thế nào, ví dụ 8 khung bóng nảy có co giãn, cách tính số khung theo fps và cách ghép khung thành sprite sheet bằng công cụ miễn phí của ColorME.

Frame by frame animation (hoạt hình từng khung) là cách làm hoạt hình bằng cách vẽ từng khung hình riêng, mỗi khung khác khung trước một chút, rồi phát liên tiếp thật nhanh để mắt thấy chuyển động. Đây là kỹ thuật lâu đời nhất của hoạt hình vẽ tay, và đến nay vẫn được dùng cho phim 2D, ảnh động, sticker và nhân vật trong game.

Để bạn thấy rõ cách nó hoạt động, mình tự làm một chuỗi 8 khung quả bóng nảy, giải thích từng khung, rồi ghép thành sprite sheet bằng công cụ của ColorME.

Frame by frame khác hoạt hình dùng keyframe thế nào?

• Frame by frame: bạn tự vẽ mọi khung. Tốn công nhưng tự do: hình có thể biến dạng, co giãn, đổi dáng tuỳ ý. Đây là cảm giác "vẽ tay" đặc trưng của nhiều phim 2D.
• Keyframe và nội suy: bạn chỉ đặt vài khung chính, phần mềm tự tính các khung ở giữa. Nhanh hơn nhiều, hợp với motion graphics, chữ chuyển động, giao diện. Xem thêm bài keyframe là gì và phân biệt animation và motion graphics.

Trên thực tế, nhiều dự án dùng cả hai: nhân vật vẽ từng khung, còn chuyển động camera hay chữ dùng keyframe.

Ví dụ: 8 khung cho một nhịp bóng nảy

Quả bóng nảy là bài tập kinh điển cho người mới học hoạt hình, vì nó gói gọn hai nguyên tắc quan trọng: co giãn (squash và stretch) và nhanh chậm theo lực hút. Mình vẽ chuỗi dưới đây bằng code để mọi khung cùng kích thước 320 x 320 px:

8 khung hình cho một nhịp bóng nảy, có co giãn khi chạm đất và khi bay nhanh. Hình do ColorME tự vẽ bằng code.

1. Khung 1, chạm đất: bóng bẹp ra theo chiều ngang, bóng đổ to và đậm nhất.
2. Khung 2, vừa bật lên: bóng kéo dài theo chiều dọc vì đang bay nhanh.
3. Khung 3 và 4: bóng tròn lại, càng lên cao càng chậm, khoảng cách giữa hai khung ngắn dần.
4. Khung 5, đỉnh: bóng tròn và gần như đứng yên, bóng đổ nhỏ và mờ nhất.
5. Khung 6 đến 8: bóng rơi xuống, nhanh dần, khung 8 lại kéo dài trước khi chạm đất và quay về khung 1.

Xếp các khung cạnh nhau để kiểm tra chuyển động

Đặt 8 khung cạnh nhau để thấy đường đi: các vị trí gần nhau ở đỉnh, xa nhau gần mặt đất.

Khi đặt các khung cạnh nhau (giống chế độ onion skin trong phần mềm vẽ hoạt hình), bạn thấy rõ đường đi của bóng: các vị trí gần nhau ở trên đỉnh, xa nhau ở gần mặt đất. Chính khoảng cách này quyết định cảm giác nặng nhẹ và nhanh chậm. Nếu bóng trông "lơ lửng", thường là do khoảng cách các khung đều nhau quá. Bài 12 nguyên tắc chuyển động trong animation nói kỹ hơn về squash và stretch, nhanh dần và chậm dần.

Bao nhiêu khung là đủ? Tính theo fps

Cùng 8 khung, một nhịp nảy dài 1 giây ở 8 fps, khoảng 0,67 giây ở 12 fps, khoảng 0,33 giây ở 24 fps. Số liệu tính bằng máy.

Thời gian của một chuyển động bằng số khung chia cho fps. Với chuỗi 8 khung: ở 8 fps một nhịp nảy dài 1 giây, ở 12 fps dài khoảng 0,67 giây, ở 24 fps chỉ còn khoảng 0,33 giây. Muốn chậm lại mà vẫn mượt, bạn cần vẽ thêm khung chứ không chỉ giảm fps. Với hoạt hình vẽ tay, nhiều người dùng 12 khung một giây để đỡ công vẽ mà vẫn đủ mượt; đây là cách làm thường gặp, không phải quy tắc bắt buộc.

Ghép các khung thành sprite sheet cho game và web

Khi chuyển động đã ổn, bạn có thể ghép các khung thành một sprite sheet để dùng trong game 2D hoặc hiệu ứng web. Trang công cụ Cắt & ghép sprite sheet định nghĩa: "Sprite sheet là một ảnh lớn chứa nhiều khung hình xếp theo lưới, dùng cho hoạt ảnh trong game 2D, web animation và hiệu ứng CSS."

1. Mở công cụ, chọn chế độ Ghép sheet.
2. Tải các khung lên theo đúng thứ tự (mình dùng 8 file PNG nền trong suốt).
3. Chỉnh số cột và khoảng cách nếu cần, rồi tải sheet PNG và file JSON.

Công cụ Cắt & ghép sprite sheet ghép 8 khung thành sheet 3 x 3, 960 x 960 px. Ảnh chụp màn hình và file thật, 18/10/2026.

Với 8 khung 320 x 320 px, công cụ báo "8 ảnh · lưới 3×3 · mỗi ô 320×320px · sheet 960×960px": sheet có 9 ô, ô cuối để trống. Trang công cụ ghi về file đi kèm: "JSON ghi vị trí, kích thước từng khung và tốc độ khung hình, giúp lập trình viên hoặc game engine đọc sheet mà không phải đo tay." Và về chi phí: "Có. Công cụ cắt và ghép sprite sheet của ColorME miễn phí, không cần đăng nhập và không gắn watermark."

Mẹo từ trang công cụ: "Giữ các khung cùng kích thước, cắt sát nhân vật, để khoảng cách nhỏ giữa các khung và dùng số khung vừa đủ, thường 8 đến 12 khung là đủ mượt cho một động tác." Về quyền riêng tư: "Khi xử lý thì không: ảnh được xử lý ngay trên trình duyệt của bạn, không gửi lên máy chủ. Chỉ khi bạn đã đăng nhập, file kết quả bạn tải về mới được lưu vào mục Lịch sử riêng của bạn và tự xoá sau 180 ngày."

Bắt đầu học hoạt hình từng khung thế nào?

• Bắt đầu bằng bài tập đơn giản: bóng nảy, con lắc, lá rơi. Chỉ một vật, ít khung, dễ thấy lỗi.
• Vẽ khung chính trước: vị trí chạm đất và đỉnh, rồi mới vẽ các khung ở giữa.
• Luôn bật onion skin khi vẽ để so với khung trước và sau.
• Phát thử thường xuyên: chuyển động chỉ đúng khi nhìn nó chạy, không phải khi nhìn từng khung.
• Chọn phần mềm phù hợp: xem danh sách trong bài 8 phần mềm làm phim hoạt hình.

Câu hỏi thường gặp

Frame by frame animation là gì?

Là kỹ thuật làm hoạt hình bằng cách vẽ từng khung hình riêng, mỗi khung khác khung trước một chút, rồi phát liên tiếp để tạo chuyển động.

Hoạt hình từng khung cần bao nhiêu khung một giây?

Tuỳ độ mượt bạn cần. Thời gian chuyển động bằng số khung chia fps; ví dụ 8 khung ở 12 fps dài khoảng 0,67 giây. Nhiều người vẽ tay dùng khoảng 12 khung một giây.

Frame by frame khác keyframe thế nào?

Frame by frame là tự vẽ mọi khung. Keyframe là chỉ đặt vài khung chính, phần mềm tự tính các khung ở giữa.

Sprite sheet là gì?

Sprite sheet là một ảnh lớn chứa nhiều khung hình xếp theo lưới, dùng cho hoạt ảnh trong game 2D, web animation và hiệu ứng CSS.

Người mới nên tập hoạt hình từng khung bằng bài gì?

Quả bóng nảy là bài tập kinh điển: chỉ một vật, ít khung, nhưng luyện được co giãn và nhanh chậm, hai nguyên tắc quan trọng nhất.