Trang này được dịch bởi Cloud Translation API.

Ảnh động CSS so với JavaScript

Bạn có thể tạo ảnh động bằng CSS hoặc JavaScript. Bạn nên sử dụng công cụ nào và tại sao?

Paul Lewis

Sam Thorogood

Có hai cách chính để tạo hoạt ảnh trên web: bằng CSS và bằng JavaScript. Loại hiệu ứng bạn chọn thực sự phụ thuộc vào các phần phụ thuộc khác của dự án và loại hiệu ứng bạn đang cố gắng đạt được.

Tóm tắt

Sử dụng ảnh động CSS cho hiệu ứng chuyển đổi "một lần" đơn giản hơn, chẳng hạn như bật/tắt các trạng thái của thành phần trên giao diện người dùng.
Sử dụng ảnh động JavaScript khi bạn muốn có các hiệu ứng nâng cao như bật nảy, dừng, tạm dừng, tua lại hoặc giảm tốc độ.
Nếu bạn chọn tạo ảnh động bằng JavaScript, hãy sử dụng API Ảnh động trên web hoặc khung hiện đại mà bạn thấy phù hợp.

Bạn có thể tạo hầu hết các ảnh động cơ bản bằng CSS hoặc JavaScript, nhưng mức độ nỗ lực và thời gian sẽ khác nhau (xem thêm phần Hiệu suất CSS so với JavaScript). Mỗi cách đều có ưu và nhược điểm riêng, nhưng sau đây là những nguyên tắc phù hợp:

Sử dụng CSS khi bạn có các trạng thái nhỏ hơn, độc lập cho các phần tử trên giao diện người dùng. Hiệu ứng chuyển đổi và hoạt ảnh CSS là lựa chọn lý tưởng để hiển thị trình đơn điều hướng từ cạnh bên hoặc hiển thị chú giải công cụ. Bạn có thể sẽ sử dụng JavaScript để kiểm soát trạng thái, nhưng bản thân các ảnh động sẽ nằm trong CSS của bạn.
Sử dụng JavaScript khi bạn cần kiểm soát đáng kể ảnh động. API Ảnh động trên web là một phương pháp dựa trên tiêu chuẩn, hiện có trong hầu hết các trình duyệt hiện đại. API này cung cấp các đối tượng thực, lý tưởng cho các ứng dụng hướng đối tượng phức tạp. JavaScript cũng hữu ích khi bạn cần dừng, tạm dừng, làm chậm hoặc đảo ngược các hoạt ảnh.
Sử dụng trực tiếp requestAnimationFrame khi bạn muốn dàn dựng toàn bộ cảnh theo cách thủ công. Đây là một phương pháp JavaScript nâng cao, nhưng có thể hữu ích nếu bạn đang xây dựng trò chơi hoặc vẽ lên canvas HTML.

Ngoài ra, nếu đã sử dụng khung JavaScript có chức năng ảnh động, chẳng hạn như thông qua phương thức .animate() của jQuery hoặc TweenMax của GreenSock, thì về tổng thể, bạn có thể sử dụng phương thức đó cho ảnh động của mình thuận tiện hơn.

Tạo ảnh động bằng CSS

Tạo ảnh động bằng CSS là cách đơn giản nhất để chuyển nội dung trên màn hình. Phương pháp này được mô tả là khai báo, vì bạn chỉ định những gì bạn muốn xảy ra.

Dưới đây là một số CSS di chuyển phần tử 100px ở cả trục X và Y. Bạn có thể thực hiện việc này bằng cách sử dụng hiệu ứng chuyển đổi CSS được thiết lập để lấy 500ms. Khi bạn thêm lớp move, giá trị transform sẽ thay đổi và quá trình chuyển đổi bắt đầu.

.box {
  transform: translate(0, 0);
  transition: transform 500ms;
}

.box.move {
  transform: translate(100px, 100px);
}

Thử nào

Bên cạnh thời lượng của hiệu ứng chuyển đổi, còn có các tuỳ chọn để tăng tốc, về cơ bản là cảm giác của ảnh động. Để biết thêm thông tin về việc gia tốc, hãy xem hướng dẫn Kiến thức cơ bản về gia tốc.

Nếu như trong đoạn mã trên, bạn tạo các lớp CSS riêng để quản lý ảnh động của mình thì bạn có thể sử dụng JavaScript để bật và tắt từng ảnh động:

box.classList.add('move');

