การเปลี่ยนจาก After Effects เป็น CSS Transitions และ Keyframes

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

เมื่อเว็บแอปทำงานเหมือนแอปที่มาพร้อมเครื่อง การโต้ตอบการออกแบบก็จะเปลี่ยนไปเพื่อจัดการกับกรณีการใช้งาน กล่าวคือ ความแพร่หลายของแอนิเมชัน แอนิเมชั่นกระตุ้นการโต้ตอบในแอปที่เราโปรดปรานทั้งหมด ตั้งแต่ Uber ไปจนถึง Lyft และ Snapchat ไปจนถึง Instagram

ในฐานะนักพัฒนาเว็บ เราต้องการพื้นฐานที่ดีในการสร้างแอนิเมชั่นที่มีประสิทธิภาพและบำรุงรักษาได้ ซึ่งเป็นสิ่งสำคัญยิ่งสำหรับภาพรวมของเว็บแอปที่มาพร้อมเครื่อง เราจำเป็นต้องเปลี่ยนจาก After Effects เป็น CSS, แอนิเมชั่น และคีย์เฟรมได้

After Effect คืออะไร?

After Effects เป็นผลิตภัณฑ์มาตรฐานอุตสาหกรรมจาก Adobe ที่นักออกแบบกราฟิกและการเคลื่อนไหวใช้ในการคีย์ เขียน และติดตามแอนิเมชั่น เป็นเครื่องมือ โดยพฤตินัย ที่ใช้โดยนักออกแบบหลายคนในการสื่อสารแนวคิดให้กับทีมโดยการส่งออกเลเยอร์แอนิเมชั่นไปยังวิดีโอตัวอย่างที่ง่ายต่อการมองเห็น โดยมีตารางอ้างอิงของเวลาเริ่มต้นและสิ้นสุดของแอนิเมชั่นประกอบ

วิดีโอสาธิตและตารางอ้างอิงร่วมกันทำให้ทีมพัฒนามีพื้นฐานที่ดีในการใช้แอนิเมชั่น วิดีโอนี้ใช้เพื่อดูภาพรวม ในขณะที่ตารางอ้างอิงจะให้รายละเอียดนาทีที่สร้างหรือทำลายการโต้ตอบของแอนิเมชั่น

สิ่งที่เราทำได้ด้วย After Effects

สิ่งที่เราสามารถสร้างด้วย After Effects นั้นถูกจำกัดด้วยจินตนาการของเราเท่านั้น มันสามารถให้เอฟเฟกต์หลังการผลิตได้ไม่รู้จบสำหรับรูปภาพหรือวิดีโอ ในขอบเขตของเว็บ มีแพลตฟอร์มสำหรับแนวคิดที่จะแบ่งปัน

พิจารณาลูกสีแดงด้านบน ลูกบอลจะเคลื่อนไหวโดยใช้ After Effects เพื่อค่อยๆ กลิ้งไปตรงกลาง หยุดชั่วขณะหนึ่ง จากนั้นค่อยเร่งความเร็วเพื่อออกจากวิวพอร์ต ภาพเคลื่อนไหวบนเว็บแบบคลาสสิกของการเคลื่อนไหว มาตราส่วน การหมุน และแม้กระทั่งการเปลี่ยนสีนั้นทำได้อย่างง่ายดายใน After Effects และทำหน้าที่เป็นเอกสารข้อกำหนดที่สร้างขึ้นทันที (หรือวิดีโอหรือ GIF) เพื่อให้แอนิเมชั่นใช้งานได้

เครื่องมือที่คุณต้องใช้ในการเริ่มต้น

เมื่อ JavaScript, HTML5, CSS3 และภาษาอื่นๆ กลายเป็นมาตรฐานสำหรับตัวแทนผู้ใช้รายใหญ่ส่วนใหญ่ที่เว็บไซต์รับการเข้าชม การใช้เครื่องมือเหล่านี้แบบค้าส่งจึงมีความเป็นไปได้มากขึ้น ด้านล่างนี้คือเทคโนโลยีหลักบางประการที่ควรคำนึงถึงเมื่อใช้งานแอนิเมชั่น

การเปลี่ยน CSS

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

 transition-property: background-color; transition-duration: 3s;

