4. 애니메이션 조합

Animation 조합

하나의 Animation으로는 표현할수 없는 것들이 많습니다. 이동하면서 동시에 회전을 한다던지 크기의 변화에 따라 Color가 바뀌는 등 복합적인 표현이 필요할때가 많습니다.
Propose는 간단하게 Animation들을 조합하여 새로운 모션을 만들수 있습니다.

Chanaing 방식으로 with와 next 메소드를 사용하여 조합합니다.
with는 앞의 애니메이션과 동시에 진행되며 next는 앞의 애니메이션이 끝난후 진행됩니다.

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

Note : 각각의 animation들의 duration을 반드시 설정해야 합니다.
duration을 기준으로 모션의 비율을 환산하기 때문입니다.

with() method

• with 메소드는 Chanaing의 바로 앞 Animation과 동시에 play 됩니다.
  

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

Note : anim2는 anim1이 play 될때 함께 play 됩니다.
또한 anim3는 anim2가 play 될때 함께 play 됩니다.

• 우측으로 이동하면서 동시에 360도 회전을 하는 Motion을 구현 해보도록 해죠.

// 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 메소드는 Chanaing의 바로 앞 Animation이 끝난 이후 play 됩니다.
  

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

Note : anim2는 anim1이 animation이 끝난 이후 play 됩니다.
또한 anim3는 anim2의 animation이 끝나 이후 play 됩니다.

with와 next 메소드를 조합하여 하나의 animation으로 구성할수 있습니다.
또한 duration을 설정하여 animation의 속도와 타이밍을 조절할수 있습니다.

Motion 조합

지금까지 한가지 방향에서만 Motion을 play 했습니다. Propose는 동시에 여러가지 방향으로 Motion을 play할수 있게 지원합니다.

Motion을 조합하면 대각선에 대한 움직임을 조작할수 있게 됩니다. 이로써 View가 손가락을따라 움직이는 등 여러가지 표현이 가능합니다.

조합하는 방법은 아주 간단합니다. 단순히 필요한 Motion에 애니메이션만 추가하면 됩니다.

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

위 두가지 방향만 조합하도 이동하는 View를 만들수 있습니다.
4가지 방향 전부를 사용하여 이동하는 View를 만들어보죠

Propose 조합

마지막으로 Propose 객체간의 조합도 가능합니다. Propose는 TouchEvent에 관련하여 개발자가 직접 컨트롤할수 있습니다. TouchEvent에 따라서 필요한 모션을 선택한다던지 동시에 여러개의 Propose를 동시에 play 할수도 있습니다. 또한 개발자가 직접 만든 TouchEvent를 추가할수도 있습니다.

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;
	}
});

개발자가 직접 작성한 yourTouchListener(v,event)의 결과에 따라 propose1과 propose2의 모션이 play됩니다.
이처럼 여러개의 TouchListener를 조합할수 있게 Propose는 설계되었습니다.
Animation, Motion, Propose를 유연하게 구성하고 조합함으로써 보다 자유도 높은 모션을 구현할수 있습니다.

다음 > 이벤트