[Android] Animation - Translate, Alpha

로그인 Activity를 구현해야 했다. 로고 로딩 -> 로그인 폼의 순서였는데, 그냥 밋밋하게 화면 전환을 주기는 싫었다. 여러 어플들에서 봤었던 Animation을 구현해보기로 하였다. xml을 사용해서 하는 방법과, 자바 코드 내에서 하는 방법이 있는데, 전자의 경우 수업시간에 한 번 경험해 보았기 때문에 자바 코드 내에서 해보기로 하였다.

내가 원하는 그림은, 로고가 1~2초간 뜨고, 위로 약간 이동하면서 로그인 폼이 1~2초간 나타나는 것이었다.

로고 이동을 위해선 TranslateAnimation이 필요하고, 밝기 변화를 위해선 AlphaAnimation이 필요하다. 아래 onCreate부분만 가져왔다.

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

        imgView = findViewById(R.id.logoImg);
        loginForm = findViewById(R.id.loginfrom_view);

        logoAni = new TranslateAnimation(0, 0, 0, -250); // from 어디서 to 어디까지 이동할건지. 가운데를 중심으로 위, 왼쪽: - 아래, 오른쪽: +
        logoAni.setDuration(2000); // 지속시간
        logoAni.setFillAfter(true); // 이동 후 이동한 자리에 남아있을건지
        logoAni.setStartOffset(1500); // 딜레이

        loginFormAni = new AlphaAnimation(0, 1);
        loginFormAni.setDuration(1000);
        loginFormAni.setStartOffset(2500);

        imgView.setAnimation(logoAni); // 애니메이션을 세팅해줌
        loginForm.setAnimation(loginFormAni);
    }

위 코드의 결과로 나온 앱이다.

https://youtu.be/TFAUvpSrlM8

 

이외에도 확대, 축소를 원한다면 Scale, 회전은 rotate, 조금 더 자세한 효과는 interpolator, 이벤트 리스너는 AnimationListener를 이용하면 된다.

애니메이션을 구현하는것도 디자인처럼 재미있었다. 물론 아직 미숙해 개발하는 데에 시간이 조금 들겠지만 계속하다 보면 점점 줄어들지 않을까 싶다.

 

 

참고 : https://tourspace.tistory.com/18

 

https://github.com/gurdlwl/Android_ShoppingMall/blob/6f78e04b5139d27bc7245f9df0dd3a458bf21830/app/src/main/java/ijh/dgsw/hs/kr/androidshopping/LoginActivity.java

gurdlwl/Android_ShoppingMall