'안드로이드 애니메이션'에 해당되는 글 2건

  1. 2013.07.19 안드로이드 애니메이션 샘플 요약
  2. 2013.07.19 [translate, alpha] 안드로이드 애니메이션
728x90

alpha : 서서히 나타나는 애니메이션, 스플래시 윈도우나 뷰들을 자연스럽게 나타내고자 할때 사용( 알파값을 반대로 하면 서서히 사라짐)


<alpha xmlns:android="http://schemas.android.com/apk/res/android"

android:interpolator="@android:anim/accelerate_interpolator"

android:fromAlpha="0.0"

android:toAlpha="1.0"

android:duration=@android:integer/config_longAnimTime" />


translate : 이동


<translate

android:fromXDelta="100%p" android:toXDelta="0"

android:duration="@android:integer/config_shortAnimTime" />


[왼쪽으로 이동하며 서서히 나타남]


<set xmlns:android="http://schemas.android.com/apk/res/android">

<translate android:fromXDelta="100%p" android:toXDelta="0" android:duration="300" />

<alpha android:fromAlpha="0.0" android:toAlpha="1.0" android:duration="300" />

</set>


[왼쪽으로 이동하며 서서히 사라짐]


<set xmlns:android="http://schemas.android.com/apk/res/android">

<translate android:fromXDelta="0" android:toXDelta="-100%p" android:duration="300" />

<alpha android:fromAlpha="1.0" android:toAlpha="0.0" android:duration="300" />

</set>


[위로 이동하며 나타나기]


<set xmlns:android="http://schemas.android.com/apk/res/android">

<translate android:fromYDelta="100%p" android:toYDelta="0" android:duration="300" />

<alpha android:fromAlpha="0.0" android:toAlpha="1.0" android:duration="300" />

</set>


[7번 흔들기]


<translate  xmlns:android="http://schemas.android.com/apk/res/android"

    android:fromXDelta="0" android:toXDelta="10" android:duration="1000" 

    android:interpolator="@anim/cycle_test" />

 

sclae + alpha를 사용한 축소되며 사라지기


<set xmlns:android="http://schemas.android.com/apk/res/android"

android:interpolator="@android:anim/decelerate_interpolator"

android:zAdjustment="top">

<scale android:fromXScale="1.0" android:toXScale=".5"

android:fromYScale="1.0" android:toYScale=".5"

android:pivotX="50%p" android:pivotY="50%p"

android:duration="@android:integer/config_mediumAnimTime" />

<alpha android:fromAlpha="1.0" android:toAlpha="0"

android:duration="@android:integer/confg_mediumAnimTime"/>

</set>


서서히 나타나며 원래 크기보다 커졌다가 원래크기로 돌아가는 애니메이션


<set xmlns:android="http://schemas.android.com/apk/res/android"

android:interpolator="@android:anim/decelerate_interpolator"

<alpha

android:fromAlpha="0.0"

android:toAlpha="1.0"

android:duration="100" />

<scale

android:fromXScale="0.5" android:toXScale="1.5"

android:fromYScale="0.5" android:toYScale="1.5"

android:pivotX="50%" android:pivotY="50%"

android:duration="200" />

<scale

android:fromXScale="1.5" android:toXScale="1.0"

android:fromYScale="1.5" android:toYScale="1.0"

android:pivotX="50%" android:pivotY="50%"

android:startOffset="200"

android:duration="100" />

</set>


레이아웃 애니메이션 : 레이아웃에 포함된 각 뷰들이 보여지는 애니메이션 설정


<layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android"

android:delay="0.5"

android:animationOrder="random"

android:animation="@anim/설정할 애니메이션" />


728x90
Posted by 정망스
,
728x90

안드로이드에서 애니메이션을 만들려면

 

1. XML로 어떻게 동작하는지 정의

2. 소스에 에니메이션 객체를 불러 startAnimation()을 통해 동작

 

1. XML 정의

프로젝트 내의 res/anim 폴더 밑에 원하는 애니메이션 xml을 정의 한다.

 

 

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
   android:interpolator="@android:anim/decelerate_interpolator">
   <translate
       android:fromXDelta="100%p"
       android:toXDelta="0"
       android:duration="500"/>

    <alpha

       android:fromAlpha="1.0"

       android:toAlpha="0.0"

       android:duration="500"

       android:repeatCount="1000000"/>
</set>

이 코드는 translate와, alpha를 사용한 페이드 아웃 애니메이션이다

우선, translate는 뷰나 기타 구성요소들의 위치 이동을 지정하는 태그이다.

fromXDelta는 X축 어디서부터 이동할것인지, toXDelta는 x축 어디까지 이동할 것인지를 의미한다.

 

위 코드에서는 100%부터 0%까지 이동하는 것으로 오른쪽 끝지점에서 왼쪽 끝지점으로 이동하게 된다.

 

alpha에서는 fromAlpha="0.0"  fromAlpha="1.0"으로 바꾸면 페이드 인 애니메이션이 된다.

[페이드 아웃 : 화면이 점차 어두워지면서 장면이 바뀌는 것]

[페이드 인: 화면이 점차 밝아 지면서 장면이 바뀌는 것]

 

양 태그에 존재하는 duration은 지속 시간을 의미하며 단위는 1/1000 sec이다 1000을 입력하면 1초를 의미한다.

 

repeatCount는 애니메이션이 반복될 횟수를 지정한다.

만약 여러 애니메이션을 설정하고 싶으면 <set>태그를 사용한다

 

각 애니메이션별로 속성값이 있는 애니메이션의 속성을 사용해야 된다.

 

alpha - fromAlpha, toAlpha

scale - fromXScale, toXScale, fromYScale, toYScale, pivotX, pivotY fillAfter, fillBefore

rotate - fromDegrees, toDegrees, pivotX, pivotY, startOffset

translate - toXDelta, toYDelta

 

2. 코드에 적용

 

 

public class AnimationActivity extend Activity {

       Animation animation;

 

       @Override

       public void onCreate(Bundel saveInstanceState) {

             super.onCreate(saveInstanceState);

             setecontentView(R.layout.main);

 

             animation = AnimationUtils.loadAnimation(this, R.anim.animation);

 

             View.startAnimation(animation);

 

             ....

        }

 

       ....

}

 

xml에 정의된 애니메이션 설정들을 부르기 위해서 AnimationUtils 객체를 사용했다.

애니메이션을 보이기 위해서는

View.startAnimation(animain);을 통하여 동작할 수 있다.

728x90
Posted by 정망스
,


맨 위로
홈으로 ▲위로 ▼아래로 ♥댓글쓰기 새로고침