Việc này sẽ giúp các ứng dụng của bạn có sự cân bằng hợp lý. Bạn có thể tập trung vào việc quản lý trạng thái bằng JavaScript và chỉ cần đặt các lớp thích hợp trên các phần tử mục tiêu, để trình duyệt xử lý ảnh động. Nếu đi theo tuyến này, bạn có thể theo dõi các sự kiện transitionend trên phần tử này, nhưng chỉ khi bạn có thể bỏ qua khả năng hỗ trợ các phiên bản Internet Explorer cũ hơn; phiên bản 10 là phiên bản đầu tiên hỗ trợ những sự kiện này. Tất cả các trình duyệt khác đã hỗ trợ sự kiện này trong một thời gian.

JavaScript cần có để theo dõi kết thúc quá trình chuyển đổi sẽ có dạng như sau:

var box = document.querySelector('.box');
box.addEventListener('transitionend', onTransitionEnd, false);

function onTransitionEnd() {
    // Handle the transition finishing.
}

Ngoài việc sử dụng chuyển đổi CSS, bạn cũng có thể sử dụng ảnh động CSS, cho phép bạn kiểm soát nhiều hơn đối với các khung hình động, thời lượng và số lần lặp lại riêng lẻ.

Ví dụ: bạn có thể tạo hiệu ứng động cho hộp theo cách tương tự bằng các hiệu ứng chuyển đổi, nhưng để hộp tạo hiệu ứng mà không cần bất kỳ sự tương tác nào của người dùng như nhấp và lặp lại vô hạn. Bạn cũng có thể thay đổi nhiều thuộc tính cùng một lúc.

.box {
  animation-name: movingBox;

  animation-duration: 1300ms;

  animation-iteration-count: infinite;

  animation-direction: alternate;
}

@keyframes movingBox {
  0% {
    transform: translate(0, 0);
    opacity: 0.3;
  }

  25% {
    opacity: 0.9;
  }

  50% {
    transform: translate(100px, 100px);
    opacity: 0.2;
  }

  100% {
    transform: translate(30px, 30px);
    opacity: 0.8;
  }
}

Thử nào

Với ảnh động CSS, bạn xác định ảnh động độc lập với phần tử mục tiêu và sử dụng thuộc tính animation-name để chọn ảnh động cần thiết.

Nếu bạn muốn hoạt ảnh CSS của mình hoạt động trên các trình duyệt cũ hơn, bạn sẽ cần phải thêm tiền tố nhà cung cấp. Nhiều công cụ có thể giúp bạn tạo các phiên bản có tiền tố của CSS mà bạn cần, cho phép bạn viết phiên bản chưa có tiền tố trong tệp nguồn.

Tạo ảnh động bằng JavaScript và API Ảnh động trên web

So với việc tạo ảnh động bằng JavaScript thì việc tạo ảnh động bằng JavaScript phức tạp hơn so với việc viết các hiệu ứng chuyển đổi hoặc ảnh động CSS, nhưng thường cung cấp cho các nhà phát triển nhiều năng lực hơn đáng kể. Bạn có thể sử dụng API Ảnh động trên web để tạo ảnh động cho các thuộc tính CSS cụ thể hoặc tạo các đối tượng hiệu ứng có thể kết hợp.

Ảnh động JavaScript bắt buộc, vì bạn viết chúng nội dòng như một phần trong mã của bạn. Bạn cũng có thể gói gọn chúng bên trong các đối tượng khác. Dưới đây là JavaScript mà bạn cần viết để tạo lại quá trình chuyển đổi CSS được mô tả trước đó:

var target = document.querySelector('.box');
var player = target.animate([
    {transform: 'translate(0)'},
    {transform: 'translate(100px, 100px)'}
], 500);
player.addEventListener('finish', function() {
    target.style.transform = 'translate(100px, 100px)';
});

Theo mặc định, Ảnh động trên web chỉ sửa đổi cách trình bày của một phần tử. Nếu bạn muốn đối tượng của mình vẫn ở vị trí mà đối tượng đã di chuyển đến thì bạn nên sửa đổi kiểu cơ bản khi ảnh động kết thúc, theo mẫu của chúng tôi.

Thử nào

API Ảnh động trên web là một tiêu chuẩn tương đối mới của W3C. Tính năng này được hỗ trợ sẵn trong hầu hết các trình duyệt hiện đại. Đối với các trình duyệt hiện đại không hỗ trợ tính năng này, bạn cũng có thể dùng tính năng polyfill.

Với ảnh động JavaScript, bạn có toàn quyền kiểm soát kiểu của một phần tử tại mỗi bước. Điều này có nghĩa là bạn có thể làm chậm, tạm dừng, dừng, đảo ngược hoạt ảnh và chỉnh sửa các phần tử khi bạn thấy phù hợp. Điều này đặc biệt hữu ích nếu bạn đang xây dựng các ứng dụng phức tạp hướng đối tượng vì bạn có thể đóng gói hành vi của mình đúng cách.