ด้วยกฎขององค์ประกอบนี้ สีพื้นหลังจะใช้เวลาสามวินาทีในการเปลี่ยน ค่อยๆ เปลี่ยนจากสีดำเป็นสีขาว ผ่านเฉดสีเทา ซึ่งสามารถปรับแต่งเพิ่มเติมได้โดยการเพิ่มฟังก์ชัน Transition-timing-Function เพื่อคำนวณค่ากลาง และ Transition-Delay เพื่อชะลอการเริ่มต้นของแอนิเมชั่น

การเปลี่ยน CSS นั้นดีสำหรับ การโต้ตอบแบบง่ายๆ เช่น การเปลี่ยนสีพื้นหลังหรือการย้ายองค์ประกอบไปยังตำแหน่งใหม่

การใช้ CSS Animations

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

สมมติว่าเราต้องการให้องค์ประกอบเคลื่อนไหวเหมือนการเด้ง องค์ประกอบต้องเลื่อนขึ้น ย้ายกลับไปที่ตำแหน่งเดิม เลื่อนกลับขึ้นเล็กน้อย แล้วย้ายกลับไปที่ตำแหน่งเดิม เมื่อใช้คีย์เฟรม เราสามารถแบ่งเอฟเฟกต์ยืดหยุ่นนั้นเป็นเปอร์เซ็นต์ของเวลาที่ภาพเคลื่อนไหวจะใช้ได้

 @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-25px); } 60% { transform: translateY(-15px); } } .element { animation-name: bounce; animation-duration: 3s; }

เช่นเดียวกับการเปลี่ยน CSS มีตัวเลือกมากมายสำหรับนักพัฒนาในการกำหนดค่า เราสามารถสร้างแอนิเมชั่นซ้ำได้ไม่จำกัดโดยใช้ animation-iteration-count โดยมีค่า infinite หรือแม้แต่ควบคุมทิศทางของแอนิเมชั่นที่ไหล โดยใช้คุณสมบัติ animation-direction คุณสมบัติแอนิเมชั่น CSS จำนวนมากทำให้เราสามารถควบคุมแบบละเอียดเพื่อให้ตรงกับแอนิเมชั่นกับการออกแบบ

ภาพเคลื่อนไหว CSS มีประโยชน์สำหรับ ภาพเคลื่อนไหวที่เกิดซ้ำสั้นๆ เช่น การขยาย การหมุน และการตีกลับ

การใช้ JavaScript

JavaScript มีการใช้งานมากมาย ตั้งแต่เซิร์ฟเวอร์ Raspberry Pi ไปจนถึงโค้ดฝั่งไคลเอ็นต์ แต่หนึ่งในการใช้งานหลักยังคงเปลี่ยนชื่อคลาสในองค์ประกอบ การเปลี่ยนชื่อคลาสเป็นวิธีที่เล็กน้อยแต่มีประสิทธิภาพในการจัดการสถานะขององค์ประกอบ

ตัวอย่างคือการเพิ่มคลาส active อย่างง่ายที่ส่งสัญญาณส่วนประกอบที่ซ่อนอยู่ในขั้นต้นเพื่อเริ่มแอนิเมชั่น พิจารณาลูกด้านล่าง เราใช้ JavaScript เพื่อเพิ่มคลาสที่ทริกเกอร์ภาพเคลื่อนไหวโดยใช้คุณสมบัติการเปลี่ยน CSS

ส่วนแรกของแอนิเมชั่นนี้สามารถทำซ้ำได้โดยใช้ HTML, CSS และ JavaScript ร่วมกัน

HTML:

 <div class="ball"></div>

ซีเอสเอส:

 .ball { width: 100px; height: 100px; color: red; transform: scale(0.25); transition: all 1s ease-in; } .ball.active { transform: scale(1.25); }

จาวาสคริปต์:

 setTimeout(function() { document.querySelector('.ball').addClass('active'); }, 500);

