เรียนรู้วิธีสร้างภาพเคลื่อนไหวระหว่าง 2 มุมมองในแอปของคุณ
บ่อยครั้งที่คุณต้องการย้ายผู้ใช้ระหว่างมุมมองในแอปพลิเคชันของคุณ ไม่ว่าจะเป็นมุมมองจากรายการไปยังมุมมองรายละเอียด หรือแสดงการนำทางที่แถบด้านข้าง ภาพเคลื่อนไหวระหว่างมุมมองเหล่านี้จะช่วยให้ผู้ใช้มีส่วนร่วมและเพิ่มชีวิตให้กับโปรเจ็กต์ของคุณให้มากขึ้น
- ใช้คําแปลเพื่อย้ายไปมาระหว่างมุมมอง หลีกเลี่ยงการใช้
left,topหรือพร็อพเพอร์ตี้อื่นๆ ที่ทำให้เลย์เอาต์แสดงขึ้น - ตรวจสอบว่าภาพเคลื่อนไหวที่ใช้สั้นกระชับและมีระยะเวลาสั้นๆ
- ลองพิจารณาว่าภาพเคลื่อนไหวและเลย์เอาต์ของคุณเปลี่ยนแปลงไปอย่างไรเมื่อหน้าจอมีขนาดเพิ่มขึ้น สิ่งที่เหมาะกับหน้าจอขนาดเล็กอาจดูแปลกๆ เมื่อใช้ในบริบทของเดสก์ท็อป
ลักษณะและลักษณะการทำงานของการเปลี่ยนมุมมองเหล่านี้จะขึ้นอยู่กับประเภทของข้อมูลพร็อพเพอร์ตี้ที่คุณกำลังจัดการ ตัวอย่างเช่น การสร้างภาพเคลื่อนไหวการวางซ้อนแบบโมดัลที่ด้านบนของมุมมองควรเป็นคนละประสบการณ์กับการเปลี่ยนไปมาระหว่างมุมมองแบบรายการและมุมมองรายละเอียด
ใช้คำแปลเพื่อเปลี่ยนมุมมอง
เพื่อช่วยให้ชีวิตง่ายขึ้น ให้สมมติว่ามี 2 มุมมอง คือ มุมมองรายการและมุมมองรายละเอียด เมื่อผู้ใช้แตะรายการในมุมมองรายการ มุมมองรายละเอียดจะเลื่อนเข้ามา และมุมมองรายการจะเลื่อนออก
คุณต้องมีคอนเทนเนอร์สําหรับข้อมูลพร็อพเพอร์ตี้ทั้ง 2 รายการที่ตั้งค่าไว้ overflow: hidden เพื่อให้ได้ผลลัพธ์นี้ ด้วยวิธีนี้ ทั้ง 2 มุมมองสามารถอยู่ในคอนเทนเนอร์ควบคู่กันได้โดยไม่ต้องแสดงแถบเลื่อนแนวนอน และแต่ละมุมมองสามารถเลื่อนแบบด้านหนึ่งไปยังอีกด้านหนึ่งภายในคอนเทนเนอร์ได้ตามต้องการ
CSS สำหรับคอนเทนเนอร์คือ
.container {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
ตั้งตำแหน่งของคอนเทนเนอร์เป็น relative ซึ่งหมายความว่าแต่ละมุมมองภายในนั้นสามารถจัดตำแหน่งให้อยู่ด้านบนซ้าย แล้วย้ายไปรอบๆ พร้อมการแปลง วิธีนี้มีประสิทธิภาพดีกว่าการใช้พร็อพเพอร์ตี้ left (เพราะจะทริกเกอร์เลย์เอาต์และสี) และโดยทั่วไปจะหาเหตุผลได้ง่ายกว่า
.view {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
/* let the browser know we plan to animate
each view in and out */
will-change: transform;
}
การเพิ่ม transition ในพร็อพเพอร์ตี้ transform จะทำให้ได้เอฟเฟกต์สไลด์ที่ดูดี โดยใช้เส้นโค้ง cubic-bezier ที่กำหนดเองซึ่งเราได้อธิบายไว้ในคำแนะนำการค่อยๆ เปลี่ยนที่กำหนดเองเพื่อให้ความรู้สึกสบายตา
.view {
transition: transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
}
มุมมองที่อยู่นอกหน้าจอควรแปลไปทางขวา ดังนั้นในกรณีดังกล่าว ต้องย้ายมุมมองรายละเอียดดังนี้
.details-view {
transform: translateX(100%);
}
ในตอนนี้จำเป็นต้องใช้ JavaScript จำนวนเล็กน้อยเพื่อจัดการกับชั้นเรียน การดำเนินการนี้จะสลับชั้นเรียนที่เหมาะสมกับมุมมอง
var container = document.querySelector('.container');
var backButton = document.querySelector('.back-button');
var listItems = document.querySelectorAll('.list-item');
/**
* Toggles the class on the container so that
* we choose the correct view.
*/
function onViewChange(evt) {
container.classList.toggle('view-change');
}
// When you click a list item, bring on the details view.
for (var i = 0; i < listItems.length; i++) {
listItems[i].addEventListener('click', onViewChange, false);
}
// And switch it back again when you click the back button
backButton.addEventListener('click', onViewChange);
สุดท้าย เราจะเพิ่มการประกาศ CSS สำหรับคลาสเหล่านั้น
.view-change .list-view {
transform: translateX(-100%);
}
.view-change .details-view {
transform: translateX(0);
}
คุณสามารถขยายมุมมองนี้ให้ครอบคลุมหลายมุมมอง และแนวคิดพื้นฐานควรจะยังคงเหมือนเดิม มุมมองที่มองไม่เห็นแต่ละมุมมองควรอยู่ออกนอกหน้าจอและนำเข้ามาตามความจำเป็น และมุมมองบนหน้าจอที่กำลังอยู่ควรจะถูกปิดไป
นอกเหนือจากการเปลี่ยนระหว่างมุมมองแล้ว เทคนิคนี้ยังสามารถใช้ได้กับองค์ประกอบแบบเลื่อนเข้าอื่นๆ เช่น องค์ประกอบการนำทางที่แถบด้านข้าง ความแตกต่างที่แท้จริงเพียงอย่างเดียวคือคุณไม่จำเป็นต้องเปลี่ยนมุมมองอื่นๆ
ตรวจสอบว่าภาพเคลื่อนไหวใช้งานได้กับหน้าจอขนาดใหญ่
สำหรับหน้าจอขนาดใหญ่ คุณควรวางมุมมองรายการไว้ตลอดเวลาแทนที่จะนำออก และเลื่อนมุมมองรายละเอียดจากทางด้านขวา คล้ายกับการจัดการมุมมองการนำทาง