Day 17 Transition (Part 2)

ပြီးခဲ့တဲ့ ဘလော့ဖြင့်  Java FX ကို သုံးပြီး Transition Animation ကို ရေးသားပုံ အကြောင်းကို ဖော်ပြခဲ့ ပါတယ်။ နမူနာ အနေနဲ့လဲ FadeTransition, RotateTransition, ScaleTransition, SequentialTransition နဲ့ ParallelTransition တို့ကို ရေးသားပြသခဲ့ပါတယ်။

ဒီကနေ့လည်း ဆက်လက်ပြီး Transition ရဲ့ နမူနာတစ်ချို့ကို ရေးသားပြသသွားပါမယ်။ ဒီတစ်ခေါက်တော့ Object တစ်ခုကို တစ်နေရာမှ တစ်နေရာကို ပြောင်းရွှေ့ကြည့်ပါမယ်။ Java FX မှာ Transition ကို သုံးပြီး တစ်နေရာက တစ်နေရာကို ပြောင်းရွှေ့လိုလျင် TranslateTransition နဲ့ PathTransition တို့ကို အသုံးပြုနိုင်မှာ ဖြစ်တယ်။ TranslateTransition ကတော့ Scene ပေါ်က x, y, z တို့ကို သတ်မှတ်ပြီး ပြောင်ရွှေ့လိုတဲ့ နေရာကို ပြောင်းရွှေ့ပေးနိုင်မှာ ဖြစ်ပါတယ်။ PathTransition ကတော့ Path လမ်းကြောင်းတစ်ခုကို သတ်မှတ်ပြီးတော့ အဲ့ဒီ Path လမ်းကြောင်းပေါ်မှာ ရွေ့လျားစေနိုင်မှာ ဖြစ်ပါတယ်။

နမူနာအနေနဲ့ Object တစ်ခုကို ကလစ်နှိပ်လိုက်လျင် ရွေ့လျားစေမဲ့ Animation တစ်ခုကို ရေးသားကြည့်ပါမယ်။

Using TranslateTransition

    private void setStage(Stage stage) {
        
        // to right
        TranslateTransition right = new TranslateTransition
                (Duration.millis(1000), obj);
        right.toXProperty().bind(stage.widthProperty().add(-130));
        
        // to down
        TranslateTransition down = new TranslateTransition
                (Duration.millis(1000), obj);
        down.toYProperty().bind(stage.heightProperty().add(-120));
        
        // to left
        TranslateTransition left = new TranslateTransition
                (Duration.millis(1000), obj);
        left.toXProperty().set(0);
        
        // to top
        TranslateTransition top = new TranslateTransition
                (Duration.millis(1000), obj);
        top.toYProperty().set(0);
        
        stop.setOnAction(a -> stop.getScene().getWindow().hide());
        
        SequentialTransition trans = new SequentialTransition(right, rotate(), 
                down, rotate(), left, rotate(), top, rotate());
        trans.setCycleCount(Timeline.INDEFINITE);
        
        obj.setOnMouseClicked(a -> {
            if(trans.getStatus().equals(Status.RUNNING)) {
                trans.pause();
            } else {
                trans.play();
            }
        });
    }

အထက်ပါနမူနာထဲမှာ လက်ရှိနေရာကနေ ညာဘက်ကို ရွှေ့လိုတဲ့အခါ right ၊ အောက်ကို ရွှေ့ချင်တဲ့အခါ down ၊ ဘယ်ဘက်ကို ရွှေ့လိုတဲ့အခါ left နှင့် အပေါ်ကိုရွှေ့လိုတဲအခါ top object တို့ကို အသုံးပြုမှာ ဖြစ်ပါတယ်။ အဆိုပါ Object တွေအားလုံးဟာ TranslateTransition Object တွေဖြစ်ကြပါတယ်။

TransitionTransition ရဲ့ Object တွေကို Instantiate လုပ်တဲ့နေရာမှာ Argument နှစ်ခုပါတဲ့ Constructor ကို အသုံးပြုထားပါတယ်။ ပထမ Argument ကတော့ Animation Cycle တစ်ခုကို လုပ်ဆောင်တဲ့ အခါမှာကြာမယ့် Duration Object ကို အသုံးပြုရပြီး၊ ဒုတိယ Argument အနေနဲ့ Animation ကို လုပ်ဆောင်စေမယ့် Node Object ကို အသုံးပြုရပါမယ်။ ပြီးတဲ့ အခါမှာ Transition Object အသီးသီးရဲ့ ရွှေ့လျားစေလိုတဲ toX နဲ့ toY ရဲ့ တန်ဖိုးအသီးသီးကို သတ်မှတ်ပေးလိုက်ရုံပဲဖြစ်ပါတယ်။

နမူနာထဲမှာ left object ရဲ့ toXPrpperty ကို stage object ရဲ့ widhtProperty ကို ၁၃၀ နှတ်ပြီး bind လုပ်ထားပါတယ်။ ဒီလို Binding ကို အသုံးပြုခြင်းအားဖြင့် Stage ရဲ့ Size ကို ပြောင်းပြီးတဲ့ နောက်မှာလည်း Dynamically ရွေ့လျားမှု့ကို ပြောင်းပေးနိုင်မှာ ဖြစ်ပါတယ်။

လက်တွေ့ရေးသားပုံ အဆင့်ဆင့်ကို အောက်ပါ ဗွီဒီယိုဖိုင်လ် မှာ လေ့လာနိုင်ပါတယ်။

Using PathTransition

PathTransition ကို အသုံးပြုတဲ့နေရာမှာ Path Object ဟာ အဓိကအချက်ဖြစ်ပါတယ်။ Path Object အတွင်း PathElement Object များကို ဖြည့်စွက်ခြင်းအားဖြင့် လိုအပ်သော Path Shape Object တစ်ခုကို တည်ဆောက်နိုင်မှာဖြစ်ပါတယ်။ အသုံးပြုနိုင်သော PathElement Class ဟာ Abstract Class ဖြစ်ပြီ အသုံးပြုနိုင်မယ့် Concrete Class တွေကတော့ အောက်ပါအတိုင်းဖြစ် ပါတယ်။

Path Element	Description
MoveTo	Path Object အတွင်းသို့ စတင်ဝင်ရောက်မယ့် အမှတ်ကို သတ်မှတ်ပေးနိုင်ပါတယ်
HLineTo	Path အတွင်းရှိလက်ရှိနေရာမှ ရေပြင်ညီ မျဥ်းအတိုင်း အကွာအဝေးတန်ဖိုးကို သတ်မှတ်ပေးနိုင်ပါတယ်
VLineTo	Path အတွင်းရှိလက်ရှိနေရာမှ ဒေါင်လိုက် မျဥ်းအတိုင်း အကွာအဝေးတန်ဖိုးကို သတ်မှတ်ပေးနိုင်ပါတယ်
LineTo	Path အတွင်းရှိလက်ရှိနေရာမှ x နှင့် y တန်ဖိုးကို သတ်မှတ်၍ မျဥ်းတစ်ကြောင်းကို ရေးဆွဲ ပေးနိုင်ပါမယ်
ArcTo	Path အတွင်းရှိလက်ရှိနေရာမှ x နှင့် y တန်ဖိုးကို သတ်မှတ်၍ မျဥ်းကောက်တစ်ခုကို ရေးဆွဲ ပေးနိုင်ပါမယ်
CubicCurveTo	Path အတွင်းရှိလက်ရှိနေရာမှ x နှင့် y တန်ဖိုးကို သတ်မှတ်၍ Cubic Curve မျဥ်းတစ်ကြောင်းကို ရေးဆွဲ ပေးနိုင်ပါမယ်
QuadCurveTo	Path အတွင်းရှိလက်ရှိနေရာမှ x နှင့် y တန်ဖိုးကို သတ်မှတ်၍ Quadratic Curve မျဥ်းတစ်ကြောင်းကို ရေးဆွဲ ပေးနိုင်ပါမယ်
ClosePath	Path အတွင်းရှိလက်ရှိနေရာမှ Path ကို စတင်ခဲ့သော နေရာသို့ မျဥ်းတစ်ကြောင်းကို ရေးဆွဲ ပေးနိုင်ပါမယ်

Path Object ကို တည်ဆောက်တဲ့ နေရာမှာ MoveTo Object ကို စတင်ဖြည့်စွက်၍ လိုအပ်သလို PathElement Object များကို ဖြည့်စွက်ရေးသား ရပါမည်။ Path Object တစ်ခုကို ပရိုဂရမ်အတွင်းရေးသားနိုင်သလို SceneBuilder ဖြင့်လည်း FXML ဖြင့် ရေးသားနိုင်မှာဖြစ်ပါတယ်။ ဤနမူနာထဲမှာတော့ SceneBuilder ကို အသုံးပြုပြီးဖော်ပြသွားပါမယ်။

public class Move implements Initializable{
    
    @FXML
    private Polygon node;
    @FXML
    private Path path;
    
    @Override
    public void initialize(URL location, ResourceBundle resources) {
        PathTransition pathTrans = new PathTransition(Duration.millis(4000), 
                path, node);
        pathTrans.setCycleCount(Timeline.INDEFINITE);
        
        SequentialTransition seq = new SequentialTransition(getRot(), 
                getRot(), getRot(), getRot());
        seq.setCycleCount(Timeline.INDEFINITE);
        
        ParallelTransition paral = new ParallelTransition(pathTrans, seq);
        
        node.setOnMouseClicked(a -> {
            if(paral.getStatus().equals(Status.RUNNING)) {
                paral.pause();
            } else {
                paral.play();
            }
        });
    }
    
    private SequentialTransition getRot() {
        RotateTransition rot = new RotateTransition(Duration.millis(50), node);
        rot.setByAngle(90);
        return new SequentialTransition(new PauseTransition
                (Duration.millis(950)), rot);
    }
}

အထက်ပါ နမူနာထဲမှာကြည့်မယ် ဆိုရင် FXML ဖိုင်လ်ထဲကနေ Inject လုပ်ပြီးသုံးမယ့် Polygon နဲ့ Path Object နှစ်ခုကို @FXML Annotation ကို သုံးပြီး ရေးထားပါတယ်။ အဆိုပါ Object များကို သုံးပြီး initialize method ထဲမှာ PathTransition Object ကို တည်ဆောက်နေပါတယ်။

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

ကျွန်တော်တို့ အရင်တစ်ကြိမ်ရေးသားခဲ့သော Day 16 Transition (Part 1) အပါအဝင် Transition Animation အကြောင်းအား နှစ်ကြိမ်ဆက်တိုက် ရေးသား ဖော်ပြခဲပါတယ်။ Java FX ရဲ့ Transition ကို အသုံးပြုပြီး အသုံးများသော Animation များကို အလွယ်တကူ အသုံးပြုနိုင်မှာ ဖြစ်ပါတယ်။

အထက်ပါ ဗွီဒီယိုဖိုင်လ် ထဲမှာသုံးထားတဲ့ Slide Show လေးဟာလဲ TranslateTransition ကို အသုံးပြုပြီးရေးသားထားတာဖြစ်ပါတယ်။ နောက် အခေါက်များမှပဲ ရေးသားပုံအား ဆက်လက်ဖေါ်ပြသွားပါမည်။

လေးစားစွားဖြင့်

မင်းလွင်