Bảng Tổng Hợp Hiệu Ứng Chuyển Động (Easing)
Các hàm easing xác định tỉ lệ của một tham số biến đổi theo thời gian.
Các vật thể trong thực tế không bao giờ khởi đầu hay kết thúc một cách đột ngột, và cũng không di chuyển với tốc độ cố định. Khi bạn mở một ngăn kéo, ban đầu ta kéo nó nhanh, sau đó chậm dần cho đến khi mở ra hoàn toàn. Khi thả một vật gì đó xuống sàn nhà, nó sẽ bật ngược lại với độ cao thấp hơn, và cứ bật như vậy, mỗi lần độ cao lại giảm đi cho tới khi nó đứng im.
Trang web này sẽ giúp bạn chọn ra hàm easing phù hợp để diễn tả vật thể mà bạn cần.
Mã nguồn mở
Hỗ trợ dịch trang này sang ngôn ngữ của bạn
x
t
CSS
Trong CSS, ta có thể sử dụng thuộc tính transition và animation để xác định easing.
.block { transition: transform 0.6s ; }
Tuỳ chỉnh tại cubic-bezier.com.
Trong CSS, chức năng này có thể được thực hiện với
@keyframes:Kích thước
Xin chờ...
Vị trí
Xin chờ...
Độ trong suốt
Xin chờ...
PostCSS
Miêu tả một hàm ease trong PostCSS dễ dàng hơn nhiều. Bạn có thể lấy thông số transition từ plugin postcss-easings.
.block { transition: transform 0.6s ; }
Câu lệnh này được chuyển đổi từ hàm bên trên.
Rất tiếc, hàm gia tốc không được thiết lập với bất kỳ plugin PostCSS nào. Tuy nhiên, vẫn có thể làm được bằng cách sử dụng
@keyframes, xem bên trên.Gradient
Có thể tạo màu gradient với postcss-easing-gradients.
.block { background: linear-gradient( to bottom, #1473e6, , #247b5e ); }
Công thức Toán học
Dưới đây là code được viết bằng TypeScript cho hàm easing này. Biến x thể hiện quá trình chuyển động từ 0 (bắt đầu) cho đến 1 (kết thúc) của animation.
function (x: number): number {
}Dưới đây là code được viết bằng TypeScript cho hàm easing này. Biến x thể hiện quá trình chuyển động từ 0 (bắt đầu) cho đến 1 (kết thúc) của animation.
function (x: number): number {
}Kiểm tra easing để thấy sự thay đổi:
Hàm này:
Hàm này
Hàm tuyến tính:
Hàm tuyến tính