รู้จักกับ Transition (iOS) และ การแสดง Window แบบ Modal
ไม่ทราบว่าเคยสังเกตกันบ้างหรือไม่ว่า Application ที่เราได้พัฒนากันขึ้นมา ตอนเปิดหน้า Window แรกทำไมมันแค่แสดงขึ้นมาโดยที่มันไม่มี Effect เลย ไม่ว่าจะพลิกซ้าย พลิกขวา หรือ เปิดขึ้นเหมือนเราเปิดหนังสือ โดยบน Titanium เองมีวิธีการง่าย ๆ มาให้ครับ แต่จะทำอย่างไรกันนั้นเราไปดูกันครับ
win.open();
ซึ่งคำสั่งนี้จะสั่งให้ Window แวดงขึ้นมาแบบธรรมดา ๆ เท่านั้น แต่หากว่าเราต้องการให้ Window ที่เปิดขึ้นมานั้น มี Effect ในการแสดงผลเราจะต้องเพิ่ม Parameter ลงไปหลัง คำสั่ง open แบบนี้ครับ
win.open({transition:Titanium.UI.iPhone.AnimationStyle.FLIP_FROM_LEFT});
ด้วยคำสั่งข้างต้นจะทำให้ Window ที่เปิดขึ้นมานั้นจะ พลิกหน้าจอจากด้านซ้ายไปด้่านขวา โดยที่ Effect นั้่นเราสามารถกำหนดได้ดังนี้ครับ
- CURL_DOWN
- CURL_UP
- FLIP_FROM_LEFT
- FLIP_FROM_RIGHT
แต่ละแบบเป็นอย่างไรนั้นลองไป ใช้กันได้เลยนะครับ
ส่วน การแสดง Window อีกประเภทนั้นก็คือ Window แบบ Modal ครับ โดย ปกติแล้ว การเปิด Window แบบ Modal นี้เมื่อต้องการให้แสดงขึ้นมาเราจะใช้คำสั่ง
window.open({modal : true});
เมื่อใช้คำสั่งนี้จะมี WIndow อีกหน่งอันซ้อนขึ้นมาบนหน้าจอ Application โดยมีการแสดงแบบจากด้านล่างขึ้นด้านบน แต่ก็สามารถที่จะเปลี่ยน Effect เมื่อทำการแสดงได้โดยใช้คำสั่ง
window.open({modal:true,
modalTransitionStyle: Ti.UI.iPhone.MODAL_TRANSITION_STYLE_FLIP_HORIZONTAL,
modalStyle: Ti.UI.iPhone.MODAL_PRESENTATION_FORMSHEET})
ในส่วนของ Transition ของ Modal นั้นจะประกอบด้วย
- MODAL_TRANSITION_STYLE_COVER_VERTICAL
- เป็นการแสดง Modal แบบจากล่างขึ้นด้านบน
- MODAL_TRANSITION_STYLE_CROSS_DISSOLVE
- เป็นการแสดง Modal แบบค่อย ๆ Fade โดยที่หน้าจอที่เรียกจะ Fade Out และหน้าจอที่ถูกเรียกจะ Fade In เพื่อแสดง
- MODAL_TRANSITION_STYLE_FLIP_HORIZONTAL
- เป็นการแสดง Modal แบบพลิกหน้าจอ
- MODAL_TRANSITION_STYLE_PARTIAL_CURL
- เป็นการแสดงเหมือนกับการเปิดหน้ากระดาษ
และในส่วนของ Modal Style นั้นก็จะประกอบไปด้วย
- MODAL_PRESENTATION_CURRENT_CONTEXT
- จะเป็นการแสดง Modal โดยนำ Style จากหน้าจอที่ทำการเรียกให้ Modal นี้ทำงาน
- MODAL_PRESENTATION_FORMSHEET
- จะเป็นการเรียก Modal มาแสดงโดยที่จะมีขนาดเล็กกว่า หน้าจอที่ทำการเรียกเล็กน้อย
- MODAL_PRESENTATION_FULLSCREEN
- จะเป็นการเรียก Modal ขึ้นมาแสดงแบบเต็มหน้าจอ
- MODAL_PRESENTATION_PAGESHEET
- จะเป็นการเรียก Modal ขึ้นมาโดยมีขนาดเท่ากับหน้าจอที่ใช้งานในแนวตั้งเท่านั้น
เป็นอย่างไรกันบ้างครับ ลองเอาไปใช้กันดูนะครับ เผื่อจะมีแบบไหนที่ถูกใจ เพื่อเปลี่ยนให้ Application มีลูกเล่นในการแสดงผลมากยิ่งขึ้นครับ
0 ความคิดเห็น:
แสดงความคิดเห็น