[안드로이드 스튜디오] 오늘의 명언 - 인트로화면에 애니메이션 효과주기

 

 

이번 포스팅에서는 인트로화면에 텍스트뷰를 이용해 애니메이션 효과주는 법을 적어보도록 하겠습니다.

 

우선 아래 이미지를 보시면 텍스트뷰에 애니메이션 효과를 준 것을 볼 수 있습니다.

 

 

인트로 애니메이션

 

 

애니메이션 효과를 주기 위해서는 우선 res에 오른쪽 클릭 메뉴에서 NEW => Android Resource directory 을 선택하신 후 팝업창에서 Resource type 에서 anim를 선택하신 후 OK 버튼을 누르면 res 디렉토리 밑에 anim이라는 디렉토리가 생성됩니다.

생성된 anim 디렉토리에서 다시 NEW를 하시고 Animation Resource File를 선택하시고 팝업창에서 적당한 이름을 주시고 OK하시면 아래 그림과 같이 xml 파일이 만들어집니다.

 

 

 

저는 위에서 내려오는 효과를 주기위해서 top.xml 이라고 했습니다.

 

top.xml 소스를 보시면 아래와 같습니다

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/bounce_interpolator">

    <translate
        android:duration="2000"
        android:fromYDelta="-100%p"
        android:toYDelta="0"
        android:repeatCount="0"
        android:repeatMode="reverse" />

</set>

android:interpolator="@android:anim/bounce_interpolator" 이 부분에서 어떤 효과를 어떻게 줄것인지 지정할 수 있습니다.

 

linear_interpolator : 일정하게

accelerate_interpolator : 점점 빠르게

decelerate_interpolator : 점점 느리게

accelerate_decelerate_interpolator : 위의 둘을 동시에

anticipate_interpolator : 시작위치에서 조금 뒤로 이동햇다가 이동

overshoot_interpolator : 도착위치를 조금 지나쳣다가 도착위치로 이동

anticipate_overshoot_interpolator : 위의 둘을 동시에

bounce_interpolator : 도착위치에서 튕김

cycle_interpolator : 반복

 

저 같은 경우 위에서 아래로 내려오면 튕기게 하려고 bounce_interpolator로 설정했습니다.

 

그리고

duration - 애니메이션 시간입니다. 미리세컨드이기 때문에 저는 2초로 설정했습니다.

 

fromYDelta - Y축의 시작 위치를 나타냅니다.  상단에서 내려올거기 때문에 -100%p으로 주었고 밑에서 올라올려면 100%p를 주시면 됩니다.

 

toYDelta - Y축의 도착 위치입니다. 0으로 준것은 레이아웃에서 지정한 위치를 나타냅니다. 

 

repeatCount - 반복횟수입니다. 저는 한번만 할거라서 0을 주였으며 숫자를 늘리시면 반복해서 실행됩니다.

 

repeatMode - 애니메이션이 애니메이션의 끝 부분에 도달했을 때의 동작입니다. repeatMode는 두가지가 있는데  "repeat",  "reverse"입니다.  repeat는 동일한 애니메이션을, reverse는 반대로 실행합니다. 예를 들면 repeat는 위에서 아래,  위에서 아래 이렇게 반복하고 reverse는 위에서 아래, 아래에서 위 이렇게 반복합니다. 단, repeatMode는 repeatCount를 1 이상으로 주셔야 동작합니다.

저는 0으로 줬기때문에 아무 의미 없습니다.

 

이제 애니메이션 xml을 만들었으니 textview에 적용해 보도록 하겠습니다.

public class IntroActivity extends AppCompatActivity
{
    TextView txtTitle;

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_intro);

		//타이틀 텍스트뷰
		txtTitle = (TextView) findViewById(R.id.txttitle);
    }

    @Override
    protected void onStart()
    {
        super.onStart();

        Animation animTreanTop = AnimationUtils.loadAnimation(getApplication(), R.anim.top);
        txtTitle.startAnimation(animTreanTop);
	}
}

먼저 인트로 액티비티의 onCreate 부분에 텍스트뷰를 나타내는 변수(txtTitle) 지정하고 onStart 부분에서 애니메이션 변수(animTreanTop)를 선언하고 위에서 xml로 만들었던 R.anim.top 을 지정했습니다.

그리고 밑에서

txtTitle.startAnimation(animTreanTop);

텍스트뷰 변수의 startAnimation 메서드에 애니메이션 변수를 넣어주면 인트로가 시작함과 동시에 2초동안 애니메이션이 진행됩니다.

 

이번 애니메이션은 위에서 아래로 떨어지는 걸 만들것이기 때문에 translate를 사용했는데

rotate - 회전을 하거나

alpha - 나타나고 사라지게 하고

scale - 크게 또는 작게 할 수도 있습니다. 

 

다음 포스팅에서는 아래 그림처럼 카드가 돌면서 나타나고 화면이 전환되는 효과를 적어보도록 하겠습니다.

 

 

 

 

혹시 앱이 궁금하신 분은 아래 링크로 들어가시면 다운받을 수 있으시니 한번 다운받아서 설치해보시고 리뷰 남겨주시면 감사하겠습니다. ^^;;;

https://play.google.com/store/apps/details?id=com.withu.todayssaying

오늘의 명언(명언, 고사성어, 속담) - Google Play 앱