Hoạt hình CSS3 - Tạo hiệu ứng thoát với hiệu ứng thoát bằng cách sử dụng đường cong Bezier

Bạn có biết rằng biến đổi hình học được thêm vào các phần tử HTML với biến đổiThuộc tính CSS như tỷ lệ, độ nghiêng và xoay có thể được làm động? Họ có thể được hoạt hình bằng cách sử dụng quá độ tài sản và @keyframes hình ảnh động, nhưng điều tuyệt vời hơn nữa là sự biến đổi hoạt hình có thể được đưa lên một mức độ cao với việc thêm một chút hiệu ứng nảy, sử dụng khối-bezier () chức năng thời gian.

Tóm lại, khối-bezier () (trong CSS) là một chức năng thời gian cho quá trình chuyển đổi. Nó chỉ định tốc độ của quá trình chuyển đổi, và trong số những thứ khác, nó cũng có thể được sử dụng để tạo hiệu ứng nảy trong hình ảnh động.

Trong bài viết này, đầu tiên chúng ta sẽ tạo một hình ảnh động chuyển đổi đơn giản mà sau này chúng ta thêm một khối-bezier () chức năng thời gian. Ở cuối hướng dẫn này, bạn sẽ hiểu cách tạo một hình ảnh động sử dụng cả hiệu ứng quạt và hiệu ứng thoát. Đây là kết quả cuối cùng (bấm vào để xem hiệu quả).

Bản demo được lấy cảm hứng từ bức ảnh Dribbble tuyệt đẹp này của Christopher Jones về một điểm đánh dấu vị trí hoạt hình.

1. Tạo lá

Hình dạng của điểm đánh dấu vị trí được tạo thành từ năm lá (hãy gọi chúng). Để tạo ra hình bầu dục của một chiếc lá, hãy sử dụng bán kính biên giới Thuộc tính CSS. Các bán kính biên giới của một góc duy nhất là tạo thành từ hai bán kính, ngang và dọc, như hình dưới đây.

Các bán kính biên giới tài sản có nhiều cú pháp khác nhau. Chúng tôi sẽ sử dụng một cái phức tạp hơn cho hình dạng của điểm đánh dấu:

 bán kính đường viền: htl htr hbr hbl / vtl vtr vbr vbl; 

Trong cú pháp này, bán kính ngang và dọc được nhóm lại với nhau; h & v đại diện cho bán kính ngang và dọc, và t, tôi, b & r đại diện cho các góc trên cùng, bên trái, dưới cùng và bên phải. Ví dụ, vbl là viết tắt của bán kính dọc của góc dưới bên trái.

Nếu bạn cho chỉ một giá trị đối với mặt ngang hoặc mặt đứng, giá trị đó sẽ được sao chép sang tất cả các bán kính ngang hoặc dọc khác của trình duyệt.

Đến tạo hình bầu dục thẳng đứng, giữ bán kính ngang tại 50% cho tất cả các góc, và điều chỉnh các góc thẳng đứng, cho đến khi nhìn thấy hình dạng mong muốn. Các mặt ngang sẽ chỉ sử dụng một giá trị: 50%.

Các bán kính dọc các góc trên cùng bên trái và trên cùng bên phải sẽ là 30%, trong khi các góc dưới bên trái và dưới cùng bên phải sẽ sử dụng 70% giá trị.

HTML

CSS

.pinStarLeaf width: 60px; chiều cao: 120px; bán kính biên giới: 50% / 30% 30% 70% 70%; màu nền: # B8F0F5; 

2. Nhân lá

Vì điểm đánh dấu sẽ hiển thị năm lá, chúng tôi tạo thêm bốn bản sao của chiếc lá trong các màu sắc khác nhau và với vị trí tuyệt đối để xếp chúng lên nhau.

HTML

CSS

#pinStarWrapper width: 300px; chiều cao: 300px; vị trí: tương đối;  .pinStarLeaf width: 60px; chiều cao: 120px; vị trí: tuyệt đối; bán kính biên giới: 50% / 30% 30% 70% 70%; trái: 0; phải: 0; đầu trang: 0; đáy: 0; lề: tự động; độ mờ đục: .5;  .pinStarLeaf: nth-of-type (1) màu nền: # B8F0F5;  .pinStarLeaf: nth-of-type (2) màu nền: # 9CF3DC;  .pinStarLeaf: nth-of-type (3) màu nền: # 94F3B0;  .pinStarLeaf: nth-of-type (4) màu nền: # D2F8A1;  .pinStarLeaf: nth-of-type (5) màu nền: # F3EDA2;  