เมื่อหมดเวลา (จาก 500ms ) หมดเวลา คลาส active จะถูกเพิ่มลงใน ball div ซึ่งจะ transform คุณสมบัติการแปลง ซึ่งจะทริกเกอร์คุณสมบัติท transition สิชัน ซึ่งกำลังเฝ้าดูคุณสมบัติการ transform บนองค์ประกอบบอล การเปลี่ยนคลาส CSS โดยใช้ JavaScript ไม่เพียงแต่ช่วยให้เราจัดการสถานะของส่วนประกอบเท่านั้น แต่ยังช่วยให้เราควบคุมแอนิเมชั่นเพิ่มเติมนอกเหนือจากแอนิเมชั่น CSS และทรานซิชันได้อีกด้วย

การควบคุมแอนิเมชั่นโดยใช้ JavaScript มีประโยชน์สำหรับ การจัดการ state เพื่อทริกเกอร์เหตุการณ์ตามปัจจัยไดนามิก เช่น การป้อนข้อมูลของผู้ใช้หรือสถานะของแอปพลิเคชัน

จากไอเดียสู่ After Effects สู่ CSS และ JavaScript

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

After Effects ช่วยให้เราสร้างแบบจำลองว่าการโต้ตอบจะมีลักษณะอย่างไรเมื่อแอนิเมชั่นถูกทริกเกอร์ ลูกบอลที่กำลังเคลื่อนที่ด้านล่างเป็นตัวอย่างของสิ่งนั้น สังเกตว่าในตอนแรกลูกบอลสีแดงขยายขนาดขึ้นเล็กน้อย จากนั้นจึงเริ่มเร่งความเร็วรอบวงเป็นวงกลมและค่อยๆ ลดความเร็วกลับเข้าสู่ตำแหน่งเดิม จากนั้นลูกบอลจะลดขนาดลงเป็นขนาดดั้งเดิม

พิจารณาการเปลี่ยนมาตราส่วนที่อยู่เหนือจุดที่ลูกบอลเติบโตหรือหดตัวก่อนเคลื่อนที่หรือหยุด นี่เป็นคุณสมบัติเล็ก ๆ ที่นักออกแบบสร้างขึ้นใน After Effects และจำเป็นต้องสื่อสารกับนักพัฒนาอย่างชัดเจนเพื่อไม่ให้พลาดรายละเอียดนาที

นั่นคือเหตุผลที่จำเป็นต้องเตรียมการบางอย่างก่อนที่จะเปลี่ยนจาก After Effects ไปยังผู้พัฒนา เราไม่สามารถเพียงแค่สร้างไฟล์วิดีโอของแอนิเมชั่นในขณะใช้งานจริง แชร์กับนักพัฒนาและเรียกมันว่าวันนี้

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

อีกวิธีในการถ่ายทอดข้อมูลเกี่ยวกับแอนิเมชั่นคือการ ฝังลงในวิดีโอ คุณสามารถทำสิ่งนี้ได้อย่างถูกต้องใน After Effects โดยเพิ่มข้อมูลสำคัญ เช่น จำนวนที่จะปรับขนาด จำนวนขั้นตอน และข้อมูลอื่นๆ ที่เกิดขึ้น เพื่อให้บริบทแก่ผู้นำไปใช้ ซึ่งช่วยให้เราใช้ วิดีโอสาธิตเป็นแหล่งความจริงที่เป็นสากล ได้

ไฟล์วิดีโอที่ส่งออกนี้จาก After Effects ทำหน้าที่เป็นรูปแบบสัญญาระหว่างนักออกแบบและนักพัฒนา ด้วยความเข้าใจร่วมกัน เราสามารถใช้เครื่องมือต่างๆ ที่กล่าวถึงเพื่อนำไปใช้ เช่น คลาส CSS, เหตุการณ์ JavaScript, การเปลี่ยน CSS, แอนิเมชั่น CSS และแอนิเมชั่น JavaScript

1. ทำลายแอนิเมชั่น

มองหารูปแบบและสังเกตการกำหนดเวลา

