4. Combining animation

Combining Animation

There are certain limitations on single animation. You may want to express combined animations: moving plus rotating, changing its color while resizing, etc.
Propose enables us to combine animations.

You can use chaining to combine animations.
'With' method is used when you want to combine the animation with the previous animation, and 'Next' method can be used when you want to animate something after the previous animation finishes.

propose.motionRight.play(anim1).with(anim2).next(anim3).next(anim4).with(anim5);

Note : You should define durations for each animation because the ratio of motions will be calculated based on the duration.

with() method

• 'With' method plays the animation with the previous animation.
  

propose.motionLeft.play(anim1).with(anim2).with(anim3);

Note : anim2 will be played with anim1.
Also, anim3 will be play with anim2.

• Let's implement a motion that rotates 360 degrees while moving to the right.

// create move ObjectAnimator
ObjectAnimator move_anim = ObjectAnimator.ofFloat(textView1, View.TRANSLATION_X, 0f,moveWidth);
move_anim.setDuration(2000); 
// create rotation ObjectAnimator
ObjectAnimator rotation_anim = ObjectAnimator.ofFloat(textView1, View.ROTATION_X, 0,360);
rotation_anim.setDuration(1000); 

// create propose, use Right motion
Propose propose = new Propose(this);
propose.motionRight.play(move_anim).with(rotation_anim); //move with rotation
textView1.setOnTouchListener(propose);

Result

next() method

• 'Next' method plays the animation after the previous animation has finished.
  

propose.motionLeft.play(anim1).next(anim2).next(anim3);

Note : anim2 plays right after anim1 is done.
And anim3 starts after anim2.

You can make animations combining With and Next methods.
Plus, you can adjust its velocity and timing by setting the duration.

Combining Motion

We've played motions in one direction. Propose supports playing multiple motions with different directions. For example, you can implement diagonal movement by combining motions. Similarly you can implement various expressions such as views following your finger.

The way it combines is very easy. You can simply add animations to the motion.

propose.motionRight.play(anim1);
propose.motionDown.play(anim2);

You can make a view move even with a single combination of two animations, Let's make a moving view combining four directions.

Combining Propose

Lastly, Propose supports combining objects. Propose lets developers control the touch events. You can play multiple Proposes depending on touch events. In addition, you can add your own touch events.

textView.setOnTouchListener(new OnTouchListener() {
	public boolean onTouch(View v, MotionEvent event) {
		boolean result = yourTouchListener(v,event);
		if(!result){
			propose1.onTouch(v, event);
			propose2.onTouch(v, event);
		}
		return true;
	}
});

The motions of propose1 and propose2 will be played based on the result of yourTouchListener(v,event) which is written by developers.
In this method, Propose provides a way to combine TouchListeners.
In this way, you can implement much more flexible motions by freely combining animation, motion and propose.

Next > Event