DEV Community 👩‍💻👨‍💻

Vu Anh Duc
Vu Anh Duc

Posted on

Understanding about animation

Animation là việc làm cho một đối tượng chuyển động hoặc biến đổi theo một quy tắc nào đó.

Trong giao diện người dùng, animation có thể là:

  • di chuyển thành phần từ vị trí này sang vị trí khác
  • thay đổi kích thước của thành phần: phóng to, thu nhỏ
  • thay đổi thuộc tính của thành phần: chuyển màu, trở lên trong suốt, biến mất,....

Các thành phần cơ bản của animation

  • duration: thời gian thực hiện sự biến đổi
  • delay: độ trễ từ khi đối tượng xuất hiện đến khi sự biến đổi bắt đầu
  • direction: hướng của sự biến đổi, từ 0 => 100 hay từ 100 => 0.
  • iteration count: số lần lặp lại sự biến đổi
  • name: tên định danh của sự biến đổi.

Như vậy, Một animation có thể coi giống như 1 đồng hồ đếm thời gian (duration) cho một đối tượng đi từ 0 => 100 hoặc ngược lại (direction), và số vòng lặp mà chiếc đồng hồ này sẽ chạy (interation count).

Tên của animation tham chiếu đến 1 khái niệm khác, gọi là keyframe.

Về cơ bản, keyframe là bộ quy tắc quy định sự biến đổi diễn ra như thế nào: thuộc tính nào bị thay đổi, và thay đổi như nào trong khi sự biến đổi diễn ra.

1 animation được chia ra thành 100 keyframe (từ 0 đến 100), tại mỗi frame, chúng ta có thể chỉ định giá trị của thuộc tính.

Latest comments (0)

Take a look at this:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. 🛠