สิ่งแรกที่ต้องทำคือวาดไทม์ไลน์ของแอนิเมชั่นสำหรับแต่ละองค์ประกอบ (หรือกลุ่มขององค์ประกอบ) เราจำเป็นต้องเข้าใจว่าแอนิเมชั่นมาบรรจบกันที่ใดเพื่อซิงโครไนซ์ระยะเวลาและวงจรชีวิตของแอนิเมชั่นรอบๆ การวางแผนเป็นกุญแจสำคัญในการสร้างแอนิเมชั่นที่ซับซ้อน เพื่อให้เราสามารถสร้างโซลูชันของเราแบบทีละส่วนในลักษณะที่สามารถบำรุงรักษาได้สำหรับความต้องการในอนาคต

จากข้อมูลข้างต้น เราแยกย่อยเป็นขั้นตอนต่อไปนี้:

1. เริ่มต้นส่วนประกอบและรอทริกเกอร์
2. เมื่อถูกกระตุ้น ให้ขยายขนาดและขยายเงาตกกระทบ
3. หลังจากนั้นให้เคลื่อนที่เป็นวงกลมโดย ease-in-out
4. จากนั้น ย่อขนาดและลดเงาตกกระทบ

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

2. เจรจากับผู้มีส่วนได้ส่วนเสีย

เราลดความซับซ้อนของบางพื้นที่ได้ไหม ส่วนไหนของแอนิเมชั่นที่ต้องมี? เราสามารถซิงโครไนซ์เวลาได้หรือไม่?

เมื่อเราตรวจสอบงานที่จำเป็นเพื่อให้งานสำเร็จแล้ว เราก็ต่อรอง การเจรจาต่อรองกับนักออกแบบและเจ้าของผลิตภัณฑ์ถือเป็นความรับผิดชอบของนักพัฒนาซอฟต์แวร์ทุกคน ผู้ดำเนินการมีความเข้าใจอย่างถ่องแท้เกี่ยวกับผลไม้ลอยต่ำที่สำคัญ สิ่งที่สามารถทำได้และสิ่งที่ไม่สามารถทำได้จริง

แอนิเมชั่นนั้นทำได้ยากเพราะการลบรายละเอียดเล็กๆ น้อยๆ ที่ดูเหมือนออกจากแอนิเมชั่นอาจเปลี่ยนประสบการณ์ของผู้ใช้ได้ เพื่อยกตัวอย่างที่อิงกับการพัฒนา การเปลี่ยนแปลงลักษณะการทำงานของแอนิเมชันนั้นคล้ายกับการเปลี่ยนเพย์โหลดการตอบกลับที่เราอาจได้รับจากการเรียก API: บางสิ่งสามารถเปลี่ยนแปลงได้ แต่ต้องมีบางส่วน

นี่เป็นสถานการณ์เป็นกรณีๆ ไป โดยอิงจากความสัมพันธ์ของเรากับนักออกแบบ ตลอดจนกับเจ้าของผลิตภัณฑ์ตามกำหนดเวลาสำหรับการเปิดตัว ไม่แนะนำให้ลบแอนิเมชั่นบางแอนิเมชั่นเพราะจะเกินขอบเขตความเชี่ยวชาญของเรา

แนวทางที่ดีในการเจรจาต่อรองคือการซิงโครไนซ์เวลาหรือ ทำให้แอนิเมชั่นง่ายขึ้นซึ่งเบราว์เซอร์อาจไม่สามารถทำได้โดยกำเนิด และหลีกเลี่ยงแอนิเมชันที่ใช้ JavaScript เนื่องจากจะรักษาได้ยากและอาจส่งผลให้ประสิทธิภาพการทำงานแย่ เราสามารถและควรขอสัมปทานเหล่านี้แทน

3. วางแผนโจมตี

รู้ว่าสถานะเริ่มต้นและสิ้นสุดของแต่ละองค์ประกอบควรเป็นอย่างไร ดูว่าช่วงเวลาการเปลี่ยนภาพแต่ละครั้งควรเกิดขึ้นที่ใด ใช้ประโยชน์จาก BEM ในคลาส CSS เพื่อใช้แอนิเมชั่นอย่างชัดเจน ทำความเข้าใจสาเหตุที่ควรจำกัด JavaScript ให้สนับสนุน CSS

มาดูแอนิเมชั่นที่อธิบายไว้ก่อนหน้านี้กัน ห้ารัฐกระโดดออกมาที่เรา:

