[iOS Dev] UIView Keyframe Animation API

เราเคยเขียนวิธีการทำ Animation มาก่อนใน Blog
วันนี้เราจะมาดู iOS 7 API ตัวใหม่ในการทำสิ่งที่เรียกว่า "Keyframe Animations"
Keyframe Animation คือการที่เราสามารถสั่งให้ Animation ใดๆ ทำงานได้ระหว่างที่ Animation อื่นกำลังทำงานอยู่ (Intermediate State) 

ซึ่ง Animation ที่จะนำมาเป็นตัวอย่างวันนี้คือ "Full Rotation of View" หรือการหมุนวัตถุ 360 องศา แล้วทำไมเราถึงหมุนมันไม่ได้ทันทีล่ะ ? นั่นเพราะเวลาเราหมุนวัตถุใดๆ ก็ตาม เราจะต้องใช้หลักการของ Transformation Matrix ด้วยฟังก์ชั่น CGAffineTranform นึกภาพนะ ถ้าหมุนครึ่งรอบคือ π ใช่ไหม นั่นแปลว่าการหมุน 1 รอบก็คือ 2π แล้วลองนึกภาพที่คูณด้วย Transformation Matrix ที่เกิดจาก 2π สิ 

คนที่ไม่เคยเรียน Image Processing มาอาจจะเข้าใจยากสักหน่อย แต่สรุปได้ว่า เมื่อเราพยายามที่หมุนวัตถุใดๆ ด้วย Transformation Matrix ที่เกิดจาก 2π จะไม่เกิดอะไรขึ้นครับ เนื่องจากเราคูณแล้วได้ภาพเดิมเป๊ะๆ

วิธีการที่เราจะสามารถหมุนวัตถุไปทั้ง 360 องศาได้นั้นก็ต้องทำงานคูณ Transform Matrix ให้ภาพเปลี่ยนไปเรื่อยๆ จนกลับมาที่เดิมนั่นเอง สิ่งที่เราจำนำมาหมุนวันนี้คือ เราสร้าง App ที่มีหน้าตาง่ายๆ แบบนี้ครับ 


อย่างที่บอกว่าเราจะหมุนมันเรื่อยๆ ใช่ไหม ผมดึงแบ่ง State การหมุนของช้างฟ้าตัวนี้เป็น 3 State แบบนี้




โดยที่ในการหมุนแต่ละครั้ง จะต้องทำต่อกันทันที นั่นเป็นเหตุผลที่เราต้องใช้ Keyframe Animation แม้ว่า เราอาจจะนึกภาพว่า เราอาจจะใช้ Function ที่ผ่านมาเช่น UIView Animation with Completion ก็ได้ แต่นั่นไม่ใช่ ไม่เชื่อลองดูสิครับ แล้วบอกผม ว่ามันเกิดอะไรขึ้น ? :)

เข้าเรื่องกัน โดยปกติแล้วการทำ Keyframe Animation จะต้องใช้ Core Animation API ซึ่งเป็น API ที่มีหน้าตาไม่สวย ดังเช่น UIView Animation บน iOS 2 - 4 (ใครทันคงจะนึกภาพออก) บน iOS 7 นั้น Apple จึงได้เพิ่มความสามารถให้ UIView สามารถทำ Keyframe Animation ได้ง่ายๆ โดยที่จะมี API สองตัวที่เราควรรู้จัก นั่นคือ

UIView animateKeyframesWithDuration:delay:
options:animations:completion; 

และ

UIView addKeyframeWithRelativeStartTime
:relativeDurarion:animation;

โดยวิธีการใช้งานก็ประมาณนี้ครับ (ควรจะกดเพื่อดูภาพใหญ่)


จะเห็นว่า เราแบ่ง Animation ออกเป็น 3 State ใช่ไหม ? ลองสังเกตุ Relative Start และ Relative Duration นะ ทั้ง 2 ค่าเวลานั้น จะไม่เกิน 1 ตาม State ที่เราแบ่งไว้ ตัวอย่างเช่นในจังหวะที่สอง "เราจะหมุนช้างฟ้าไปที่ 4π / 3 ณ เวลาที่ 1/3 ของ 2 วินาทีเป็นจำนวน 1/3 ของ 2 วินาที" เป็นต้น

เท่านี้เราก็จะสามารถที่จะทำ Full Rotation Animation ได้แล้วล่ะ 
นอกจาก UIView Keyframe Animation ที่เพิ่มเข้ามาแล้วยังมี 
UIView Animation อีกตัวที่เพิ่มเข้ามานั่นคือ

UIView animateWithDuration:delay:
usingSpringWithDamping:initialSpringVelocity
:options:animations:completion

ลองไปเล่นดูนะครับ เราจะสามารถทำ Animation ดึ๋งๆ ได้ง่ายๆ เลยล่ะ

Popular posts from this blog

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

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

"อีสุกอีใส" ประสบการณ์เมื่อต้องมาเป็นตอนอายุ 22