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 ảnh động trên web: bằng CSS và JavaScript. Bạn nên chọn loại nào phụ thuộc vào các phần phụ thuộc khác của dự án và loại hiệu ứng mà bạn đang cố gắng đạt được.

Tóm tắt

Sử dụng ảnh động CSS cho các hiệu ứng chuyển đổi "một lần" đơn giản hơn, chẳng hạn như bật/tắt trạng thái thành phần trên giao diện người dùng.
Sử dụng hoạt ảnh JavaScript khi bạn muốn có các hiệu ứng nâng cao như bật lên, dừng, tạm dừng, tua lại hoặc làm chậm.
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 một khung hiện đại mà bạn cảm thấy thoải mái.

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

Sử dụng CSS khi bạn có các trạng thái nhỏ hơn, độc lập cho các thành phần trên giao diện người dùng. Hiệu ứng chuyển đổi và ảnh động CSS rất phù hợp để đưa trình đơn điều hướng vào từ bên cạnh hoặc hiển thị chú giải công cụ. Bạn có thể sử dụng JavaScript để kiểm soát các trạng thái, nhưng bản thân ảnh động sẽ nằm trong CSS.
Sử dụng JavaScript khi bạn cần kiểm soát đáng kể đối với ảnh động. Web Animations API là 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. Điều 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 hoạt ảnh.
Sử dụng trực tiếp requestAnimationFrame khi bạn muốn điều phối 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 một 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ể thấy thuận tiện hơn khi sử dụng phương thức đó cho ảnh động của mình.

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

Tạo ảnh động bằng CSS là cách đơn giản nhất để tạo chuyển động 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 đặt để 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

Ngoài thời lượng của hiệu ứng chuyển đổi, bạn có thể chọn easing (tốc độ chuyển đổi). Về cơ bản, đây là cảm giác mà ảnh động mang lại. Để biết thêm thông tin về hiệu ứng làm dịu, hãy xem hướng dẫn Kiến thức cơ bản về hiệu ứng làm dịu.

Nếu tạo các lớp CSS riêng biệt để quản lý ảnh động như trong đoạn mã trên, 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 giúp ứng dụng của bạn cân bằng hơn. 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 chọn cách này, bạn có thể nghe các sự kiện transitionend trên phần tử, nhưng chỉ khi bạn có thể bỏ qua tính năng hỗ trợ cho các phiên bản Internet Explorer cũ; phiên bản 10 là phiên bản đầu tiên hỗ trợ các sự kiện này. Tất cả trình duyệt khác đã hỗ trợ sự kiện này trong một thời gian.

JavaScript cần thiết để theo dõi kết thúc quá trình chuyển đổi 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 hiệu ứng chuyển đổi CSS, bạn cũng có thể sử dụng ảnh động CSS để có nhiều quyền kiểm soát hơn đối với các khung hình chính, thời lượng và số lần lặp lại của ảnh động riêng lẻ.

Ví dụ: bạn có thể tạo ảnh động cho hộp theo cách tương tự với hiệu ứng chuyển đổi, nhưng tạo ảnh động mà không cần bất kỳ hoạt động tương tác nào của người dùng như nhấp chuột và lặp lại vô hạn. Bạn cũng có thể thay đổi nhiều tài sản 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 chí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 bắt buộc.

Nếu muốn ảnh động CSS hoạt động trên các trình duyệt cũ, bạn cần thêm tiền tố của nhà cung cấp. Có nhiều công cụ có thể giúp bạn tạo các phiên bản CSS có tiền tố mà bạn cần, cho phép bạn viết phiên bản không 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 viết hiệu ứng chuyển đổi hoặc ảnh động CSS, việc tạo ảnh động bằng JavaScript phức tạp hơn, nhưng thường mang lại cho nhà phát triển nhiều quyền hơn đáng kể. Bạn có thể sử dụng Web Animations API để 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 là bắt buộc vì bạn viết ảnh động này cùng dòng với mã của mình. Bạn cũng có thể đóng gói chúng bên trong các đối tượng khác. Dưới đây là mã JavaScript mà bạn cần viết để tạo lại hiệu ứng chuyển đổi CSS được mô tả ở trên:

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 muốn đối tượng của mình vẫn ở vị trí mà đối tượng đã chuyển đến thì bạn nên sửa đổi kiểu cơ bản của đối tượng khi ảnh động hoàn tất, theo mẫu của chúng ta.

Thử nào

Web Animations API 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ợ, có một 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ử ở mọi bước. Tức là bạn có thể làm chậm ảnh động, tạm dừng, dừng, đảo ngược và thao tác với 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 một cách thích hợp.