1. สถานะเริ่มต้น กับลูกบอลสีแดงและเงาบางส่วน
2. ลูกบอลที่ขยายขนาดขึ้นพร้อมเงาที่ยาวขึ้น
3. การเคลื่อนที่ของลูกบอลเป็นวงกลม
4. การลดขนาดของลูกบอลพร้อมกับเงาหล่น
5. กลับสู่สถานะเริ่มต้นรอการเรียกใช้

สำหรับทั้งห้าสถานะ เราควรดูว่ารูปแบบคืออะไรก่อนและควรเป็นอย่างไร ข้อมูลนี้จะให้ข้อมูลแก่เราเกี่ยวกับเครื่องมือแอนิเมชั่นที่เราจำเป็นต้องใช้เพื่อนำไปใช้งาน

ในการทำเช่นนี้ เราเริ่มต้นด้วยรูปแบบเคสพื้นฐาน สิ่งนี้อาจไม่มีอะไรเลย หากองค์ประกอบปรากฏขึ้นจากที่ไหนเลย หรืออาจเป็นสไตล์ก่อนหน้า ในกรณีของแอนิเมชั่นที่เชื่อมโยงกัน

ทำให้มันเรียบง่าย โดยมีการเปลี่ยนแปลงเล็กน้อยในสไตล์ระหว่างรัฐ เมื่อเราระบุสถานะเริ่มต้นและสิ้นสุดแล้ว เราจำเป็นต้องติดป้ายกำกับเป็นคลาส CSS เพื่อให้นำไปใช้กับองค์ประกอบได้อย่างง่ายดาย สิ่งนี้ทำให้เรามีความยืดหยุ่นในการใช้ JavaScript เพื่อจัดการกับแอปพลิเคชันของคลาสตามข้อมูลที่ได้รับจากการเรียก AJAX ที่องค์ประกอบอาจขึ้นอยู่กับ

BEM CSS เหมาะอย่างยิ่งสำหรับกลยุทธ์การตั้งชื่อของเรา เนื่องจากเราจะแสดงสถานะของแอนิเมชันที่ดำเนินการด้วยตัวปรับแต่งได้อย่างไร หากแอนิเมชั่นเป็นแบบทั่วไปเพียงพอ BEM ก็เป็นวิธีการที่ดีในการรักษาคลาส CSS แบบ DRY (“อย่าทำซ้ำ”) ที่ทำงานข้ามฐานโค้ด เราจะเริ่มด้วยตัวทำเครื่องหมายบล็อกและองค์ประกอบ จากนั้นจึงจัดเลเยอร์ในม็อดเมื่อเราดำเนินการผ่านแอนิเมชัน

นี่คือตัวอย่างการเดินทางของคลาสเทมเพลต:

 // State 1 <div class="ball"></div> // State 2 <div class="ball ball--scale-up"></div> // State 3 <div class="ball ball--scale-up ball--circling"></div> // State 4 <div class="ball ball--scale-up ball--circling ball--scale-down"></div> // State 5 <div class="ball"></div>

เราเริ่มต้นด้วยองค์ประกอบคอนเทนเนอร์กับลูกบอลระดับ ซึ่งจะเป็นตัวแทนของลูกบอลสีแดงที่เรากำลังเคลื่อนไหว ในขณะที่ แอนิเมชั่นวนซ้ำในประสบการณ์ ชื่อคลาส BEM ของเราก็เช่นกัน จากการปรับขนาดไปจนถึงการเคลื่อนที่ในวงกลม นี่เป็นวิธีการติดตามว่าองค์ประกอบนั้นควรมีลักษณะอย่างไรเมื่อนำสไตล์ไปใช้

4. การดำเนินการอย่างต่อเนื่อง

ด้วยโครงร่างในมือและเครื่องมือที่พร้อมใช้งาน เราควรแยกย่อยไปตามสถานะโครงการทีละรัฐ

เราสามารถจัดการแต่ละรัฐซ้ำๆ ให้เป็นรายการที่แยกจากกัน โดยสร้างจากสถานะก่อนหน้าตามความจำเป็น ด้วยการกำหนดแต่ละสถานะไว้อย่างชัดเจน เราสามารถมุ่งเน้นที่การทำให้โค้ดของเราแห้งและอ่านง่าย มากกว่าที่รายละเอียดของการใช้งาน และแน่นอน เป็นการดีที่จะเพิ่มการทดสอบเพื่อให้ครอบคลุมตรรกะของเรา

