Transition Animation

Transition Animation

안드로이드가 롤리팝으로 OS 업데이트 되면서 머테리얼 디자인이 적용 되었는데 이를 위해 화면 전환을 사용자가 인식 할수 없도록 시각적 연속성을 부여할 수 있는 애니메이션 기능이 추가 되었다.

위의 그림과 같이 activity1 에서 activity2로 넘어 갈때 화면이 끊기지 않고 자연스럽게 넘어 갈수 있도록 activity1의 선택된 그림이 activity2의 그림으로 커지는 애니메이션이 적용되면서 화면이 이동하게 된다.

이를 바로 Transition Animation 이라고 한다.

이를 적용하기 위해선

1. 머테리얼 테마와 함께 아래와 같은 특정 속성을 적용해야 한다.

<style name="BaseAppTheme" parent="Theme.AppCompat.Light.NoActionBar">

<item name="android:windowContentTransitions">true</item>

<item name="android:windowAllowEnterTransitionOverlap">true</item>

<item name="android:windowSharedElementEnterTransition">@android:transition/move</item>

<item name="android:windowSharedElementExitTransition">@android:transition/move</item>

</style>

물론 코드 상에서도 적용이 가능하다.

// inside your activity (if you did not enable transitions in your theme)
getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);

// set an exit transition
getWindow().setExitTransition(new Explode());

Window.setAllowEnterTransitionOverlap() 메서드를 적용 하면 좀더 빠른 Animation효과를 볼수 있다.

2. activity1과 activity2를 연결해줄 뷰의 이름을 공유한다.

3. ActivityOptions.makeSceneTransitionAnimation()을 사용하여 startActivity를 한다.

Intent intent = new Intent(this, Activity2.class);
        // create the transition animation - the images in the layouts
        // of both activities are defined with android:transitionName="robot"
        ActivityOptions options = ActivityOptions
            .makeSceneTransitionAnimation(this, androidRobotView, "robot");
        // start the new activity
        startActivity(intent, options.toBundle());

4. 뷰를 공유하여 이를 애니메이션에 사용한다면 하나뿐 아니라 여러개의 뷰를 공유하여 더욱 다채로운 애니메이션을 만들수 있다. 아래와 같이 Pair객체를 생성하여 ActivityOptions에 추가 하면 여러개의 애니메이션 화면 전환시에 동작한다.

ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this,
        Pair.create(view1, "agreedName1"),
        Pair.create(view2, "agreedName2"));

5. 위에까지는 activity1에서 수행되어야 하는 코드들이고 activity2에서는 activity1에서 시작하여 activity2의 특정뷰로 도착하는 뷰를 공유하여야 한다.

View.setTransitionName() 메서드로 위에서 적용한 "robot"을 똑같이 적용한다.

위의 순서대로 간단하게 화면 전환 애니메이션을 적용할 수 있다.

샘플 코드 : https://github.com/jhson5183/TransitionAnimation.git