ภาพเคลื่อนไหว CSS3 - สร้าง Fan-Out พร้อมเอฟเฟกต์ตีกลับโดยใช้ Bezier Curve

คุณรู้หรือเปล่าว่า การแปลงเชิงเรขาคณิต เพิ่มลงในองค์ประกอบ HTML ด้วย แปลงคุณสมบัติ CSS เช่นสเกล, เอียงและหมุนสามารถเคลื่อนไหวได้? พวกเขาสามารถเป็นภาพเคลื่อนไหวโดยใช้ การเปลี่ยนแปลง คุณสมบัติและ @keyframes แอนิเมชั่น แต่สิ่งที่น่าสนใจยิ่งกว่าคือการแปลงภาพเคลื่อนไหวสามารถเพิ่มระดับด้วยการเพิ่มเล็กน้อย ผลการตีกลับ, ใช้ ลูกบาศก์ Bezier () ฟังก์ชั่นจับเวลา.

โดยสังเขป, ลูกบาศก์ Bezier () (ใน CSS) คือ ฟังก์ชั่นจับเวลาสำหรับการเปลี่ยน. มันระบุความเร็วของการเปลี่ยนแปลงและเหนือสิ่งอื่นใดก็สามารถใช้ สร้างผลกระทบใหญ่ในภาพเคลื่อนไหว.

ในโพสต์นี้ก่อนอื่นเราจะไป สร้างภาพเคลื่อนไหวการแปลงอย่างง่าย เพื่อที่เราในภายหลัง เพิ่ม ลูกบาศก์ Bezier () ฟังก์ชั่นจับเวลา. ในตอนท้ายของบทช่วยสอนนี้คุณจะเข้าใจวิธีการสร้างภาพเคลื่อนไหวที่ใช้ ทั้ง fan-out และ effect bounce. นี่คือผลสุดท้าย (คลิกเพื่อดูผล).

ตัวอย่างนี้ได้รับแรงบันดาลใจจาก Dribbble ที่สวยงามโดย Christopher Jones เกี่ยวกับเครื่องหมายบอกตำแหน่งที่เคลื่อนไหว.

1. การสร้างใบ

รูปร่างของเครื่องหมายระบุตำแหน่งประกอบด้วยใบไม้ห้าใบ (เรียกว่าเรียกว่า) เพื่อสร้าง รูปร่างรูปไข่ ของใบไม้ให้ใช้ border-radius คุณสมบัติ CSS border-radius จากมุมเดียวคือ ประกอบด้วยรัศมีสองดวง, แนวนอนและแนวตั้งดังแสดงด้านล่าง.

border-radius property มีไวยากรณ์ที่แตกต่างกัน เราจะใช้อันซับซ้อนสำหรับรูปร่างของเครื่องหมาย:

 เส้นขอบรัศมี: htl htr hbr hbl / vtl vtr vbr vbl; 

ในไวยากรณ์นี้รัศมีแนวนอนและแนวตั้งจะถูกจัดกลุ่มเข้าด้วยกัน ชั่วโมง & โวลต์ แสดงรัศมีแนวนอนและแนวตั้งและ เสื้อ, ล., ข & R เป็นตัวแทนมุมด้านบนซ้ายด้านล่างและมุมขวา ตัวอย่างเช่น, VBL ย่อมาจากรัศมีแนวตั้งของมุมล่างซ้าย.

ถ้าคุณให้ เพียงหนึ่งค่า สำหรับเบราว์เซอร์ทั้งแนวนอนและแนวตั้งค่านั้นจะถูกคัดลอกไปยังเบราว์เซอร์แนวนอนหรือแนวตั้งอื่น ๆ ทั้งหมด.

ไปยัง สร้างรูปร่างรูปไข่ในแนวตั้ง, เก็บรัศมีแนวนอนไว้ที่ 50% สำหรับทุกมุมและปรับแนวตั้งจนกระทั่งเห็นรูปร่างที่ต้องการ ด้านแนวนอน จะใช้ค่าเดียวเท่านั้น: 50%.

