[iOS Dev] Dynamic Animation on iOS 7

ไม่ได้เขียน Blog ซะนานเลย วันนี้จะเขียนเรื่อง Dynamic Animation บน iOS 7 SDK 
จะเห็นว่า iOS 7 ให้ความสำคัญกับ Animation ค่อนข้างเยอะ และจะทำอย่างไรให้วัตถุจำลองรูปแบบเสมือนจริงได้อย่างสมบูรณ์แบบ อาจเรียกได้ว่า นี่เป็น Physic Engine API ที่ Apple ทำออกมาได้ดีเลยทีเดียว เพราะใช้ง่ายมาก 

โดยขั้นตอนง่ายๆ ในการใส่ Dynamic Animation ให้วัตถุต่างๆ มีเพียง
  • สร้าง UIDynamicAnimator
  • สร้าง UIDynamicBehaviors (เช่น Gravity, Collision, ...) และใส่ลงไปใน UIDynamicAnimator
  • สร้าง UIDynamicItem (โดยมากเป็น UIView Subclasses) และใส่ลงไปใน UIDynamicBehavior  เพื่อให้มี Object นั้นมีพฤติกรรมตาม Bahavior ที่กำหนดไว้
โดย Object ใดๆ ที่จะเป็น UIDynamicItem ได้นั้นจะต้องมี Property ตาม UIDynamicItem Protocol ตามนี้

เราจะแนะนำ Behaviors ที่เราสามารถจะใช้ได้ มีอะไรบ้าง เบื้องต้น โดยจะหยิบ 2 อันพื้นฐานมาทำเป็นตัวอย่างให้ลองทำตามกันต่อไปนะ
  • UIGravityBehavior - พฤติกรรมของแรงโน้มถ่วง ซึ่งเราสามารถกำหนด Angle และ Magnitude ของแรงโน้มถ่วงได้ด้วย
  • UICollisionBehavior - พฤติกรรมการชนกันของวัตถุ โดยเราสามารถกำหนดพฤติกรรมในการชนกันของวัตถุต่างๆ หรือวัตถุและขอบเขตได้ (CollisionMode) ซึ่งสามารถกำหนดขอบเขตเป็น UIBezierPath ได้ด้วย
  • UIAttachmentBehavior - พฤติกรรมการยึดติดกับวัตถุ ซึ่งเราสามารถกำหนด Anchor Point ใดๆ หรือสามารถไปยึดติดกับ UIDynamicItem ตัวอื่นๆ ได้ด้วย ลองคิดถึงลูกตุ้มนาฬิกาแล้วกัน
  • UISnapBehavior - จะเรียกพฤติกรรมนี้ว่าอย่างไรดี พฤติกรรมการดึ๋งของวัตถุน่าจะได้ ลองนึกภาพ Spring สี่ตัวติดอยู่ที่ 4 มุมของวัตถุใดๆ สิ แล้วนึกภาพว่าเราสามารถควบคุมความตึงของสปริงได้ด้วย (damping)
  • UIPushBehavior - พฤติกรรมการออกแรงดันวัตถุ ก็ตรงตัวนะ นอกจากนั้นเราสามารถกำหนดทิศทางของการเคลื่อนที่ได้ด้วย (pushDirection, angle) 
มาดูตัวอย่างง่ายๆ กันก่อน 
เราจะสร้าง View ที่เมื่อกดแล้ว จะมีสี่เหลี่ยมเล็กๆ ตกลงมา (ตามแรงโน้มถ่วง) เรื่อยๆ แล้วกันนะ

ขั้นแรกก็ใส่ UITapGestureRecognizer ให้ View ซะก่อน ซึ่งผมเลือก View ที่ติดมาจากสร้าง Single View Application นี่แหละ



จากนั้นก็มาสร้างกล่องสี่เหลี่ยมกัน เพิ่มความน่ารัก โดยการใส่สีแบบสุ่มไปด้วย


ถึงตรงนี้ก็เป็นแค่พื้นฐานเนอะ ทุกคนน่าจะคุ้นชินกันอยู่แล้ว คราวนี้เราจะมาใส่ Gravity Behavior ให้กล่องสี่เหลี่ยมพวกนี้ เพื่อให้มันตกลงมาตามแรงโน้มถ่วงกัน (ลองย้อนขึ้นไปอ่าน Step ด้านบนที่ได้บอกไว้กันตอนต้นอีกครั้งนะ)

ขั้นแรกก็สร้าง Property ของ UIDynamicAnimator และ UIGravityBehavior ขึ้นมาก่อน


จากนั้นก็ทำสิ่งที่เรียกว่า Lazy Instantiation ให้ Property ทั้ง 2 ตัว เพื่อให้แน่ใจว่าจะไม่มีการสร้าง Object ตัวใหม่ขึ้นมาในระบบ หลักการคิดคล้าย Singleton Object แต่ Object นี้จะถูกสร้างเมื่อมีการเรียกใช้งานเท่านั้น โดยที่เราลดความแรงของแรงโน้มถ่วงเพิ่มนิดหน่อยด้วย


จากนั้นในฟังก์ชั่น createRandomBox ให้ทำการใส่ UIDynamicItems ลงไปใน UIGravityBehavior ซึ่ง Items ในที่นี้ก็คือ BoxView นั่นแหละ


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

ทำแบบเดิมเลย คือสร้าง Property จากนั้นทำ Lazy Instantiation โดย Property ของ UICollisionBehavior ที่ชื่อว่า translatesReferenceBoundsIntoBoundary จะเป็นการสร้าง Boundary ของการ Collision เป็น ReferenceView ที่ UIDynamicAnimator ซึ่งในที่นี้ก็คือ self.view นั่นเอง




คราวนี้ให้ลองเล่นเอง แล้วกันครับ ว่ามันตกลงมา แล้วนิ่งอยู่ที่ขอบล่างจริงๆ หรือปล่าว ? :)
เพื่อไม่ให้ยาวเกินไป และลึกไปกว่านี้ เบื้องต้นเท่านี้ก่อนแล้วกัน ถ้ามีอะไรเพิ่มเติมเจอกัน Blog หน้านะ

Popular posts from this blog

[Android Dev] การติดตั้ง Eclipse+AndroidSDK เพื่อพัฒนาโปรแกรมบน Android

12 วิธี การบริการและดูแลลูกค้าในร้าน Starbucks

5 TED Talk ที่จะช่วยให้คุณทำงานดีขึ้น