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 chọn phương pháp nào thực sự phụ thuộc vào các phần phụ thuộc khác của dự án cũng như 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 tính năng "một lần" đơn giản hơn như bật/tắt các 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 phù hợp với bạn.

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 CSS và hoạt ảnh lý tưởng để đưa trình đơn điều hướng vào từ bên cạnh hoặc hiển thị chú thích. Cuối cùng, 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 của bạn.
Sử dụng JavaScript khi bạn cần kiểm soát đáng kể ảnh động của mình. Web Animations API là cách tiếp cận 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 requestAnimationFrame ngay khi bạn muốn tự tay điều phối toàn bộ cảnh. Đây là 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ẽ trê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ì nhìn chung, 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 để di 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 hành động mà 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 thực hiện việc này bằng cách sử dụng hiệu ứng chuyển đổi CSS được đặt thành 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, còn có một số tuỳ chọn về chế độ, về cơ bản là cảm giác của ảnh động. Để biết thêm thông tin về tốc độ, hãy xem hướng dẫn Kiến thức cơ bản về tốc độ.

Nếu, như trong đoạn mã trên, bạn tạo các lớp CSS riêng biệt để 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ẽ tạo ra sự cân bằng phù hợp cho các ứng dụng của bạ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 đi theo hướng này, bạn có thể nghe 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ợ cho 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ả trình duyệt khác đã hỗ trợ sự kiện này 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 từng khung hình chính của từng ảnh động, thời lượng và lần lặp lại.

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 để nó tạo hiệu ứng động mà không cần bất kỳ tương tác nào của người dùng như nhấp chuột và với số lần 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 ảnh động một cách độc lập với phần tử mục tiêu, đồng thời sử dụng thuộc tính animation-name để chọn ảnh động cần thiết.

Nếu muốn ảnh động 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ố của nhà cung cấp. 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 ghi phiên bản chưa có tiền tố trong các tệp nguồn của mình.

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 sẽ phức tạp hơn nhiều so với việc viết hiệu ứng chuyển đổi hoặc ảnh động CSS, nhưng cách này thường cung cấp cho nhà phát triển nhiều sức mạnh hơn đáng kể. Bạn có thể 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 đố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 chúng cùng dòng trong mã. Bạn cũng có thể đóng gói chúng trong các đối tượng khác. Dưới đây là JavaScript mà bạn cần phải ghi để 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 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. Ngôn ngữ này được hỗ trợ tự nhiê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ợ, bạn có thể sử dụng tệp polyfill.

Với hoạt ảnh JavaScript, bạn toàn quyền kiểm soát các kiểu của 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 đến đối tượng vì bạn có thể đóng gói hành vi của mình một cách chính xác.