Android Activity Transition Circle 사용하기 [3]

Android Activity Transition Circle 사용하기 [3]

이번 포스트에서는 circle Transition을 추가해 보려 합니다.

저번 포스트에서는 이미지 뷰를 Transition 하는것까지 해보았는데 circle 까지만 추가해도

어느정도 구성을 갖추게 되는것 같습니다.

포스트는 [1] 번 샘플 코드를 전체로 진행 됩니다.

1. 사용준비

 사용하기전에 circle Animation이 필요 합니다.

 아래 두가지 파일이 필요 합니다.

1. WeapperAnimator

2. RevealTransition

1. WeapperAnimator

 

public class WrapperAnimator extends Animator {
    private final Animator mWrappedAnimator;
 
    public WrapperAnimator(Animator wrappedAnimator) {
        mWrappedAnimator = wrappedAnimator;
    }
 
    @Override
    public long getStartDelay() {
        return mWrappedAnimator.getStartDelay();
    }
 
    @Override
    public void setStartDelay(long startDelay) {
        mWrappedAnimator.setStartDelay(startDelay);
    }
 
    @Override
    public Animator setDuration(long duration) {
        mWrappedAnimator.setDuration(duration);
        return this;
    }
 
    @Override
    public long getDuration() {
        return mWrappedAnimator.getDuration();
    }
 
    @Override
    public void setInterpolator(TimeInterpolator value) {
        mWrappedAnimator.setInterpolator(value);
    }
 
    @Override
    public boolean isRunning() {
        return mWrappedAnimator.isRunning();
    }
 
    @Override
    public void start() {
        mWrappedAnimator.start();
    }
 
    @Override
    public void cancel() {
        mWrappedAnimator.cancel();
    }
 
    @Override
    public void pause() {
        if (!isRevealAnimator()) {
            mWrappedAnimator.pause();
        } else {
        }
    }
 
    @Override
    public void resume() {
        if (!isRevealAnimator()) {
            mWrappedAnimator.resume();
        } else {
        }
    }
 
    @Override
    public void addListener(AnimatorListener listener) {
        mWrappedAnimator.addListener(listener);
    }
 
    @Override
    public void removeAllListeners() {
        mWrappedAnimator.removeAllListeners();
    }
 
    @Override
    public void removeListener(AnimatorListener listener) {
        mWrappedAnimator.removeListener(listener);
    }
 
    private boolean isRevealAnimator() {
        return mWrappedAnimator.getClass().getName().contains("RevealAnimator");
    }
}

2. RevealTransition

 
public class RevealTransition extends Visibility {
    private final Point mEpicenter;
    private final int mSmallRadius;
    private final int mBigRadius;
    private final long mDuration;
 
    public RevealTransition(Point epicenter, int smallRadius, int bigRadius, long duration) {
        mEpicenter = epicenter;
        mSmallRadius = smallRadius;
        mBigRadius = bigRadius;
        mDuration = duration;
    }
 
    @Override
    public Animator onAppear(ViewGroup sceneRoot, View view, TransitionValues startValues, TransitionValues endValues) {
        Animator animator = ViewAnimationUtils.createCircularReveal(view, mEpicenter.x, mEpicenter.y,
                mSmallRadius, mBigRadius);
        animator.setDuration(mDuration);
        return new WrapperAnimator(animator);
    }
 
    @Override
    public Animator onDisappear(ViewGroup sceneRoot, View view, TransitionValues startValues, TransitionValues endValues) {
        Animator animator = ViewAnimationUtils.createCircularReveal(view, mEpicenter.x, mEpicenter.y,
                mBigRadius, mSmallRadius);
        animator.setDuration(mDuration);
        return new WrapperAnimator(animator);
    }
}

2. 사용방법

위 두클래스를 준비하면 이제 사용준비가 완료 되었습니다.

이제 사용방법에 대해 알아 보겠습니다.

원을 그려주기위해서 선택한 사진의 중심값을 알아야 합니다. 중심값을 detailActivity로 전달하는 코드가 필요 합니다.

MainActivity

/**
     * 앨범 리싸이클러 뷰 선택 시
     */
    private AlbumViewHolderListener mAlbumViewHolderListener = new AlbumViewHolderListener(){
 
        @Override
        public void onClicked(AlbumListAdapter.AlbumViewHolder albumViewHolder, int position) {
 
            int albumArtResId = albumList.get(position);
            Intent intent = new Intent(MainActivity.this, AlbumDetailActivity.class);
            intent.putExtra(AlbumDetailActivity.EXTRA_ALBUM_ART_RESID, albumArtResId);
 
            int[] location = new int[2];
            albumViewHolder.imgAlbum.getLocationInWindow(location);
 
            Point epicenter = new Point(location[0] + albumViewHolder.imgAlbum.getMeasuredWidth() / 2,
                    location[1] + albumViewHolder.imgAlbum.getMeasuredHeight() / 2);
            intent.putExtra(AlbumDetailActivity.EXTRA_EPICENTER, epicenter);
 
            ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(MainActivity.this,
                    albumViewHolder.imgAlbum, albumViewHolder.imgAlbum.getTransitionName());
            startActivity(intent, options.toBundle());
 
 
        }
    };

위코드 중앙의 좌표값을 넘기는 코드가 있습니다.

넘긴 좌표값을 이용해서 원 애니메이션을 적용해야 합니다.

DetailActivity

/**
     * 화면 전환 애니메이션 초기화
     */
    private void initTransitions() {
 
        Window window = getWindow();
        RevealTransition reveal = createRevealTransition();
        window.setEnterTransition(reveal);
 
    }
 
    /**
     * 원형 만드는 기능
     * @return
     */
    private RevealTransition createRevealTransition() {
        Point epicenter = getIntent().getParcelableExtra(EXTRA_EPICENTER);
        DisplayMetrics displayMetrics = getResources().getDisplayMetrics();
        int bigRadius = Math.max(displayMetrics.widthPixels, displayMetrics.heightPixels);
        RevealTransition reveal = new RevealTransition(epicenter, 0, bigRadius, 500);
        return reveal;
    }

createRecealTransition() 함수를 보면 mainActivity 에서 넘어온 좌표값을 받습니다.

받은 좌표값과 , display 화면 값을 통하여 사용준비에서 준비한 원 애니메이션에 값을 넣어 주면 되겠습니다.

마지막으로

activity_album_detail.xml

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?android:attr/colorPrimary">

 스크롤 뷰 하단 뷰에 배경색상을 넣으면 이쁜 원형이 나타나는것을 확인 할수 있습니다.

설정후에 initTransitions() 함수를 호출해주면 선택한 사진이 이동하면서 원형 애니메이션이 진행 됩니다.

다른뷰들로 인해서 원형 애니메이션이 부자연 스러워 보일수 있습니다.

이미지 버튼 , 하단 레이아웃을 비활성화 하고 확인해보세요.