สถานะเริ่มต้น

เราเริ่มต้นด้วยลูกบอลสีแดงธรรมดา โดยมีเงาตกกระทบเล็กน้อย

 .ball { background-color: #D24D57; width: 25px; height: 25px; margin: 5px; display: inline-block; border-radius: 50%; box-shadow: 0 8px 6px -6px #6C7A89; }

ขยายขนาด

การปรับขนาดมีสองส่วน: ขนาดขององค์ประกอบและเงาตกกระทบ เราใช้คีย์เฟรมที่ตั้งชื่อว่า scale ซึ่งใช้ร่วมกันโดยทั้งการขึ้นและลงเพื่อให้ความแห้งเพื่อจัดการกับภาพเคลื่อนไหวนี้

 @keyframes ball-scale { from { transform: scale(1); box-shadow: 0 8px 6px -6px #6C7A89; } to { transform: scale(1.25); box-shadow: 0 10px 6px -6px #6C7A89; } } .ball--scale-up { animation: ball-scale 1s ease-out forwards; }

วงกลม (หลังจากใช้แอนิเมชั่นการปรับขนาด)

เราใช้คีย์เฟรมที่ชื่อ circular เช่นเดียวกับการย้ายคุณสมบัติ transform-origin เพื่อย้ายองค์ประกอบไปรอบๆ ในวงกลม โดยเริ่มจากจุดเริ่มต้น โปรดทราบว่าการวนรอบจะเกิดขึ้นก็ต่อเมื่อแอนิเมชั่นการขยายขนาดเสร็จสิ้นเท่านั้น

 @keyframes ball-circular { from { box-shadow: 0 10px 6px -6px #6C7A89; transform-origin: 50% -450%; transform: scale(1.25) rotate(0deg) translateY(-100%) rotate(0deg); } to { box-shadow: 0 10px 6px -6px #6C7A89; transform-origin: 50% -450%; transform: scale(1.25) rotate(360deg) translateY(-100%) rotate(-360deg); } } .ball--circling { animation: ball-circular 2s ease-in-out forwards; }

การลดขนาด (หลังจากใช้แอนิเมชั่นการวนและขยายขนาด)

ในการย่อขนาด เราใช้มาตราส่วนคีย์เฟรมซ้ำ โดยมี animation-direction: reverse เพื่อทำสิ่งที่ตรงกันข้ามกับสิ่งที่คลาสการเพิ่มขนาดทำ สิ่งนี้นำเรากลับสู่สภาพเดิม

 .ball--scale-down { animation: ball-scale 1s ease-in forwards; animation-direction: reverse; }

สาธิตการทำงาน

ถ้าเรารวมคลาสเหล่านี้ทั้งหมดเป็นลำดับ เราจะมีการแสดง CSS ของการเรนเดอร์ที่ทำใน After Effects

คลิกที่ลูกบอลเพื่อเริ่มต้น

ดู Pen Animating Ball โดย Chris Ng (@chrisrng) บน CodePen

บทสรุป

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

ก่อนหน้านี้ การใช้แอนิเมชั่นเป็นเรื่องยากเพราะหมายถึงการใช้เครื่องมือภายนอก เช่น jQuery Animate เพื่อทำสิ่งง่ายๆ เช่น การย้ายองค์ประกอบต่างๆ ในหน้า ปัจจุบัน การเปลี่ยน CSS และภาพเคลื่อนไหวสามารถทำได้โดยกำเนิดและมีประสิทธิภาพ โดยใช้ประโยชน์จาก GPU

แอนิเมชั่นมักจะเป็นการชักเย่อระหว่างนักพัฒนา นักออกแบบ และเจ้าของผลิตภัณฑ์ เคล็ดลับคือการหาจุดกึ่งกลางซึ่งผู้มีส่วนได้ส่วนเสียทั้งหมดมีความสุขกับคุณภาพของผลิตภัณฑ์ หวังว่าคู่มือนี้จะช่วยให้คุณทำการเปลี่ยนแปลงได้