Hướng dẫn how to rotate an image continuously in javascript - cách xoay một hình ảnh liên tục trong javascript

Trong hướng dẫn nhanh này, bạn sẽ học cách liên tục xoay hình ảnh bằng thuộc tính hoạt hình CSS.

Đầu tiên, chúng ta cần một số đánh dấu HTML với hình ảnh và một số thuộc tính:

<img
  src="https://upload.wikimedia.org/wikipedia/en/7/77/EricCartman.png"
  class="rotate linear infinite"
  width="150"
  height="150"
/>

Hình ảnh của bạn sẽ hiển thị như thế này:

Như bạn có thể thấy phần tử hình ảnh của chúng tôi có ba lớp, rotate,

.rotating {
   animation: rotate 1s infinite;
}

@keyframes rotate {
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
}

.rotating {
   animation: rotate 1s infinite;
}

@keyframes rotate {
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
}

Trước tiên, hãy để Khai báo Khối mã

.rotating {
   animation: rotate 1s infinite;
}

@keyframes rotate {
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
}

.rotate {
  animation: rotation 2s;
}

Sẽ không có gì xảy ra, bởi vì chúng ta cần xác định chức năng xoay của thuộc tính hoạt hình. Thêm quy tắc KeyFrame CSS này vào bảng kiểu của bạn:

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

Bây giờ nếu bạn tải lại tab Trình duyệt của mình, bạn sẽ thấy hình ảnh của bạn xoay một lần duy nhất trong hơn 2 giây (

.rotating {
   animation: rotate 1s infinite;
}

@keyframes rotate {
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
}

.rotating {
   animation: rotate 1s infinite;
}

@keyframes rotate {
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
}

.rotating {
   animation: rotate 1s infinite;
}

@keyframes rotate {
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
}

Thêm khối khai báo

.rotating {
   animation: rotate 1s infinite;
}

@keyframes rotate {
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
}

.linear {
  animation-timing-function: linear;
}

Tải lại tab Trình duyệt của bạn và bạn sẽ thấy rằng hình ảnh của bạn hiện đang quay với tốc độ phù hợp từ đầu đến cuối.

Cuối cùng, hãy để Lôi làm cho hình ảnh của chúng tôi xoay vô hạn bằng cách khai báo khối mã

.rotating {
   animation: rotate 1s infinite;
}

@keyframes rotate {
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
}

.infinite {
  animation-iteration-count: infinite;
}

Và voila, bây giờ bạn có một hình ảnh quay vô hạn/liên tục với đường cong tốc độ hoạt hình tuyến tính.

Kiểm tra mã hoàn chỉnh trên Codepen

Lưu ý: Chúng tôi có thể đã khai báo tất cả các thuộc tính hoạt hình của chúng tôi trong một dòng duy nhất và một lớp duy nhất, như thế này:

.rotate-image {
  animation: rotation 2s linear infinite;
}

Trên đây tiết kiệm rất nhiều mã, nhưng đối với việc học/giảng dạy, tôi thích phá vỡ mọi thứ cho các vết cắn nhỏ hơn, bởi vì giúp dễ hiểu cách các thành phần riêng lẻ hoạt động cùng nhau.

Có nhiều đường cong hình ảnh động bên cạnh

.rotating {
   animation: rotate 1s infinite;
}

@keyframes rotate {
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
}

.rotating {
   animation: rotate 1s infinite;
}

@keyframes rotate {
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
}

document.querySelector("#rotate").addEventListener('click', function() {
   document.querySelector("#sample").classList.add('rotating')
});