วิธีสร้างภาพเคลื่อนไหวและการเปลี่ยนผ่านด้วย Motion UI

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

เราสามารถสร้างภาพเคลื่อนไหวและช่วงการเปลี่ยนภาพตั้งแต่เริ่มต้นหรือโดยใช้ไลบรารีหรือกรอบงาน ข่าวดีสำหรับเราคือ Frontend folks คือ Zurb ผู้สร้าง Foundation เมื่อเดือนตุลาคมที่ผ่านมา Motion UI แบบ open-sourced ซึ่งเป็นแอนิเมชันและไลบรารีการเปลี่ยนแปลงตาม Sass.

ตอนแรกมันมาพร้อมกับ Foundation สำหรับแอพและตอนนี้สำหรับรุ่นสแตนด์อโลนนั้นได้รับการปรับปรุงรวมถึง ระบบการจัดทำแอนิเมชัน และ รูปแบบ CSS ที่ยืดหยุ่น. Motion UI ยังให้พลังแก่องค์ประกอบบางอย่างของเฟรมเวิร์กของมูลนิธิเช่นตัวเลื่อน Orbit ตัวสลับ Toggler และ Modal Reveal ดังนั้นมันจึงเป็นเครื่องมือที่แข็งแกร่ง.

เริ่มต้นใช้งาน

แม้ว่า Motion UI เป็นไลบรารี Sass คุณไม่จำเป็นต้องใช้กับ Sass เนื่องจาก Zurb ให้ชุดเริ่มต้นที่สะดวกสำหรับนักพัฒนาที่มีเฉพาะ CSS ที่คอมไพล์แล้ว คุณสามารถดาวน์โหลดได้จากหน้าแรกของ Motion UI และเริ่มต้นแบบอย่างรวดเร็วโดยใช้ภาพเคลื่อนไหว CSS และคลาสการเปลี่ยนแปลงที่กำหนดไว้ล่วงหน้า.

ชุดเริ่มต้นไม่เพียง แต่มี Motion UI เท่านั้น แต่ยังมีเฟรมเวิร์กพื้นฐานซึ่งหมายความว่าคุณสามารถใช้กริด Foundation และฟังก์ชั่นอื่น ๆ ทั้งหมดของ Foundation for Sites ได้หากคุณต้องการ.

ชุดเลขหมายนั้นมาพร้อมกับ index.html ไฟล์ที่ให้คุณทดสอบกรอบได้อย่างรวดเร็ว.

หากคุณต้องการการปรับที่ซับซ้อนยิ่งขึ้นและต้องการใช้ประโยชน์จากมิกซ์ Sass อันทรงพลังของ Motion UI คุณสามารถติดตั้งเวอร์ชันเต็มที่มีแหล่งที่มา .SCSS ไฟล์ที่มี npm หรือ Bower.

เอกสารประกอบของ Motion UI นั้นยังไม่ได้รับความสนใจ คุณสามารถหาได้ที่นี่ใน Github หรือมีส่วนร่วมกับมันหากคุณต้องการ.

การสร้างต้นแบบด่วน

ในการเริ่มต้นสร้างต้นแบบคุณสามารถแก้ไข index.html ไฟล์ชุดเริ่มต้นหรือสร้างไฟล์ HTML ของคุณเอง คุณสามารถสร้างเค้าโครงโดยใช้กริดพื้นฐาน แต่ Motion UI ยังสามารถใช้เป็นไลบรารีแบบสแตนด์อโลนโดยไม่มีกรอบงานพื้นฐาน.

CSS คลาสหลักที่กำหนดไว้ล่วงหน้ามี 3 ประเภทหลักใน Motion UI:

1. Transition Classes - ทำให้สามารถเพิ่มช่วงการเปลี่ยนภาพเช่นการเลื่อน, การซีดจางและเอฟเฟ็กต์ hinging ไปยังองค์ประกอบ HTML.
2. คลาสแอนิเมชั่น - ช่วยให้คุณใช้เอฟเฟกต์การเขย่าการหมุนและการหมุนต่างๆ
3. Modifier Classes - ทำงานร่วมกับทั้งคลาสการเปลี่ยนภาพและแอนิเมชั่นและพวกมันจะช่วยให้คุณปรับความเร็วเวลาและความล่าช้าของการเคลื่อนไหว.

สร้าง HTML

สิ่งที่ดีเกี่ยวกับคลาส CSS ที่กำหนดไว้ล่วงหน้าคือมันไม่สามารถใช้เป็นคลาส แต่ยังเป็นคุณลักษณะ HTML อื่น ๆ ตัวอย่างเช่นคุณสามารถ เพิ่มลงใน ราคา คุณลักษณะของ แท็ก, หรือคุณสามารถ ใช้พวกเขาในแบบของคุณเอง ข้อมูล-* คุณลักษณะ เช่นกัน.

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

 
 คลิกฉัน  

