Day 16 Transition (Part 1)

Java FX အကြောင်းအား ရေးသားခဲ့သည်မှာ ၁၆ခန်းမြောက်ကို ရောက်ရှိခဲ့ပြီ ဖြစ်သည်။ ယခုတစ်ခေါက်မှာတော့ Animation အကြောင်းကို မိတ်ဆက်သွားပါမည်။ သို့ရာတွင် တစ်ခု အမှတ်မမှား စေရန်မှာ Animation များ Game များအား ရေးသားရန်မဟုတ်။ Business Application များအား ရေးသားရာတွင် ပိုမို Interactive ဖြစ်သော Application များအား လွယ်ကူစွာ ရေးသားနိုင်ရန် ရည်ရွယ်ပါသည်။

JavaFX ကို အသုံးပြုပြီး Animation ကို ရေးသားတဲ့အခါမှာ Transition နဲ့ Time Line Animation ဆိုပြီး အသုံးပြုနိုင်ပါတယ်။ ကျွန်တော်တို့ ဒီအခန်းမှာ အလွယ်တကူနဲ့ ရေးသားနိုင်တဲ့ Transition Animation ကို ရေးသားကြည့်ပါမယ်။

Animation ကို ရေးတဲ့အခါမှာ လှုပ်ရှားမှု့ကို ပြသရန်လို အပ်တဲ့အတွက် ကျွန်တော်တို့ Video Tutorial အဖြစ်ဖေါ်ပြသွားပါမယ်။

Transition

Animation ဆိုတာဟာ Object တစ်ခုရဲ့ Properties တွေကို Time Line တစ်ခု အပေါ်မူတခု အပေါ်မူတည်ပြီး ပြောင်းလဲပေးနေခြင်းဖြစ်တယ်။ ဥပမာအားဖြင့် လေးထောင့်ပုံလေးတစ်ခုရဲ့ အရောင်ကို အပြည့်မြင်နေရာကနေ အချိန်တစ်ခု အတွင်း တဖြည်းဖြည်း မှေးမှိန်ပျောက်ကွယ်စေတာတို့၊ သူ့ရဲ့ တည်နေရာကို တနေရာကနေ တနေရာကို ရွှေ့ပစ်တာတို့ ဒါတွေကို ဖြစ်စေတာဟာ Animation ဖြစ်ပါတယ်။

JavaFX ကို သုံးပြီး Animation ကို ရေးသားရာတွင် အသုံးများသော လုပ်ဆောင်မှု့များကို အလွယ်တကူ အသုံးပြုနိုင်စေရန် Transition အနေနဲ့ ပံ့ပိုးပေးထားပါတယ်။ လက်ရှိ အသုံးပြုနိုင်သော Transition တွေကတော့ အောက်ပါအတိုင်းဖြစ်ပါတယ်။

Transition	Description
FillTransition	Object တစ်ခုရဲ့ အရောင်ကို ပြောင်းလဲစေလိုတဲ့ အခါမှာ အသုံးပြုနိုင်ပါတယ်
ScaleTransition	Object တစ်ခုရဲ့ အရွယ်အစားကို ပြောင်းလိုတဲ အခါမှာ အသုံးပြုနိုင်ပါတယ်
RotateTransition	Object တစ်ခုရဲ့ လည်ပတ်မှု့ထောင့်တန်ဖိုးကို ပြောင်းလဲစေလိုတဲ့ အခါမှာ အသုံးပြုနိုင်ပါတယ်
StrokeTransition	Object တစ်ခုရဲ့ လိုင်းအထူအပါးတန်ဖိုးကို ပြောင်းလဲစေလိုတဲ့ အခါမှာ အသုံးပြုနိုင်ပါတယ်
TranslateTransition	Object တစ်ခုရဲ့ တည်နေရာကို x, y, z ဝင်ရိုးအပေါ်မှာ တစ်နေရာကနေ တစ်နေရာကို ပြောင်းရွှေ့စေလိုတဲ့ အခါမှာ အသုံးပြုနိုင်ပါတယ်
PathTransition	Object တစ်ခုရဲ့ တည်နေရာကို Path လမ်းကြောင်းတစ်ခု အပေါ်မှာ ပြောင်ရွှေ့စေလို တဲ့အခါမှာ အသုံးပြုနိုင်ပါတယ်

နောက်ပြီး Animation ကို လုပ်ဆောင်စေရာမှာ တစ်ခုပြီးမှတစ်ခု လုပ်ဆောင်စေနိုင်သလို၊ အပြိုင်လဲလုပ်ဆောင် စေနိုင်ပါတယ်။ Transition Animation တွေကို တစ်ခုပြီးတစ်ခု လုပ်ဆောင်စေတဲ့ Animation မျိုးကို SequentialTransition ဖြင့် လုပ်ဆောင်စေနိုင်ပြီး၊ အပြိုင်လုပ်ဆောင်စေတဲ့ Animation မျိုးကို ParallelTransition ဖြင့်လုပ်ဆောင်စေနိုင်ပါတယ်။

အထက်ပါ Transition Class တွေအားလုံးဟာ javafx.animation.Transition Class ရဲ့ Sub Class တွေဖြစ်ကြတယ်။ Transition Class ဟာ javafx.animation.Animation ရဲ့ Sub Class ဖြစ်ပြီး Transition Animation တွေအားလုံးရဲ့ အခြေခံ Class ဖြစ်ပါတယ်။ Transition Class ထဲမှာ Transition အားလုံးမှာ အသုံးပြုနိုင်မယ့် အခြေခံ Properties တွေကို ပိုင်ဆိုင်ပါတယ်။ အဆိုပါ တန်ဖိုးများကို ပြောင်းလဲခြင်းအားဖြင့် Transition Animation များကို ရေးသားနိုင်မှာ ဖြစ်ပါတယ်။

Properties	Type	Description
interpolator	ObjectProperty<Interpolator>	Transition Cycle တစ်ခုခြင်းစီရဲ့ Acceleration နဲ့ Deceleration လုပ်မဲ့ Timing ကို Control လုပ်ပေးနိုင်ပါတယ်
autoReverse	BooleanProperty	Auto Reverse လုပ်မလား၊ မလုပ်ဘူးလား ဆိုတာကို ဆုံးဖြတ်ပေးနိုင်ပါတယ်
currentRate	ReadOnlyDoubleProperty	လက်ရှိ အလုပ်လုပ်နေတဲ့ အမြန်နှုန်းကို ဖော်ပြပေးနိုင်ပါတယ်
currentTime	ReadOnlyObjectProperty<Duration>	Timeline ပေါ်က လက်ရှိရောက်ရှိနေတဲ့ အချိန်ကို ဖော်ပြပေးနိုင်ပါတယ်
cycleCount	IntegerProperty	Transition ကို ဘယ်နှစ်ကြိမ်လုပ်မလဲ ဆိုတာကို ဆုံးဖြတ်ပေးနိုင်ပါတယ်
cycleDuration	ReadOnlyObjectProperty<Duration>	Cycle တစ်ခု ကို ဆောင်ရွက်ရာတွင် ကြာမည့် အချိန်ကို ဖေါ်ပြပေးနိုင်ပါတယ်
delay	ObjectProperty<Duration>	အချိန်ဘယ်လောက် အကြာမှာ Transition ကို စတင်မလဲဆိုတာကို သတ်မှတ်ပေးနိုင်ပါတယ်
onFinished	ObjectProperty<EventHandler<ActionEvent>>	Transition ပြီးဆုံးချိန်မှာ အလုပ်လုပ်မဲ့ EventHandler Object ကို သတ်မှတ်ပေးနိုင်ပါတယ်
rate	DoubleProperty	Animation တစ်ခုရဲ့ အလုပ်လုပ်မယ့် direction / speed နှုန်းကို ဖော်ပြပေးနိုင်ပါမယ်
status	ReadOnlyObjectProperty<Animation.Status>	လက်ရှိ Animation ရဲ့ အနေအထားကို ဖော်ပြပေးနိုင်ပါမယ်
totalDuration	ReadOnlyObjectProperty<Duration>	Animation တစ်ခုလုံးရဲ့ ကြာချိန်ကို ဖော်ပြပေးနိုင်ပါမယ်

အထက်ဖော်ပြပါ Member Fields တွေကို ကြည့်မယ်ဆိုရင် Property အမျိုးအစားတွေကို အသုံးပြုထားတာကို တွေ့ရပါမယ်။ Property အမျိုးအစားတွေဟာ ၎င်းတို့ရဲ့ တန်ဖိုးပြောင်းလဲမှု့ကို Event အနေနဲ့ ဖော်ပြနိုင်ပြီး အခြား Property Variable တစ်ခုခုနှင့်လည်း Bind လုပ်နိုင်ပါမယ်။ တန်ဖိုးပြောင်းလဲမှု့ အပေါ်မှာ EventHandler တွေကို သတ်မှတ်ထားနိုင်ပြီး အလိုအလျောက် အလုပ်လုပ်နိုင်ရန် စီမံထားနိုင်ပါမယ်။

အထက်ပါ Property များထဲမှာ Read Only Property တွေပါဝင်သလို Read And Write လုပ်နိုင်တဲ့ Property တွေလဲပါဝင်ပါတယ်။ Read Only Property တွေကိုလက်ရှိ Animation ရဲ့ State ကို သိရှိရန် အသုံးပြုပြီး၊ Read And Write Property တွေကို တော့ Animation ရဲ့ Default State ကို ပြုပြင်ရန် အသုံးပြုပါတယ်။

1. Transition Sample 1

2. Transition Sample 2

3. Transition Sample 3

ဆက်ပါဦးမည်။ လေးစားစွာဖြင့်

မင်းလွင်