Convenience UIKit APIs for cool animation effects(in Burmese)
Overview
ကျွန်တော်တို့အားလုံး animation တွေကိုကြိုက်ကြပါတယ်။ ကိုယ့်ရဲ့ app မှာ သင့်တော်သလို animation တွေကို ထည့်ပေးလိုက်ရင် app ကိုသုံးတဲ့သူတွေ ပိုပြီး စိတ်ကျေနပ်မှုရစေမှာဖြစ်သလို programming အကြောင်း တစ်ခုမှမသိတဲ့သူတစ်ယောက်ဘက်ကကြည့်ရင်လည်း ကိုယ့်ကို ပိုပြီးအထင်ကြီးစေပါတယ်။
ဒါဆိုရင် animation တွေလုပ်ရတာခက်သလား? အလွယ်ပြောရရင်တော့ မခက်ပါဘူး။ UIKit က ကျွန်တော်တို့ကို တော်ယုံတန်ယုံ animation တွေ လွယ်လွယ်ကူကူနဲ့ရေးလို့ရအောင် method တွေ ထုတ်ပေးထားပါတယ်။ ဒါပေမယ့် တစ်ကယ်အသေးစိတ်တာတွေလုပ်ချင်ရင်တော့ နည်းနည်း ခေါင်းစားပါတယ်။ ကျွန်တော်ဒီ article မှာ UIKit ရဲ့ animation method တွေနဲ့ပတ်သက်ပြီး အတတ်နိုင်ဆုံး နားလည်ရလွယ်အောင်ရှင်းပြပေးသွားပါမယ်။
Getting started
ကျွန်တော့်ရဲ့ sample project ကို download လုပ်ထားပါ။ ဒီ article မှာပါတဲ့ code တွေအပြင် အခြား animation တွေကိုလည်း စမ်းရေးပြထားပါတယ်။
UIView.animate Vs CoreAnimation
UIView animation method တွေအားလုံးဟာ uiview ရဲ့ properties တွေကို animate လုပ်ရာမှာ လွယ်ကူစေဖို့အတွက် ထုတ်ပေးထားတဲ့ top level api တွေဖြစ်ပါတယ်။ နောက်ကွယ်မှာတော့ view တွေရဲ့ animation တွေ rendering တွေအားလုံးကို Core animation framework ကလုပ်ပေးပါတယ်။ ဒါပေမယ့် UIView နဲ့ သူ့ရဲ့ subclass တွေကနေ ခေါ်သုံးရာမှာလွယ်ကူစေဖို့အတွက် Apple က block-based animation method တွေကို UIKit ကနေ ပြန်ထုတ်ပေးထားတာဖြစ်ပါတယ်။ UIKit ရဲ့ animation နဲ့ CoreAnimation နဲ့ကွာခြားချက်ကို သေချာသိချင်ရင် ဒီ stackoverflow answer ကိုသွားဖတ်ကြည့်သင့်ပါတယ်။
UIView animations
UIKit မှာ view တွေရဲ့ properties တွေကို animate လုပ်နိုင်ဖို့အတွက် class method တွေ ပြင်ဆင်ပေးထားပါတယ်။ UIKit animation အကြောင်း အသေးစိတ်သိချင်ရင်တော့ ဒီ link ကနေ သွားဖတ်ပါ။
animate(withDuration:animations:)
ဒါကတော့ အရိုးရှင်းဆုံး method ဖြစ်ပါတယ်။ ‘withDuration’ မှာ TimeInterval type ကိုလက်ခံပြီး ဘယ်နှစက္ကန့်ကြာချင်လဲဆိုတာကို ထည့်ပေးရုံပါဘဲ။ ‘animations’ ကတော့ closure ဖြစ်ပြီး ဒီ block ထဲမှာ ကိုယ်တစ်ကယ် animate လုပ်ချင်တဲ့ view ရဲ့ property တန်ဖိုးတွေကို ပြောင်းပေးရမှာဖြစ်ပါတယ်။
အပေါ်က code မှာဆိုရင် greenBox ဆိုတဲ့ view ရဲ့ x axis ကို animate လုပ်ထားတာကို တွေ့ရပါမယ်။
animate(withDuration:animations:completion:)
ဒီ method မှာတော့ ‘completion’ ဆိုတဲ့ closure တစ်ခု ပိုလာပါတယ်။ ‘animations’ block ထဲမှာ သတ်မှတ်ထားတဲ့ duration အတိုင်း animate လုပ်ပြီးရင် ဒီ completion block ကိုရောက်မှာဖြစ်ပါတယ်။ ဒီထဲမှာ ကိုယ် reset ပြန်လုပ်ချင်တဲ့ state တွေ ဒါမှမဟုတ် နောက်ထပ် animation တစ်ခုကို chain လုပ်တာတွေ လာရေးမှာဖြစ်ပါတယ်။
ပထမဆုံး view ရဲ့ background color ကိုပြောင်းပြီးတော့မှ complete ဖြစ်သွားတဲ့အခါမှာ scale ကို သေးလိုက်ပြီး alpha ကို လျှော့လိုက်တာဖြစ်ပါတယ်။ CGAffineTransform နဲ့ပတ်သက်တဲ့အသေးစိတ်ကို နောက်ပိုင်း ဆက်ရေးသွားပါဉီးမယ်။
animate(withDuration:delay:options:animations:completion:)
ဒီ method ကတော့ တော်တော်လေးစုံပါတယ်။ ‘delay’ မှာဆိုရင် animation မစခင် ဘယ်နှစက္ကန့်စမလဲဆိုတာတွေ နောက်တစ်ခါ animation လုပ်တဲ့အခါမှာ ဘယ်လို timing curve နဲ့လုပ်မလဲ၊ repeat လုပ်မှာလား၊ reverse လုပ်မှာလား စတာတွေကို ‘options’ array အနေနဲ့ ထည့်ပေးလို့ရမှာဖြစ်ပါတယ်။ Options တွေအများကြီးရှိတာမို့ ကိုယ့်ဘာသာစမ်းကြည့်သင့်ပါတယ်။
အပေါ်က code ကိုrun ကြည့်မယ်ဆိုရင် 0.3 second ကြာပြီးမှ animation တွေစလုပ်တာကို တွေ့ရပါမယ်။
animate(withDuration:delay:usingSpringWithDamping:initialSpringVelocity:options:animations:completion:)
ဒီတစ်ခါတော့ usingSpringWithDamping နဲ့ initialSpringVelocity ဆိုတဲ့ parameter နှစ်ခုတိုးလာပါတယ်။ စာနဲ့ရှင်းပြရင်ပိုရှုပ်တာကြောင့် အောက်မှာလက်တွေ့စမ်းကြည့်ကြပါမယ်။
ဒီ method မှာတစ်ခုပိုလာတာက spring animation ပါ။ စပရိန်ကိုဖိထားပြီး ပြန်လွှတ်လိုက်ရင် ဖြစ်သွားတဲ့ motion မျိုးမို့လို့ spring animation လို့ခေါ်တာပါ။ ‘usingSpringWithDamping’ ရဲ့ value က 0 ကနေ 1 အထိ ရှိပါတယ်။ တန်ဖိုးနည်းလေ စပရိန်ဖိအားများလေဖြစ်ပြီး 1 ဆိုရင်တော့ လုံးဝမဖိတဲ့အနေအထားပါ။ ‘initialSpringVelocity’ ကတော့ စပရိန်ကိုပြန်လွှတ်လိုက်တဲ့အချိန်မှာ သွားမယ့် velocity ပါ။ သူလည်း 0 ကနေ 1 ကြားတန်ဖိုးဖြစ်ပြီး 1 ဆိုရင်တော့ neutral ပါ။ Spring value တွေကို အမျိုးမျိုးပြောင်းကြည့်ပြီး ဘယ်လိုဖြစ်မလဲဆိုတာ စမ်းကြည့်မှ ပိုနားလည်ပါလိမ့်မယ်။
animateKeyframes(withDuration:delay:options:animations:completion:)
ဒါကတော့ keyframe animation တွေအတွက်ဖြစ်ပါတယ်။ Keyframe animation ဆိုတာကတော့ animation တွေအများကြီးကို key frame တစ်ခုအပေါ်မူတည်ပြီး play တာကိုခေါ်တာပါ။ Keyframe animation မှာလည်း options တွေရှိပါတယ်။ တစ်ခုချင်းစီမှာ ကွာခြားချက်သေးသေးလေးတွေရှိတာမို့ ကိုယ့်ဘာသာ စမ်းကြည့်သင့်ပါတယ်။ ဒီ example မှာတော့ ‘.calculationModeCubic’ ဆိုတာကိုသုံးထားပါတယ်။
UIView.animateKeyframes block ထဲမှာ keyFrame တွေကို ထည့်ချင်သလောက်ထည့်လို့ရပါတယ်။ ‘withRelativeStartTime’ နဲ့ ‘relativeDuration’ ဆိုတာကတော့ နာမည်အတိုင်း overall duration အပေါ်မူတည်ပြီး ပြန်တွက်တာဖြစ်ပါတယ်။ ကျွန်တော်ကတော့ key frame အစဉ်အတိုင်းကိုမှ overall duration နဲ့ပြန်စားပြီး ရေးလေ့ရှိပါတယ်။
Animate with AutoLayout constraints
ကျွန်တော်တို့အပေါ်မှာရေးခဲ့တဲ့ animation တွေအားလုံးဟာ frame တွေကို ပြန် calculate လုပ်ပြီး အသေရေးထည့်ပေးနေတာဖြစ်ပါတယ်။ အဲ့အစား ကျွန်တော်တို့ autolayout constraint တွေကိုသုံးပြီးတော့လည်း animate လုပ်လို့ရပါတယ်။ သုံးရတယ့်ပုံစံကလည်း တော်တော်လေးလွယ်ပါတယ်။ Autolayout နဲ့ပတ်သက်ပြီး မသိသေးဘူးဆိုရင် ကျွန်တော့်အရင် article ကိုသွားဖတ်ကြည့်လို့ရပါတယ်။
အရင်ဆုံး ကိုယ် animate လုပ်ချင်တဲ့ view ရဲ့ constraint တွေကို variable အနေနဲ့ထုတ်ထားပေးဖို့လိုပါမယ်။ တစ်ကယ် animate လုပ်တဲ့အခါမှာ constraint တွေကို final state မှာဖြစ်ချင်တဲ့ ပုံစံအတိုင်း ပြင်ပေးပြီး UIView.animate block ထဲမှာ super view ရဲ့ layoutIfNeeded() ကိုပြန်ခေါ်ပေးလိုက်ယုံပါဘဲ။ အဲ့လိုခေါ်လိုက်တာနဲ့တစ်ပြိုင်နက် နောက်ကွယ်မှာ constraint တွေကိုပြန်တွက်ပြီး animate လုပ်ပေးသွားမှာဖြစ်ပါတယ်။ လက်တွေ့စမ်းကြည့်တဲ့အခါ frame တွေ ကိုယ့်ဘာသာ calculate လုပ်တာထက်စာရင် တော်တော်လေးလွယ်ပြီး အသုံးတည့်တာကို တွေ့ရမှာပါ။
Conclusion
ကျွန်တော့်ရဲ့ project ကို clone လုပ်ထားမယ်ဆိုရင် ‘ViewControllerTwo’ ဆိုတဲ့ file ထဲမှာ constraint ကိုသုံးပြီး search bar ကို toggle လုပ်တဲ့ animation ပုံစံရေးပြထားပါတယ်။
‘ViewControllerThree’ မှာတော့ onboarding screen ကို key frame animation သုံးပြီးရေးပြထားပါတယ်။ တအားခက်ခက်ခဲခဲမရှိတဲ့အတွက် code တစ်ကြောင်းချင်းစီကို comment ပိတ်/ဖွင့် လုပ်ပြီး လေ့လာသွားလို့ရပါတယ်။
ဒီတစ်ခေါက်မှာတော့ UIView.animate နဲ့ပတ်သက်ပြီး ရှင်းပြပေးခဲ့တာဖြစ်ပါတယ်။ ကိုယ့်ဘာသာ စမ်းလုပ်ကြည့်ဖို့ အထူးအကြံပေးလိုပါတယ်။ ဒီလိုဟာမျိုးက စာဖတ်တာထက် ကိုယ့်ဘာသာစမ်းကြည့်မှ ပိုမြင်တာဖြစ်ပါတယ်။
