การจัดการความซับซ้อนด้วย Web Animations API

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

ก่อนที่เราจะลงลึกในบทความ คุณจำเป็นต้องคุ้นเคยกับพื้นฐานของ Web Animations API และ JavaScript ก่อน เพื่อให้ชัดเจนและหลีกเลี่ยงความฟุ้งซ่านจากปัญหาที่มีอยู่ ตัวอย่างโค้ดที่ให้มานั้นเรียบง่าย จะไม่มีอะไรซับซ้อนไปกว่าฟังก์ชันและอ็อบเจกต์ ในฐานะที่เป็นจุดเริ่มต้นที่ดีสำหรับแอนิเมชั่น ฉันขอแนะนำ MDN เป็นข้อมูลอ้างอิงทั่วไป ซีรีย์ที่ยอดเยี่ยมของ Daniel C. Wilson และ CSS Animations กับ Web Animations API โดย Ollie Williams เราจะไม่พูดถึงวิธีการกำหนดเอฟเฟกต์และปรับแต่งเอฟเฟกต์เพื่อให้ได้ผลลัพธ์ที่คุณต้องการ บทความนี้อนุมานว่าคุณมีแอนิเมชั่นที่กำหนดไว้แล้ว และต้องการแนวคิดและเทคนิคในการจัดการ

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

อินเทอร์เฟซ

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

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

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

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

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

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

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

เมื่อคุณสร้างแอนิเมชั่นผ่าน Element.animate คุณกำลังใช้ทางลัดที่ทำสามสิ่ง มันสร้างอินสแตนซ์ของ KeyframeEffect มันใส่ในอินสแตนซ์ Animation ใหม่ มันเริ่มเล่นทันที

 const animation = element.animate(keyframes, options);

มาทำลายมันและดูโค้ดที่เทียบเท่ากันที่ทำในสิ่งเดียวกัน

 const animation = new Animation( // (2) new KeyframeEffect(element, keyframes, options) // (1) ); animation.play(); (3)

นำตลับ (1) ใส่ลงในเครื่องเล่น (2) จากนั้นกดปุ่ม Play (3)

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

เวลา

เช่นเดียวกับในเรื่องตลก จังหวะเวลาคือทุกสิ่งในแอนิเมชั่น เพื่อให้เอฟเฟกต์ทำงาน เพื่อให้ได้ความรู้สึกบางอย่าง คุณต้องสามารถปรับแต่งวิธีที่คุณสมบัติเปลี่ยนแปลงได้ คุณสามารถควบคุม เวลาได้สองระดับ ใน Web Animations API

ในระดับคุณสมบัติส่วนบุคคล เรามี offset Offset ให้คุณ ควบคุมเวลาคุณสมบัติเดียว โดยการให้ค่าจากศูนย์ถึงหนึ่ง คุณกำหนดว่าแต่ละเอฟเฟกต์จะเริ่มเมื่อใด เมื่อละเว้น จะเท่ากับศูนย์

คุณอาจจำจาก @keyframes ใน CSS ว่าคุณสามารถใช้เปอร์เซ็นต์แทน from / to ได้อย่างไร นั่นคือ offset ที่หารด้วยหนึ่งร้อย ค่า offset เป็น ส่วนหนึ่งของระยะเวลาของการวนซ้ำครั้งเดียว

offset ทำให้คุณสามารถจัดเรียงคีย์เฟรมภายใน KeyframeEffect การชดเชยจำนวนสัมพัทธ์ทำให้แน่ใจได้ว่าไม่ว่าระยะเวลาหรืออัตราการเล่นคีย์เฟรมทั้งหมดของคุณจะเริ่มต้นในช่วงเวลาเดียวกันโดยสัมพันธ์กัน

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

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

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

 delay + (iterations × duration) + end delay

คุณสามารถดูการทำงานจริงในการสาธิตต่อไปนี้:

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

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

ควบคุมหลายอย่างเป็นหนึ่งเดียว

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

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

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

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

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

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

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

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

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

ความแตกต่างเพียงอย่างเดียวระหว่างการโทร play ในแอนิเมชั่นเดียวและอาร์เรย์ของแอนิเมชั่นคือคุณต้องทำซ้ำ นี่คือรหัสที่คุณสามารถใช้กับอินสแตนซ์ Animation ได้ทุกวิธี:

 // To play just call play on all of them animations.forEach((animation) => animation.play());

เราจะใช้สิ่งนี้เพื่อสร้างฟังก์ชั่นทุกประเภทสำหรับผู้เล่นของเรา

มาสร้างกล่องที่จะเก็บแอนิเมชั่นและเล่นกัน คุณสามารถสร้างกล่องเหล่านั้นได้ตามความเหมาะสม เพื่อให้ชัดเจน ฉันจะแสดงตัวอย่างการใช้ฟังก์ชันและวัตถุ ฟังก์ชัน createPlayer ใช้อาร์เรย์ของแอนิเมชั่นที่จะเล่นพร้อมกัน ส่งคืนวัตถุด้วยวิธีการ play เดียว

 function createPlayer(animations) { return Object.freeze({ play: function () { animations.forEach((animation) => animation.play()); } }); }

นั่นก็เพียงพอแล้วสำหรับคุณที่จะรู้ว่าจะเริ่มขยายการทำงาน มาเพิ่มวิธีการหยุดชั่วคราวและ currentTime กัน

 function createPlayer(animations) { return Object.freeze({ play: function () { animations.forEach((animation) => animation.play()); }, pause: function () { animations.forEach((animation) => animation.pause()); }, currentTime: function (time = 0) { animations.forEach((animation) => animation.currentTime = time); } }); }

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

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

 function currentTime(time = 0) { animations.forEach(function (animation) { if (typeof animation.currentTime === "function") { animation.currentTime(time); } else { animation.currentTime = time; } }); }

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

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

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

บทสรุป

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

อ่านเพิ่มเติม

• “เทคนิคการปฏิบัติในการออกแบบแอนิเมชั่น” Sarah Drasner
• “การออกแบบด้วยการลดการเคลื่อนไหวเพื่อความไวต่อการเคลื่อนไหว” Val Head
• “ UI ทางเลือกเสียงสำหรับผู้ช่วยเสียง” Ottomatias Peura
• “การออกแบบคำแนะนำเครื่องมือที่ดีขึ้นสำหรับอินเทอร์เฟซผู้ใช้มือถือ” Eric Olive