그러면 이번시간에는 TweeningAnimAppActivity.java 파일을 분석해 보겠습니다.
public class TweeningAnimAppActivity extends Activity {
ImageView imgView;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_tweening_anim_app);
Button alphaButton = (Button) findViewById(R.id.alpha_button);
Button rotateButton = (Button) findViewById(R.id.rotate_button);
Button scaleButton = (Button) findViewById(R.id.scale_button);
Button translateButton = (Button) findViewById(R.id.translate_button);
imgView = (ImageView)findViewById(R.id.imgview);
rotateButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
RotateAnimation animation = new RotateAnimation(0,180, Animation.RELATIVE_TO_SELF,0.0f, Animation.ABSOLUTE, 0.2f);
animation.setDuration(3000);
imgView.setAnimation(animation);
animation.start();
}
});
alphaButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Animation animation = new AlphaAnimation(1.0f, 0.1f);
animation.setDuration(3000);
imgView.setAnimation(animation);
animation.start();
}
});
scaleButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
AnimationSet set = new AnimationSet(true);
Animation animation1 = new ScaleAnimation(1.0f, 2.0f,1.0f, 2.0f,Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
animation1.setDuration(3000);
set.addAnimation(animation1);
Animation animation2 = new ScaleAnimation(1.0f, 0.5f, 1.0f, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
animation2.setDuration(3000);
animation2.setStartOffset(3000);
set.addAnimation(animation2);
imgView.startAnimation(set);
}
});
translateButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
AnimationSet set = new AnimationSet(true);
Animation animation1 = new TranslateAnimation(0,-150,0,0);
animation1.setDuration(3000);
animation1.setFillAfter(true);
set.addAnimation(animation1);
Animation animation2 = new TranslateAnimation(0,0,0,200);
animation2.setDuration(3000);
animation2.setStartOffset(3000);
animation2.setFillAfter(true);
set.addAnimation(animation2);
imgView.startAnimation(set);
}
});
}
}
우선 첫 줄에는 ImageView 를 초기화 시켰습니다.
이 ImageView에 애니메이션 효과를 적용할 겁니다.
그 다음 onCreate() 메소드를 봐야겠죠.
이전 글에서 다뤘던 activity_tweening_anim_app.xml 을 ContentView 로 세팅했습니다.
버튼 4개와 1개의 이미지뷰로 구성된 RelativeLayout 이었죠.
그 다음에는 버튼 4개에 대한 객체를 만들었습니다.
xml 에 있는 이런 view를 객체로 만들때는 findViewById()를 사용하죠.
그리고 아까 초기화 했던 imgView 객체도 만들구요.
그 다음에는 4개의 버튼들에 리스너를 달아주는 부분입니다.
rotateButton을 클릭했을 때는 어제 봤던 RotateAnimation 클래스를 실행시켜 줍니다.
애니메이션 시간은 3초로 하고 이 애니메이션은 imgView에 적용합니다.
마지막 animation.start()를 호출해서 실제 애니메이션을 실행합니다.
alphaButton에는 AlphaAnimation()클래스를 호출하는 부분을 넣었습니다.
그 이후는 rotateButton과 같습니다.
scaleButton에는 위와 다른 부분이 있네요.
처음에 AnimationSet()에 대한 객체를 만들었습니다.
그리고 ScaleAnimation()를 3초간 실행한다는 것을 AnimationSet에 add를 하구요.
그 다음에 다시 ScaleAnimation() 을 3초간 실행하고 3초간 StartOffset()을 실행한다는 것을 AnimationSet 에 add를 했습니다.
마지막에는 이 AnimationSet를 start 했구요.
setStartOffset()은 해당 시간만큼 지연해서 애니메이션을 시작한다는 겁니다.
그러니까 여기서는 첫번째 ScaleAnimation()이 3초간 이뤄지니까 그 3초가 지난다음에 두번째 ScaleAnimation()이 시작된다는 얘기죠.
transateButton에도 AnimationSet 가 적용이 됐는데요. 여기는 또 다른 setFillAfter(true) 가 있습니다.
이것을 true로 하게 되면 애니메이션이 끝난 다음에 다시 원래 위치로 돌아가지 않고 종료된 위치에 정지해 있는 겁니다.
여기서는 첫번째 TranslateAnimation() 은 왼쪽으로 150 만큼 3초간 가고 그 다음은 아래로 200만큼 3초간 움직일 것 같네요.
첫번째 애니메이션이 끝난 후 그 끝난 위치에서 이 ImageView가 아래로 움직일 겁니다.
다시 원위치로 가서 아래로 움직이는게 아니라요.
ㄱ 자를 거울로 본 모양으로 ImageView가 움직이겠네요.
이 앱을 실행하면 아래와 같은 화면이 나옵니다.
처음에 Alpha 버튼을 누르면 그림이 3초간 점점 흐려졌다가 다시 원래로 돌아옵니다.
new AlphaAnimation(1.0f, 0.1f)
이게 그렇게 만든건데요.
1.0 에서 0.1 까지 투명도가 변한다는 겁니다.
이건 간단하게 이해할 수 있습니다.
숫자를 반대로 주면 흐린상태에서 점점 뚜렷한 상태로 변하게 되겠죠.
앱 시작할 때 로고를 이렇게 흐리게 했다가 다시 진하게 하는 효과를 줄 수도 있을 것 같네요.
두번째 Rotate 는 이미지를 가운데를 중심으로 바람개비 돌듯이 한바퀴 돌리는 겁니다.
예전에 제가 Spin the Bottle 앱을 만들 때 이 애니메이션으로 구현하려고 막 노력한적이 있었습니다.
막 for문 써서 계속 돌아가다가 일정 시간 지나면 천천히 돌다가 멈추도록 하는거요.
그러다가 이 애니메이션가지고는 Reality 를 살리지 못하겠다고 판단해서 다른 방법을 찾았습니다.
저는 SurfaceView를 사용해서 Spin the Bottle 에서 병 돌아가는 효과를 주었습니다.
어쨌든 이 RotateAnimation() 도 필요할 때가 있을 텐데요.
RotateAnimation animation = new RotateAnimation(0,360, Animation.RELATIVE_TO_SELF,0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
파라미터를 보면요.
처음 두 파라미터인 0도에서 360도 돈다는 것은 쉽게 이해할 수 있습니다.
세번째 파라미터는 해당 object가 돌아가는 중심이라고 했습니다. pivotXType인데요. 여기는 정수형이 들어갑니다.
이 값이 0이면 왼쪽을 나타냅니다.
여기에 들어가는 값은 Animation.ABSOLUTE와 Animation.RELATIVE_TO_SELF, Animation.RELATIVE_TO_PARENT. 등이 있습니다.
이 소스에는 Animation.RELATIVE_TO_SELF 가 적용됐는데요. 그 값은 1 입니다.
이 1이 적용됐을 때 그 객체는 자신의 가운데 포인트를 중심으로 Rotate 하게 됩니다. 바람개비처럼요.
이것을 Animation.ABSOLUTE로 바꿔주면 이미지 왼쪽을 중심으로 이미지가 한바퀴 빙 돌게 됩니다.
이 Animation.ABSOLUTE의 값이 0입니다.
다음에 나오는 Animation.RELATIVE_TO_PARENT 의 값은 2 입니다.
이 값을 여기에 넣으면 이미지가 아니라 화면의 오른쪽 끝을 중심으로 크게 원을 도네요.
여기에 Integer가 들어갈 수 있으니까 제가 한번 3도 넣어보고 4도 넣어 봤거든요.
그랬더니 0 (Animation.ABSOLUTE) 일때와 같은 결과가 나오네요.
그 다음 파라미터는 pivotXvalue 인데 여기서는 0.5f가 설정됐습니다.
이것을 0.9로 한번 바꾸면 어떻게 될까요?
그러면 바람개비 처럼 돌던것이 이미지 오른쪽을 중심으로 도네요.
아까 pivotXType을 Animation.ABSOLUTE로 했을 때 이미지 왼쪽을 중심으로 도는것과 딴 반대의 경우입니다.
1.5로 하면 이미지의 더 오른쪽을 중심으로 돌구요.
그 이후에 나오는 Parameter 인 pivotYType과 pivotYvalue 도 x,y 축만 바꿔서 비슷한 효과를 줍니다.
이 값들을 이것 저것 여러개 바꿔봤는데요.
이 애니메이션을 가지고 flipping 효과를 줄 수는 없겠네요.
이 방법은 다른데서 찾아봐야겠습니다.
그리고 에뮬레이터로 실행하니까 시간이 오래 걸려서 다양한 시도는 못 해 보겠습니다.
다음으로 ScaleAnimation()을 보죠.
ScaleAnimation(1.0f, 2.0f,1.0f, 2.0f,Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
처음부터 4번째까지의 파라미터들은 fromX,toX,fromY,toY 입니다.
그러니까 전체적으로 이미지가 2배 커지게 되겠네요.
그 다음 4개는 위 RotateAnimation 과 마찬가지로 pivotXType,pivotXvalue,pivotYType,pivotYvalue 입니다.
이것도 Scaling의 중심부분을 잡아주는 파라미터들입니다.
그 다음에 나오는 translate 애니메이션을 보죠.
TranslateAnimation(0,-150,0,0);
fromXDelta,toXDelta,fromYDelta,toYDelta 입니다.
이미지의 출발과 종료 지점을 나타내는 겁니다.
위의 값은 toXDelta만 -150이니까 왼쪽으로 150만큼 이동한다는 의미입니다.
flipping 애니메이션 효과를 찾으려고 하다가 보게 된 Tweening Animation 예제였었는데요.
어쨌던 이 4가지 안드로이드에서 제공하는 애니메이션 클래스에 대해 자세하게 배운것 같습니다.
이건 여기서 만족하고 책이나 인터넷 써칭을 통해서 flipping 효과를 어떻게 낼지에 대해서 더 research 해 봐야 겠습니다.
'WEB_APP > Android' 카테고리의 다른 글
| [Cookbook] 안드로이드 Cores 와 Threads 이해하기 -4- (0) | 2013.09.24 |
|---|---|
| [Cookbook] 안드로이드 Cores 와 Threads 이해하기 -3- (0) | 2013.09.24 |
| [Cookbook] 안드로이드 Cores 와 Threads 이해하기 -2- (0) | 2013.09.23 |
| [Cookbook] 안드로이드 Cores 와 Threads 이해하기 -1- (0) | 2013.09.23 |
| [CookBook] 원격에서JSON 데이터 받아와서 사용하기 (0) | 2013.09.20 |
| [CookBook] Tweening Animation 소스 분석하기 -1- (0) | 2013.09.18 |
| [PageSliding] SamplePageSliding 소스 파일 분석하기 (0) | 2013.09.17 |
| [ViewPager] SampleVIewPager 소스 파일 분석하기 -2- (0) | 2013.09.16 |
| [ViewPager] SampleVIewPager 소스 파일 분석하기 -1- (0) | 2013.09.15 |
| [ViewFlipper] SampleVIewFlipper 소스 파일 분석하기 -3- (0) | 2013.09.14 |