รัศมีแนวตั้ง จากมุมบนซ้ายและมุมขวาบนจะเป็น 30%, ในขณะที่มุมล่างซ้ายและขวาล่างจะใช้ 70% ราคา.

HTML

CSS

.pinStarLeaf width: 60px; ความสูง: 120px; รัศมีของขอบ: 50% / 30% 30% 70% 70%; สีพื้นหลัง: # B8F0F5; 

2. การคูณใบ

เนื่องจากเครื่องหมายจะแสดงออกมาห้าใบเราจึงสร้าง ใบไม้อีกสี่ใบ ในสีที่ต่างกันและมีการจัดตำแหน่งที่แน่นอนเพื่อที่จะวางซ้อนกัน.

HTML

CSS

#pinStarWrapper width: 300px; ความสูง: 300px; ตำแหน่ง: ญาติ;  .pinStarLeaf width: 60px; ความสูง: 120px; ตำแหน่ง: สัมบูรณ์; รัศมีของขอบ: 50% / 30% 30% 70% 70%; ซ้าย: 0; ขวา: 0; ด้านบน: 0; ด้านล่าง: 0; ขอบ: อัตโนมัติ; ความทึบ: .5;  .pinStarLeaf: nth-of-type (1) background-color: # B8F0F5;  .pinStarLeaf: nth-of-type (2) background-color: # 9CF3DC;  .pinStarLeaf: nth-of-type (3) background-color: # 94F3B0;  .pinStarLeaf: nth-of-type (4) background-color: # D2F8A1;  .pinStarLeaf: nth-of-type (5) background-color: # F3EDA2;  

3. บันทึกเหตุการณ์การคลิกและการปรับปรุงสุนทรียภาพ

เถอะ เพิ่มช่องทำเครื่องหมาย กับ #pinStarCenterChkBox ตัวระบุเพื่อบันทึกเหตุการณ์คลิก เมื่อเลือกช่องทำเครื่องหมายใบไม้จะพัดออก (หมุน) เรายังต้องเพิ่ม วงกลมสีขาว กับ #pinStarCenter ตัวบ่งชี้เพื่อความสวยงาม มันจะถูกวางตำแหน่งที่ด้านบนของเครื่องหมายและมันจะเป็นชิ้นกลางของเครื่องหมายที่ตั้ง.

HTML

เราวางช่องทำเครื่องหมายก่อนหน้านี้และวงกลมสีขาวหลังจากนั้น:

CSS

อันดับแรกเราตั้งค่ารูปแบบพื้นฐานสำหรับช่องทำเครื่องหมายและวงกลมปิด:

 #pinStarCenter, #pinStarCenterChkBox width: 45px; ความสูง: 50px; ตำแหน่ง: สัมบูรณ์; ซ้าย: 0; ขวา: 0; ด้านบน: -60px; ด้านล่าง: 0; ขอบ: อัตโนมัติ; พื้นหลังสี: #fff; รัศมีของเส้นขอบ: 50%; เคอร์เซอร์: ตัวชี้;  #pinStarCenter, .pinStarLeaf ตัวชี้เหตุการณ์: none;  #pinStarCenter> input [type = "checkbox"] ความกว้าง: 100%; ความสูง: 100%; เคอร์เซอร์: ตัวชี้;  