3. Chụp sự kiện Click & Cải thiện thẩm mỹ

Hãy thêm một hộp kiểm với #pinStarCenterChkBox định danh để nắm bắt sự kiện nhấp chuột. Khi hộp kiểm được chọn, các lá sẽ quạt ra (xoay). Chúng ta cũng cần thêm một vòng tròn trắng với #pinStarCenter định danh cho thẩm mỹ. Nó sẽ được định vị trên đỉnh của điểm đánh dấu và nó sẽ là phần trung tâm của điểm đánh dấu vị trí.

HTML

Chúng tôi đặt hộp kiểm trước và vòng tròn màu trắng sau, lá:

CSS

Đầu tiên, chúng tôi đặt các kiểu cơ bản cho hộp kiểm và vòng tròn che phủ:

 #pinStarCenter, #pinStarCenterChkBox width: 45px; chiều cao: 50px; vị trí: tuyệt đối; trái: 0; phải: 0; trên cùng: -60px; đáy: 0; lề: tự động; màu nền: #fff; bán kính biên giới: 50%; con trỏ: con trỏ;  #pinStarCenter, .pinStarLeaf con trỏ sự kiện: none;  #pinStarCenter> input [type = "hộp kiểm"] width: 100%; chiều cao: 100%; con trỏ: con trỏ;  

Vì mỗi lá sẽ xoay dọc theo trục z ở các góc độ khác nhau, chúng ta cần thiết lập biến đổi: rotationz (); tài sản phù hợp, để tạo hình ngôi sao. Chúng tôi cũng áp dụng quá độ bất động sản cho hiệu ứng xoay (chính xác hơn là chúng tôi sử dụng chuyển tiếp: biến đổi tuyến tính 1s quy tắc cho lá).

 #pinStarCenterChkBox: đã kiểm tra ~ .pinStarLeaf quá trình chuyển đổi: biến đổi 1s tuyến tính;  #pinStarCenterChkBox: đã kiểm tra ~ .pinStarLeaf: nth-of-type (5) Transform: rotationz (35deg);  #pinStarCenterChkBox: đã kiểm tra ~ .pinStarLeaf: nth-of-type (4) Transform: rotationz (105deg);  #pinStarCenterChkBox: đã kiểm tra ~ .pinStarLeaf: nth-of-type (3) Transform: rotationz (180deg);  #pinStarCenterChkBox: đã kiểm tra ~ .pinStarLeaf: nth-of-type (2) Transform: rotationz (255deg);  #pinStarCenterChkBox: đã kiểm tra ~ .pinStarLeaf: nth-of-type (1) Transform: rotationz (325deg);  

Nếu bạn có một cái nhìn về CSS ở trên, bạn có thể thấy từ sự hiện diện của #pinStarCenterChkBox: đã kiểm tra ~ bộ chọn anh chị em chung mà chúng tôi chỉ thêm quá độ và biến đổi tính chất khi hộp kiểm được chọn (khi người dùng nhấp vào điểm đánh dấu).

4. Sửa đổi Trung tâm Xoay

Theo mặc định, trung tâm của vòng quay được định vị ở trung tâm của phần tử xoay, trong trường hợp của chúng tôi, ở trung tâm của lá. Chúng ta cần di chuyển trung tâm của sự biến đổi đến đầu bên trong của lá. Chúng ta có thể làm điều này bằng cách sử dụng biến đổi nguồn gốc Thuộc tính CSS mà thay đổi vị trí của các yếu tố biến đổi.

Để làm cho hiệu ứng xoay vòng hoạt động chính xác, hãy thêm hai quy tắc sau vào .pinstarLeaf bộ chọn trong tệp CSS của chúng tôi:

 .pinStarLeaf Transform-origin: 30px 30px; chuyển tiếp: biến đổi tuyến tính 1s;  

Chúng ta hãy xem fan hâm mộ của chúng ta hoạt hình - tại thời điểm này, chưa có hiệu ứng thoát. Nhấp vào vòng tròn màu trắng, trên đầu điểm đánh dấu.

Hiểu cách hoạt động của ubic-Bezier ()

Bây giờ, để thêm hiệu ứng thoát, chúng ta cần thay thế tuyến tính chức năng thời gian với khối-bezier () bên trong quá độ khai báo trong tệp CSS của chúng tôi.

