รู้จักกับ Transition (iOS) และ การแสดง Window แบบ Modal

ไม่ทราบว่าเคยสังเกตกันบ้างหรือไม่ว่า Application ที่เราได้พัฒนากันขึ้นมา ตอนเปิดหน้า Window แรกทำไมมันแค่แสดงขึ้นมาโดยที่มันไม่มี Effect เลย ไม่ว่าจะพลิกซ้าย พลิกขวา หรือ เปิดขึ้นเหมือนเราเปิดหนังสือ โดยบน Titanium เองมีวิธีการง่าย ๆ มาให้ครับ แต่จะทำอย่างไรกันนั้นเราไปดูกันครับ



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

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 ความคิดเห็น:

แสดงความคิดเห็น