ขณะที่ใบไม้แต่ละใบจะหมุนตามแนวแกน z ในมุมที่แตกต่าง, เราจำเป็นต้องตั้งค่า แปลงแล้ว: rotatez (); คุณสมบัติตามที่ต้องการ สร้างรูปร่างดาว. นอกจากนี้เรายังใช้ การเปลี่ยนแปลง คุณสมบัติ สำหรับเอฟเฟกต์การหมุน (แม่นยำยิ่งขึ้นเราใช้ การเปลี่ยนแปลง: แปลง 1s เชิงเส้น กฎสำหรับใบ).

 #pinStarCenterChkBox: ทำเครื่องหมาย ~ .pinStarLeaf การเปลี่ยนแปลง: เปลี่ยนรูปแบบเชิงเส้น 1s;  #pinStarCenterChkBox: ทำเครื่องหมาย ~ .pinStarLeaf: nth-of-type (5) transform: rotatez (35deg);  #pinStarCenterChkBox: ทำเครื่องหมาย ~ .pinStarLeaf: nth-of-type (4) transform: rotatez (105deg);  #pinStarCenterChkBox: ทำเครื่องหมาย ~ .pinStarLeaf: nth-of-type (3) transform: rotatez (180deg);  #pinStarCenterChkBox: ทำเครื่องหมาย ~ .pinStarLeaf: nth-of-type (2) transform: rotatez (255deg);  #pinStarCenterChkBox: ทำเครื่องหมาย ~ .pinStarLeaf: nth-of-type (1) transform: rotatez (325deg);  

หากคุณได้ดู CSS ข้างต้นคุณสามารถดูได้จากการปรากฏตัวของ #pinStarCenterChkBox: ทำเครื่องหมายแล้ว ~ ตัวเลือกพี่น้องทั่วไปที่เราเพิ่มเท่านั้น การเปลี่ยนแปลง และ แปลง คุณสมบัติ เมื่อช่องทำเครื่องหมายถูกทำเครื่องหมาย (เมื่อผู้ใช้คลิกที่เครื่องหมาย).

4. แก้ไขจุดกึ่งกลางของการหมุน

โดยค่าเริ่มต้นศูนย์กลางของการหมุนจะถูกวางตำแหน่ง ตรงกลางขององค์ประกอบที่หมุน, ในกรณีของเราที่กลางใบ เราจำเป็นต้องย้ายจุดศูนย์กลางของการเปลี่ยนแปลงไปยังปลายด้านในของใบ เราสามารถทำได้โดยใช้ เปลี่ยนแหล่งกำเนิด คุณสมบัติ CSS ที่ เปลี่ยนตำแหน่งขององค์ประกอบที่ถูกแปลง.

เพื่อให้เอฟเฟกต์การหมุนทำงานอย่างถูกต้องให้เพิ่มกฎสองข้อต่อไปนี้ลงใน .pinStarLeaf ตัวเลือกในไฟล์ CSS ของเรา:

 .pinStarLeaf transform-origin: 30px 30px; การเปลี่ยนแปลง: แปลง 1s เชิงเส้น;  

เรามาดูการเคลื่อนไหวของแฟนแอ็คชั่นของเรากัน ณ จุดนี้โดยไม่มีเอฟเฟกต์เด้ง คลิกที่วงกลมสีขาวด้านบนของเครื่องหมาย.

ทำความเข้าใจว่า ubic-Bezier () ทำงานอย่างไร

ตอนนี้ในการเพิ่มเอฟเฟกต์ตีกลับเราต้องแทนที่ เชิงเส้น ฟังก์ชั่นจับเวลาด้วย ลูกบาศก์ Bezier () ใน การเปลี่ยนแปลง ประกาศในไฟล์ CSS ของเรา.

แต่ก่อนอื่นเรามาทำความเข้าใจ ตรรกะที่อยู่เบื้องหลัง ลูกบาศก์ Bezier () ฟังก์ชั่นจับเวลา เพื่อให้คุณสามารถรับรู้ถึงเอฟเฟกต์ตีกลับได้ง่าย.

ไวยากรณ์สำหรับ ลูกบาศก์ Bezier () ฟังก์ชั่นดังต่อไปนี้, d และ เสื้อ เป็น ระยะทาง และ เวลา, และโดยทั่วไปค่าจะอยู่ในช่วงระหว่าง 0 ถึง 1:

ลูกบาศก์เบซิเยร์ (t1, d1, t2, d2)

แม้ว่าจะอธิบาย CSS ลูกบาศก์ Bezier () ในแง่ของระยะทางและเวลาไม่ถูกต้องมันง่ายกว่ามากที่จะเข้าใจด้วยวิธีนี้.

