Activity 애니메이션의 모든것


Activity 애니메이션의 모든것

요즘 앱들을 보면 화면 전환시 기본 애니메이션이 아닌 커스텀 애니메이션을 쓰는 경우가 많아 졌다. 그 중 대표적으로 플립보드에서 화면전환시 이전화면은 밑으로 빠지면서 다음화면은 오른쪽에서 왼쪽으로 애니메이션을 볼 수있다. 국내 카카스토리도 자세히 보면 비슷한 애니메이션을 사용 하고 있다.

이처럼 화면전환 효과로 인해 좀더 퀄리티 있는 앱을 개발할 수 있다.

그럼 어떻게 화면전환시 에니매이션 효과를 줄 수 있는지 하나씩 설명 해보겠다.

화면 전환 애니메이션을 구현 하기위해 필요한건 overridePendingTransition() 메소드 하나면 충분 하다.

overridePendingTransition() Adnroid SDK API 설명을 간략히 요약 하자면 startActivity(), finish() 직후 명시적으로 전환 애니메이션을 지정할 수 있다고 정의 되어 있다. 

startActivity는 onCreate()를 말하며 finish()는 당연히 finish()를 말한다. 이렇게 알고는 있지만 몇몇 개발자들은 해보니까 안되는 분들이 많을 것이다. 안되는 이유는 Super 전/후 어디에서 호출 되야 되는지 몰라서 그런 것이다.

onCreate()는 당연히 화면이 그려지고 애니메이션을 해야 되기때문에 super.onCreate()후 finish()도 super.finish()후 이다.

    @Override
    public void finish() {
        super.finish();
        this.overridePendingTransition();//TODO
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        this.overridePendingTransition();//TODO
    }


이런 식으로 구현하면 된다.

그럼 에니메이션을 어떻게 줄지, 플립보드와 같은 애니메이션 효과를 구현 해보면서 설명 해보겠다.

처음 전환되는 자신은 뒤로 빠지면서 오른쪽으로 약간 움직이는 에니메이션이다. 

  


xml을 잠시 보면 translate로 화면을 오른쪽에서 왼쪽으로 이동한다. 

그리고 다음은 화면이 뒤로빠지면서 약 10%정도 움직이는 애니메이션이다. alpha와 scale을 이용해서 애니메이션 할 수 있다. 

  


 

다음 화면은 finish에 들어갈 애니메이션으로 종료 될때 새로운 화면이 올라오게 되는데, 이 화면의 효과는 위와 같지만 방향만 다르다. 

  


다음 화면은 finish화면에서 닫기는 화면 애니메이션으로 translate로 화면을 윈쪽에서 오른쪽으로 이동 하게 한다.  

  


이렇게 해서 onCreate와 finish시 각각 시작, 종료 애니메이션 4개를 만든다.

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        this.overridePendingTransition(R.anim.start_enter, R.anim.start_exit);
        setContentView(R.layout.activity_main);
    }
    
    @Override
    public void finish() {
        super.finish();
        this.overridePendingTransition(R.anim.end_enter, R.anim.end_exit);
    }

위와 같이 실제 적용 해보면 플립보드또는 카카오스토리 같은 애니메이션을 확인 할 수 있을 것이다.

아래 첨부파일로 프로젝트를 첨부 했으니, 한번씩 보고 실행 해보자.

cfile2.uf.17543336515013122A0A6B.zip