Hướng dẫn cubic-bezier trong css

Tôi muốn cung cấp một lời giải thích khác về hàm bậc ba bởi một người mới hiểu nó hoạt động như thế nào. Tôi đã gặp một số rắc rối với nó khi xem qua các hướng dẫn trên  https://freecodecamp.org . Tôi nắm được nó sau khi đọc câu trả lời trước của eirenaios và sử dụng trình xây dựng khối-bezier.

Đăng trên blog của tôi

1. Đường cong Bezier dựa trên bốn điểm: P0, P1, P2 và P3. P0 được đặt theo mặc định thành (0, 0) và P3 được đặt theo mặc định thành (1, 1).

2. Đường cong sẽ kéo dài khác nhau tùy thuộc vào tọa độ bạn cung cấp cho các điểm P1 và P2.

    Ví dụ Cubic-bezier

Trong ví dụ trên P1 được đặt thành (0,1, 0,1) và P2 được đặt thành (1, 0). Tốc độ của hoạt ảnh phụ thuộc vào mức độ thay đổi của trạng thái trong một khoảng thời gian nhất định. Trong ví dụ này, hoạt ảnh sẽ nhanh hơn theo thời gian. Trong nửa thời gian đầu tiên được sử dụng cho hoạt ảnh, nó sẽ bao phủ khoảng 15% khoảng cách (khi Thời gian = 0,5, Trạng thái ~ 0,15). Nó sẽ bao phủ 85% quãng đường còn lại trong hiệp hai. 

Vui lòng kiểm tra ví dụ trong jsfiddle để xem hoạt ảnh hoạt động như thế nào trong thực tế: hoạt ảnh bóng khối-bezier

HTML:

CSS:

.ball{
  background: red;
  border-radius: 50%;
  position: fixed;
  width: 50px;
  height: 50px;
  top: 50%;
  animation-name: bounce;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(.10, .10, 1, 0);
}

@keyframes bounce {
  0% {
    left: 0%;
  }
  100% {
    left: 100%;
  }
}

Trong ví dụ, quả bóng di chuyển từ mép trái của màn hình sang mép phải trong thời gian 4 giây. Các khung hình chính ở đó để đặt nơi hoạt ảnh sẽ bắt đầu và kết thúc, animation-timing-function: square-bezier () để đặt tốc độ của hoạt ảnh tại các thời điểm khác nhau.

4 hữu ích 0 bình luận chia sẻ

Hiệu ứng chuyển động, chuyển đổi

CSS3 tạo ra hiệu ứng chuyển đổi bằng cách thay đổi thuộc tính từ giá trị này sang giá trị khác trong một khoảng thời gian. Với các tham số:

Nội dung chính

• Hiệu ứng chuyển động, chuyển đổi
• transition-timing-function
• Xoay phần tử với rotate
• Dịch chuyển phần tử translate()
• Nghiêng phần tử skew()
• Thu phóng phần tử scale()
• Kết hợp nhiều hiệu ứng
• Video liên quan

• transition-property chỉ ra thuộc tính cần chuyển đổi
• transition-duration khoảng thời gian chuyển đổi diễn ra
• transition-timing-function bước thay đổi
• transition-delay khoảng thời gian dừng cho mỗi hiệu ứng chuyển đổi

Ví dụ sử dụng thuộc tính transition, hiệu ứng xảy ra trong 5s, với transition-timing-function là ease-in cho biết bắt đầu chậm rồi nhanh dần

transition: transform 5s ease-in;

Hiệu ứng chuyển đổi có thể sử dụng cho nhiều thuộc tính CSS: background-color, width, height, opacity ...

Ví dụ sau tạo ra hiệu ứng thay đổi chiều rộng box khi chuột di vào, ra phần tử. Hiệu ứng diễn ra trong 3s

transition-timing-function

Thuộc tính này chỉ ra tốc độ thay đổi khi chuyển đổi

• ease bắt đầu chậm, rồi tăng dần (mặc định)
• ease-in chậm, tăng dần, dừng đột ngột
• ease-out chậm dần đều
• ease-in-out giống ease nhưng mịn hơn
• linear thay đổi đều đều

Ngoài ra có hàm cubic-bezier() để định nghĩa theo hàm đồ thị hàm cubic-bezier, ví dụ

transition-timing-function: cubic-bezier(0,0,1,1);

Xoay phần tử với rotate

Ví dụ sau xoay phần tử đi 10 30 độ

rotate(45deg)

Mặc định gốc quay phần tử là ở giữa phần tử, gốc này có thể thiết lập bằng thuộc tính transform-origin

Mặc định thì là transform-origin: 50% 50% chính là giữa phần tử

Ví dụ thay gốc quay là ở góc thứ nhất: transform-origin: 0% 0% hoặc transform-origin: top left;

Dịch chuyển phần tử translate()

Phương thức translate(x, y) để thay đổi vị trí phần tử thêm một đoạn x, y

Nghiêng phần tử skew()

Nghiêng phần tử sử dụng phương thức skew(x-angle,y-angle)

Nghiêng theo X 45 độ

Thu phóng phần tử scale()

Zoom phần tử sử dụng phương thức scale(x-scale,y-scale)

Zoom: x 0.7, y.0.7

Zoom: x 1.1 y 1.7

Kết hợp nhiều hiệu ứng

Ví dụ vừa xoay, vừa dịch chuyển

rotate(45deg) translate(100px);

Mục lục bài viết

Hiệu ứng chuyển độngXoay phần tửDịch chuyển phần tửNghiêng phần tửThu phóng phần tử

ĐĂNG KÝ KÊNH, XEM CÁC VIDEO TRÊN XUANTHULAB