สมมติว่ามี กล่องที่เคลื่อนที่จากจุด A ถึง B ใน 6 วินาที ลองใช้สิ่งต่อไปนี้ ลูกบาศก์ Bezier () ฟังก์ชั่นจับเวลาสำหรับการเปลี่ยนด้วย t1 = 0 และ d1 = 1 ค่า.

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

ในเวลาเกือบจะไม่กล่องย้ายจาก A ถึงจุดกึ่งกลางและใช้เวลาที่เหลือถึง B.

ลองเปลี่ยนด้วยค่าเดียวกัน t1 = 1 และ d1 = 0.

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

ในช่วงสามวินาทีแรกกล่องไม่ขยับมากนักและต่อมาก็เกือบจะกระโดดไปยังจุดกึ่งกลางและเริ่มเคลื่อนที่ไปทาง B อย่างต่อเนื่อง.

อย่างที่เห็น, d1 ควบคุม ระยะทางระหว่าง A & จุดกึ่งกลาง, และ t1 เวลาที่ใช้ในการเข้าถึงจุดกึ่งกลางจาก A.

มาใช้กัน d2 และ T2 ตอนนี้ ทั้งสอง t1 และ d1 จะเป็น 1 และ t2 = 1 และ d2 = 0.

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

กล่องเคลื่อนไหวเกือบครึ่งหนึ่งใน 3 วินาที (เนื่องจาก t1 = 1, d1 = 1) และในเวลาไม่นานมันก็กระโดดไปยังจุด B.

ตัวอย่างสุดท้ายสลับค่าก่อนหน้าของ T2 และ d2:

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

กล่องเคลื่อนไหวเกือบครึ่งหนึ่งใน 3 วินาที (เนื่องจาก t1 = 1, d1 = 1) จากนั้นอีก 3 วินาทีจะไม่เคลื่อนไหวมากนักก่อนกระโดดไปยังจุด B.

ตัวอย่างเหล่านี้แสดงให้เห็นว่า d2 และ T2 ควบคุมระยะทางและเวลาที่ใช้ในการ ไปจากจุดกึ่งกลางถึงจุด B.

แม้ว่าคุณอาจไม่ต้องการคำอธิบายที่ยาว (แต่เบาบาง) ของ ลูกบาศก์ Bezier () ณ จุดนี้ฉันคิดว่ามันจะช่วยให้คุณเข้าใจฟังก์ชั่นนี้ดีขึ้น ทีนี้การตีกลับจะมาจากที่ไหน?

5. การเพิ่มเอฟเฟกต์ตีกลับด้วย Cubic-Bezier ()

พารามิเตอร์ที่สำคัญ สำหรับเอฟเฟกต์เด้งคือระยะทาง, d1 และ d2. d1 มูลค่าของ น้อยกว่า 1 ใช้กล่อง ด้านหลังจุด A ก่อนที่จะไปยัง B ที่จุดเริ่มต้นของภาพเคลื่อนไหว.

d2 มูลค่าของ มากกว่า 1 ใช้กล่อง เกินจุด B ก่อนกลับมาพักผ่อนที่ B ตอนท้ายอนิเมชั่น ดังนั้นผลสะท้อนกลับไปมา.

ฉันจะเพิ่ม ลูกบาศก์ Bezier () ให้คุณค่าโดยตรงกับการสาธิตของเราแทนอดีต เชิงเส้น ค่าของ การเปลี่ยนแปลง และให้คุณเห็นผลลัพธ์.

 #pinStarCenterChkBox: ทำเครื่องหมาย ~ .pinStarLeaf transition: transform 1s cubic-bezier (.8, -. 5, .2,1.4);  

นี่คือผลสุดท้าย, แอนิเมชัน fan-out แบบ CSS เท่านั้นพร้อมเอฟเฟกต์ตีกลับ:

สำหรับการเปรียบเทียบและทำความเข้าใจกับเอฟเฟกต์ตีกลับให้ดีขึ้นนี่คือวิธี ลูกบาศก์ Bezier () ค่าของภาพเคลื่อนไหวจะทำงานเมื่อนำไปใช้กับกล่องตัวอย่างของเรา: