Skip to content

3. Motion

JaeWoong Oh edited this page Jun 19, 2017 · 35 revisions

Motion

In Propose, we call all kinds of touch events Motion Motion has four properties: up, down, left, right. And click, touchUp, drag, fling gestures are implemented inside.
Animation will be played during the setup duration time, but Motion will be shown depending on the distance.

Directions of the Motion

Propose class has 4 types of Mation class objects: motionLeft, motionRight, motionUp, motionDown.
You can play the Motion once you pass the ObjectAnimator and ValueAnimator as parameters to the Motion class.

propose.motionLeft.play(yourAnimator);  //left
propose.motionRight.play(yourAnimator); //right
propose.motionUp.play(yourAnimator);    //up
propose.motionDown.play(yourAnimator);  //down
  • For example, we can implement ObjectAnimator which makes view disappear with the code below.
// create Left alpha ObjectAnimator
ObjectAnimator anim1 = ObjectAnimator.ofFloat(left_txt, View.ALPHA, 1f,0f);
Propose propose1 = new Propose(this);
propose1.motionLeft.play(anim1); //Motion Left
propose1.motionLeft.setMotionDistance(150*Propose.getDensity(this));
propose1.motionLeft.enableTabUp(false).enableFling(false);
left_txt.setOnTouchListener(propose1);

// create Right alpha ObjectAnimator
ObjectAnimator anim2 = ObjectAnimator.ofFloat(right_txt, View.ALPHA, 1f,0f);
Propose propose2 = new Propose(this); 
propose2.motionRight.play(anim2); //Motion Right
propose2.motionRight.setMotionDistance(150*Propose.getDensity(this)); 
propose2.motionRight.enableTabUp(false).enableFling(false);
right_txt.setOnTouchListener(propose2);

If you want it to disappear when you drag it to the left, apply motionLeft, or if you want to make it disapear while you're dragging it to the right, choose the motionRight.

alpha view
alpha view

Motion Distance

In Motion class, click, touchUp, drag, fling guestures are already implemented using ObjectAnimator and ValueAnimator.
Among those gestures, drag and fling gestures play animations based on distance of motion. For instance, if you set the distance to 100dp and drag it 50dp, 50% of the animation will be played. In the same way, if you drag 70dp, 70% of the animation will be played.

propose.motionRight.setMotionDistance(100*density); //distance 100dp

In this way, motion animation will be played based on distance, and fling animation will be played the rest of the animation depending on the acceleration.

distance test
distance_test
If you don't setup the specific motion distance, window size will be set to the motion distance by default.


On the other hand, click and touchUp gestures play the animations based on duration. For example, when you start the animation of the click gesture, it's same with calling start() method of the ObjectAnimator. touchUp plays its animation based on the duration which is calculated from the ratio of distance.

duration test
duration_test
If you don't set duration, Motion Distance will be set by the default.

To summarize, while drag and fling plays with MotionDistance, click and touchUp plays animation based on the duration.

Reverse Animation

Once the animation is finished, reverse animation will be automatically applied.

  • There are many situations where reverse animation is needed such as open and close sliding animation of the SlidingMenu. In those cases, normal and reverse animations were both needed to be implemented.
    However, as Propse supports reverse animation, you can handle those situation with just single animation.

Note : You can enable reverse animation simply by calling enableReverse(boolean) method.