Nhưng trước tiên, hãy hiểu logic đằng sau khối-bezier () chức năng thời gian để bạn có thể dễ dàng hiểu được hiệu ứng nảy.

Cú pháp cho khối-bezier () chức năng là như sau, d và t là khoảng cách và thời gian, và giá trị của chúng thường nằm trong khoảng từ 0 đến 1:

khối-bezier (t1, d1, t2, d2)

Mặc dù giải thích CSS khối-bezier () về khoảng cách và thời gian không chính xác, việc hiểu nó theo cách này dễ dàng hơn nhiều.

Giả sử có một hộp di chuyển từ điểm A đến B trong 6 giây. Hãy sử dụng như sau khối-bezier () chức năng thời gian cho quá trình chuyển đổi với t1 = 0 và d1 = 1 giá trị.

 / * t1 = 0, d1 = 1, t2 = 0, d2 = 0 * / cub-bezier (0,1,0,0) 

Gần như không có thời gian, hộp di chuyển từ A đến giữa điểm và dành thời gian còn lại để đến B.

Hãy thử chuyển đổi tương tự với các giá trị t1 = 1 và d1 = 0.

 / * t1 = 1, d1 = 0, t2 = 0, d2 = 0 * / cub-bezier (1,0,0,0) 

Trong ba giây đầu tiên, chiếc hộp không di chuyển nhiều và sau đó nó gần như nhảy đến điểm giữa và bắt đầu di chuyển đều đặn về phía B.

Bạn có thể thấy, d1 kiểm soát khoảng cách giữa A & điểm giữa, và t1 các cần có thời gian để đạt đến điểm giữa từ A.

Hãy sử dụng d2 và t2 hiện nay. Cả hai t1 và d1 sẽ là 1, và t2 = 1 và d2 = 0.

 / * t1 = 1, d1 = 1, t2 = 0, d2 = 1 * / cub-bezier (1,1,0,1) 

Hộp di chuyển gần một nửa trong 3 giây (do t1 = 1, d1 = 1) và trong thời gian ngắn, nó nhảy đến điểm B.

Ví dụ cuối cùng hoán đổi các giá trị trước đó của t2 và d2:

 / * t1 = 1, d1 = 1, t2 = 1, d2 = 0 * / cub-bezier (1,1,1,0) 

Hộp di chuyển gần một nửa trong 3 giây (do t1 = 1, d1 = 1), sau đó thêm 3 giây nữa sẽ không di chuyển nhiều trước khi nhảy đến điểm B.

Những ví dụ này cho thấy rằng d2 và t2 kiểm soát khoảng cách và thời gian cần thiết để hộp đi từ điểm giữa đến điểm B.

Mặc dù bạn có thể không cần lời giải thích dài (nhưng thưa thớt) này về khối-bezier () tại thời điểm này, tôi nghĩ nó sẽ giúp bạn hiểu rõ hơn về chức năng này. Bây giờ, sự nảy lên ở đâu trong tất cả những điều này?

5. Thêm hiệu ứng Bounce với hình khối Bezier ()

Các các thông số quan trọng cho hiệu ứng nảy là khoảng cách, d1 và d2. Một d1 giá trị của ít hơn 1 lấy cái hộp phía sau điểm A trước khi tiến tới B khi bắt đầu hoạt hình.

Một d2 giá trị của nhiều hơn 1 lấy cái hộp ngoài điểm B trước khi trở về nghỉ ngơi tại B ở cuối hoạt hình. Do đó hiệu ứng nảy qua lại.

Bây giờ tôi sẽ thêm khối-bezier () các giá trị trực tiếp đến bản demo của chúng tôi thay cho trước đây tuyến tính giá trị của quá độ tài sản, và cho bạn xem kết quả.

 #pinStarCenterChkBox: đã kiểm tra ~ .pinStarLeaf quá trình chuyển đổi: biến đổi 1s cub-bezier (.8, -. 5, .2,1.4);  

Đây là kết quả cuối cùng, một hình ảnh động chỉ dành cho người hâm mộ chỉ có CSS ​​với hiệu ứng thoát:

Để so sánh và hiểu rõ hơn về hiệu ứng thoát, đây là cách khối-bezier () giá trị của hình ảnh động hoạt động khi nó được áp dụng cho hộp ví dụ của chúng tôi: