ภาพเคลื่อนไหวที่ตอบสนองต่อทุกขนาดหน้าจอและอุปกรณ์

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

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

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

แอนิเมชั่นนี้จะถูกใช้งานอย่างไร?

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

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

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

ภาพเคลื่อนไหวส่วนใหญ่จัดอยู่ในหมวดหมู่ต่อไปนี้:

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

แอนิเมชั่นที่ลื่นไหลและตรงเป้าหมายต้องใช้วิธีคิดและวิธีแก้ปัญหาที่แตกต่างกัน มาดูกัน…

แอนิเมชั่นของไหล

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

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

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

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

เราไม่ได้จำกัดอยู่แค่ยูนิตเหล่านี้เท่านั้น — มาดูความเป็นไปได้อื่นๆ กันบ้าง

หน่วย SVG

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

viewBox="0 0 100 50”

ในการสาธิตครั้งต่อไปนี้ SVG . ของเรา viewBox is 100 หน่วยกว้างและ 50 หน่วยสูง ซึ่งหมายความว่าถ้าเราทำให้องค์ประกอบเคลื่อนไหวโดย 100 หน่วยตามแนวแกน x มันจะเคลื่อนที่ตามความกว้างทั้งหมดของ SVG แม่ของมันเสมอ ไม่ว่า SVG จะใหญ่หรือเล็กแค่ไหน! ให้การสาธิตปรับขนาดเพื่อดู

การสร้างแอนิเมชั่นองค์ประกอบย่อยตามความกว้างของคอนเทนเนอร์พาเรนต์นั้นค่อนข้างยากใน HTML-land จนถึงตอนนี้ เราต้องคว้าความกว้างของพาเรนต์ด้วย JavaScript ซึ่งง่ายพอเมื่อคุณทำแอนิเมชั่น from ตำแหน่งที่เปลี่ยนไป แต่เล่นซอเล็กน้อยเมื่อคุณทำแอนิเมชั่น to ที่ไหนสักแห่งที่คุณเห็นในการสาธิตต่อไปนี้ หากจุดสิ้นสุดของคุณเป็นตำแหน่งที่แปลงแล้วและคุณปรับขนาดหน้าจอ คุณจะต้องปรับตำแหน่งนั้นด้วยตนเอง ยุ่ง… 🤔

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

แต่การเร่งความเร็วของแอนิเมชั่นนี้จะกลายเป็นอดีตไปแล้วในไม่ช้า! ได้โปรดม้วนกลอง… 🥁

หลังจากเกือบ 15 ปีในฐานะฟีเจอร์ที่มีการร้องขออย่างสูง (เป็นไปไม่ได้!?) การสืบค้นและหน่วยคอนเทนเนอร์ตามขนาดได้จัดส่งให้ทั้งใน Chrome/Edge 105 และ Safari 16! Firefox อยู่ไม่ไกลหลัง

(ด้วย: มีต้นแบบของแบบสอบถามสไตล์!)https://t.co/A2zgd9l4FC

— มีอา (@TerribleMia) September 15, 2022

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

การเปลี่ยนเลย์เอาต์แบบไหลด้วย FLIP

ดังที่เราได้กล่าวไว้ก่อนหน้านี้ ใน SVG-land ทุกองค์ประกอบจะถูกจัดวางอย่างเป็นระเบียบบนกริดเดียว และง่ายต่อการเคลื่อนย้ายอย่างตอบสนอง ใน HTML-land มันซับซ้อนกว่ามาก ในการสร้างเลย์เอาต์ที่ตอบสนอง เราได้ใช้วิธีการกำหนดตำแหน่งและระบบเลย์เอาต์ที่หลากหลาย ปัญหาหลักของการทำแอนิเมชั่นบนเว็บก็คือ มาก ของการเปลี่ยนแปลงเค้าโครงไม่สามารถเคลื่อนไหวได้ บางทีองค์ประกอบต้องย้ายจากตำแหน่ง relative ไปยัง fixedหรือลูกของคอนเทนเนอร์แบบยืดหยุ่นบางส่วนจะต้องสับเปลี่ยนอย่างราบรื่นทั่ววิวพอร์ต บางทีองค์ประกอบอาจต้องได้รับการเลี้ยงดูใหม่และย้ายไปยังตำแหน่งใหม่ทั้งหมดใน DOM

หากินเหรอ?

ดี. เทคนิค FLIP อยู่ที่นี่เพื่อช่วยวันนี้ มันช่วยให้เราสามารถเคลื่อนไหวสิ่งที่เป็นไปไม่ได้เหล่านี้ได้อย่างง่ายดาย หลักการพื้นฐานคือ:

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

นี่คือตัวอย่างการใช้ปลั๊กอิน FLIP ของ GSAP ที่ทำทุกอย่างเพื่อคุณ!

หากคุณต้องการทำความเข้าใจเพิ่มเติมเล็กน้อยเกี่ยวกับการนำวานิลลาไปใช้ ให้ไปที่ Paul Lewis's โพสต์บล็อก — เขาเป็นสมองที่อยู่เบื้องหลังเทคนิค FLIP

ปรับขนาด SVG . ได้อย่างไหลลื่น

คุณเข้าใจฉัน… นี่ไม่ใช่ จริงๆ เคล็ดลับแอนิเมชั่น แต่การจัดฉากให้ถูกต้องนั้นจำเป็นสำหรับแอนิเมชั่นที่ดี! SVG ปรับขนาดได้ดีเยี่ยมตามค่าเริ่มต้น แต่เราสามารถควบคุมวิธีการขยายเพิ่มเติมได้ด้วย preserveAspectRatioซึ่งมีประโยชน์มากเมื่ออัตราส่วนกว้างยาวขององค์ประกอบ SVG และ viewBox อัตราส่วนภาพจะแตกต่างกัน มันทำงานในลักษณะเดียวกับ background-position และ background-size คุณสมบัติใน CSS การประกาศประกอบด้วยค่าการจัดตำแหน่ง (background-position) และ พบ or ชิ้น อ้างอิง (background-size).

สำหรับข้อมูลอ้างอิงของ Meet และ Slice — slice ก็เหมือน background size: coverและ meet ก็เหมือน background-size: contain.

• preserveAspectRatio="MidYMax slice" — จัดแนวให้ตรงกลางแกน x ด้านล่างของแกน y และขยายให้ครอบคลุมวิวพอร์ตทั้งหมด
• preserveAspectRatio="MinYMin meet" — จัดชิดซ้ายของแกน x ด้านบนของแกน y และขยายขนาดโดยคงไว้ซึ่งทั้งหมด viewBox มองเห็นได้

ทอมมิลเลอร์ ก้าวไปอีกขั้นโดยใช้ overflow: visible ใน CSS และองค์ประกอบที่มีเพื่อเปิดเผย "สเตจซ้าย" และ "สเตจขวา" โดยคงส่วนสูงไว้:

สำหรับแอนิเมชั่น SVG ที่ตอบสนอง การใช้ช่องมองภาพ SVG เพื่อสร้างมุมมองที่ครอบตัดและปรับขนาดให้ต่ำกว่าความกว้างของเบราว์เซอร์ในขณะเดียวกันก็เผยให้เห็นแอนิเมชั่น SVG ทางด้านขวาและซ้ายมากขึ้นเมื่อเบราว์เซอร์กว้างกว่านั้น เกณฑ์ เราสามารถทำได้โดยเพิ่มโอเวอร์โฟลว์ที่มองเห็นได้บน SVG และร่วมมือกับ a max-height กระดาษห่อหุ้มเพื่อป้องกันไม่ให้ SVG ปรับขนาดในแนวตั้งมากเกินไป

ปรับขนาดผ้าใบอย่างไหลลื่น

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

ฉันชอบตั้งค่าของฉัน เพื่อให้ทำงานได้มากในลักษณะเดียวกับ SVG (ฉันอาจลำเอียง) ด้วยระบบหน่วยที่น่ารักในการทำงานภายในและอัตราส่วนกว้างยาวคงที่ ต้องวาดใหม่ทุกครั้งที่มีการเปลี่ยนแปลง ดังนั้นอย่าลืมรอการวาดใหม่จนกว่าเบราว์เซอร์จะปรับขนาดเสร็จ หรือดีบัก!

จอร์จฟรานซิส ประกอบสิ่งนี้ด้วย ห้องสมุดเล็กๆ ที่น่ารัก ซึ่งช่วยให้คุณกำหนด Canvas viewBox คุณลักษณะและ preserveAspectRatio — เหมือนกับ SVG!

แอนิเมชั่นเป้าหมาย

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

บางครั้งแอนิเมชั่นที่ตอบสนองได้ดีที่สุดสำหรับมือถือก็ไม่ใช่แอนิเมชั่นเลย! สำหรับ UX บนอุปกรณ์เคลื่อนที่ ให้จัดลำดับความสำคัญให้ผู้ใช้ใช้เนื้อหาได้อย่างรวดเร็ว แทนที่จะรอให้แอนิเมชั่นทำงานเสร็จ แอนิเมชั่นบนมือถือควรปรับปรุงเนื้อหา การนำทาง และการโต้ตอบ แทนที่จะทำให้ล่าช้า Eric van Holtz

ในการทำเช่นนี้ เราสามารถใช้การสืบค้นสื่อเพื่อกำหนดเป้าหมายขนาดวิวพอร์ตเฉพาะได้ เช่นเดียวกับที่เราทำเมื่อเราจัดสไตล์ด้วย CSS! ต่อไปนี้คือตัวอย่างง่ายๆ ที่แสดงภาพเคลื่อนไหว CSS ที่ได้รับการจัดการโดยใช้คิวรี่สื่อและภาพเคลื่อนไหว GSAP ที่จัดการด้วย gsap.matchMedia():

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

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

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

เราไม่ได้จำกัดแค่ขนาดหน้าจอเท่านั้น มี มีสื่อมากมายอยู่ที่นั่น ที่จะติด!

(prefers-reduced-motion) /* find out if the user would prefer less animation */

(orientation: portrait) /* check the user's device orientation */

(max-resolution: 300dpi) /* check the pixel density of the device */

ในการสาธิตต่อไปนี้ เราได้เพิ่มการตรวจสอบสำหรับ prefers-reduced-motion เพื่อให้ผู้ใช้ที่พบว่าแอนิเมชั่นสับสนจะไม่ถูกรบกวนจากสิ่งที่หวือหวา

และดูการสาธิตสนุกๆ อื่นๆ ของ Tom Miller ที่เขาใช้อัตราส่วนกว้างยาวของอุปกรณ์เพื่อปรับภาพเคลื่อนไหว:

คิดนอกกรอบ เกินขนาดหน้าจอ

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

@media (hover: hover) {
 /* CSS hover state here */
}

คำแนะนำบางส่วนจาก เจค ไวท์ลีย์:

หลายครั้งที่เราสร้างแอนิเมชั่นตามความกว้างของเบราว์เซอร์ ทำให้สันนิษฐานง่ายๆ ว่าผู้ใช้เดสก์ท็อปต้องการสถานะโฮเวอร์ โดยส่วนตัวแล้วฉันมีปัญหามากมายในอดีตที่ฉันจะเปลี่ยนไปใช้เลย์เอาต์เดสก์ท็อป >1024px แต่อาจตรวจจับการสัมผัสใน JS ได้ ซึ่งทำให้เลย์เอาต์สำหรับเดสก์ท็อปไม่ตรงกัน แต่ JS นั้นมีไว้สำหรับมือถือ วันนี้ฉันพึ่งโฮเวอร์และตัวชี้เพื่อให้แน่ใจว่ามีความเท่าเทียมกันและจัดการกับ iPad Pros หรือพื้นผิวของหน้าต่าง (ซึ่งสามารถเปลี่ยนประเภทตัวชี้ขึ้นอยู่กับว่าฝาครอบปิดลงหรือไม่)

/* any touch device: */
(hover: none) and (pointer: coarse)
/* iPad Pro */
(hover: none) and (pointer: coarse) and (min-width: 1024px)

จากนั้นฉันจะแต่งงานกับคิวรีเลย์เอาต์ CSS และคิวรี JavaScript ของฉัน ดังนั้นฉันจึงพิจารณาว่าอุปกรณ์อินพุตเป็นปัจจัยหลัก ได้รับการสนับสนุน โดยความกว้างมากกว่าที่จะตรงกันข้าม

เคล็ดลับ ScrollTrigger

หากคุณกำลังใช้ GSAP's ปลั๊กอิน ScrollTriggerมียูทิลิตีเล็ก ๆ น้อย ๆ ที่มีประโยชน์ที่คุณสามารถเชื่อมต่อเพื่อระบุความสามารถในการสัมผัสของอุปกรณ์ได้อย่างง่ายดาย: ScrollTrigger.isTouch.

• 0 - ไม่มีการสัมผัส (ตัวชี้/เมาส์เท่านั้น)
• 1 - สัมผัสเท่านั้น อุปกรณ์ (เช่นโทรศัพท์)
• 2 – อุปกรณ์สามารถรับได้ แตะ อินพุตและ เมาส์/ตัวชี้ (เช่นแท็บเล็ต Windows)

if (ScrollTrigger.isTouch) {
  // any touch-capable device...
}

// or get more specific: 
if (ScrollTrigger.isTouch === 1) {
  // touch-only device
}

เคล็ดลับอีกประการสำหรับแอนิเมชั่นที่กระตุ้นการเลื่อนแบบตอบสนอง...

การสาธิตต่อไปนี้ด้านล่างกำลังย้ายแกลเลอรีรูปภาพในแนวนอน แต่ความกว้างจะเปลี่ยนไปตามขนาดหน้าจอ หากคุณปรับขนาดหน้าจอเมื่อคุณผ่านแอนิเมชั่นสครับลงได้ครึ่งทาง คุณอาจจบลงด้วยแอนิเมชั่นที่เสียหายและค่าที่ค้าง นี่เป็น speedbump ทั่วไป แต่อย่างใดอย่างหนึ่งที่แก้ไขได้ง่าย! เปิดการคำนวณที่ขึ้นอยู่กับขนาดหน้าจอเป็นค่าฟังก์ชันและ set invalidateOnRefresh:true. ด้วยวิธีนี้ ScrollTrigger จะคำนวณค่านั้นใหม่ให้กับคุณเมื่อเบราว์เซอร์ปรับขนาด

โบนัสเคล็ดลับเนิร์ด GSAP!

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

ScrollTrigger.config({
  ignoreMobileResize: true
});

หลักการเคลื่อนไหว

ฉันคิดว่าจะมอบแนวทางปฏิบัติที่ดีที่สุดให้คุณพิจารณาเมื่อทำงานกับการเคลื่อนไหวบนเว็บ

ระยะทางและการผ่อนคลาย

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

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

สำหรับกรณีการใช้งานบางอย่าง การปรับระยะเวลาให้มีพลังมากขึ้นตามความกว้างของหน้าจออาจเป็นประโยชน์ ในการสาธิตครั้งต่อไปนี้ เราจะใช้ gsap.utils เพื่อยึดมูลค่าที่เราได้รับกลับมาจากปัจจุบัน window.innerWidth ให้อยู่ในช่วงที่เหมาะสม จากนั้นเราจะจับคู่ตัวเลขนั้นกับระยะเวลา

ระยะห่างและปริมาณ

สิ่งที่ควรทราบอีกประการหนึ่งคือระยะห่างและปริมาณขององค์ประกอบในขนาดหน้าจอต่างๆ การอ้างอิง สตีเวนชอว์:

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

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

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

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

ภาคผนวก

อีกหนึ่งบันทึกจาก ทอมมิลเลอร์ ขณะที่ฉันกำลังเตรียมบทความนี้:

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

ฉันคิดว่าเราทุกคนซาบซึ้งที่เคล็ดลับในการ "วางแผนล่วงหน้า" นี้เกิดขึ้นในนาทีสุดท้าย ขอบคุณ Tom และขอให้โชคดีกับชุดติดตั้งเพิ่มเติมเหล่านั้น