เล่นอนิเมชั่นและการเปลี่ยนผ่านด้วย jQuery

Motion UI มีไลบรารี JavaScript ขนาดเล็กและสามารถเล่นการเปลี่ยนภาพและภาพเคลื่อนไหวเมื่อมีเหตุการณ์บางอย่างเกิดขึ้น.

ห้องสมุดสามารถพบได้ในชุดเริ่มต้นใน motion-ui-starter> js> ผู้ขาย> motion-ui.js เส้นทาง.

มันสร้าง MotionUI วัตถุที่มีสองวิธี: animateIn () และ animateOut (). การเปลี่ยนแปลงหรือภาพเคลื่อนไหวที่ถูกผูกไว้กับองค์ประกอบ HTML เฉพาะ ( แท็กในตัวอย่างของเรา) สามารถทริกเกอร์ด้วย jQuery ด้วยวิธีต่อไปนี้:

 $ (ฟังก์ชั่น () $ (". ปุ่ม"). คลิก (ฟังก์ชั่น () var $ animation = $ ("# boom"). data ("animation"); MotionUI.animateIn ($ ("# boom") , $ ภาพเคลื่อนไหว);););

ในข้อมูลโค้ดด้านบนเราเข้าถึง ข้อมูลภาพเคลื่อนไหว คุณลักษณะโดยใช้ในตัวของ jQuery ข้อมูล() วิธีการที่เรียกว่า animateIn () วิธีการของ MotionUI วัตถุ.

นี่คือรหัสเต็มและผลลัพธ์ ฉันใช้คลาสปุ่มภายในของมูลนิธิเฟรมเวิร์กสำหรับ คลิกฉัน ปุ่มและเพิ่ม CSS พื้นฐานบางอย่างเช่นกัน.

เนื่องจาก Motion UI มีความยืดหยุ่นค่อนข้างมากคุณสามารถเพิ่มและทริกเกอร์การเปลี่ยนภาพและภาพเคลื่อนไหวได้หลายวิธี.

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

 $ ( '# บูม') addClass ( 'ขนาดในขึ้น').

การปรับแต่งด้วย Sass

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

การปรับแต่งจะไม่ทำงานกับชุดเริ่มต้น แต่คุณต้องติดตั้งรุ่น Sass หากคุณต้องการกำหนดค่าเอฟเฟกต์ตามความต้องการของคุณเอง.

ในการปรับแต่งการเปลี่ยนภาพเคลื่อนไหวหรือภาพเคลื่อนไหวในตอนแรกคุณต้อง ค้นหา mixin ที่เกี่ยวข้อง. _classes.scss ไฟล์มีชื่อของคลาส CSS ที่คอมไพล์ด้วยมิกซ์อินที่เกี่ยวข้อง.

ในตัวอย่างของเราเราใช้ .ขนาดในขึ้น คุณลักษณะและโดยดูที่ _classes.scss, เราสามารถค้นหาได้อย่างรวดเร็วว่ามันใช้ประโยชน์จาก Mui ซูม mixin:

 // Transitions @mixin motion-ui-transitions … // Scale .scale-in-up @ รวม mui-zoom (ใน, 0.5, 1);  …

Motion UI ใช้ มุ้ย- คำนำหน้าเพื่อ mixins และแต่ละ mixin มีไฟล์ของตัวเอง Motion UI มีระเบียบการตั้งชื่อที่อธิบายตัวเองได้ค่อนข้างดีดังนั้นเราจึงสามารถค้นหา Mui ซูม มิกซ์อินใน _zoom.scss ไฟล์:

 @mixin mui-zoom ($ state: in, $ จาก: 1.5, $ ถึง: 1, $ fade: map-get ($ motion-ui-settings, ขนาดและจาง), ระยะเวลา $: null, $ timing: null, $ delay: null) …

ด้วยเทคนิคเดียวกันนี้คุณสามารถควบคุมทุกคุณสมบัติของภาพเคลื่อนไหวหรือการเปลี่ยนภาพได้อย่างง่ายดายโดยการเปลี่ยนค่าของตัวแปร Sass นั้น ๆ.

การกำหนดค่าคลาสตัวแก้ไข

คลาสตัวดัดแปลงที่ควบคุมพฤติกรรม (ความเร็วเวลาและความล่าช้า) ของภาพเคลื่อนไหวและช่วงการเปลี่ยนภาพยังสามารถกำหนดค่าได้ด้วย Sass ด้วยการแก้ไขค่าของตัวแปรตามลำดับใน _settings.scss ไฟล์.

หลังจากที่คุณทำการเปลี่ยนแปลง Motion UI จะ ใช้ค่าใหม่เป็นค่าเริ่มต้น ในทุกอนิเมชั่นและการเปลี่ยนแปลงดังนั้นคุณจะไม่ต้องกำหนดค่ามิกซ์อินที่เกี่ยวข้องทีละตัว.