애니메이션 추가

제가 작성한 tistory글의 마이그레이션입니다.

도입

이번 포스팅에서는 UI/UX관련해서 음악 플레이어에 애니메이션을 추가할 예정이다.

음악 변경 시, 애니메이션 추가

음악이 변경 될 때 홈 버튼을 축으로 각각음악들이 돌아가면 재미있겠다 생각했다. 이유는 옛날에 음악을 LP판으로 재생하면 LP판이 돌아가 듯이 음악이 빙글빙글 돌아가면 재미있을 것이라고 생각했기 때문이다.

찾아보니 애니메이션을 적용하고 싶은 Viewpager에 setPageTransformer라는 메소드가 존재하고
(출처 - https://developer.android.com/reference/android/support/v4/view/ViewPager.html)

AS-IS	TO-BE

코드 추가

public class ParallaxPageTransformer implements ViewPager.PageTransformer {
    public void transformPage(View view, float position) {
        // 현재 모바일 크기 추출
        int pageWidth = view.getWidth();
        int pageHeght = view.getHeight();
 
        // 애니메이션을 적용하기 위한 로드된 View 가져오기
        ImageView imageView = view.findViewById(R.id.music_info_imageView);
        LinearLayout titleLayout = view.findViewById(R.id.titleLayout);
        LinearLayout artistLayout = view.findViewById(R.id.artistLayout);
        LinearLayout genreLayout = view.findViewById(R.id.genreLayout);
 
        if (position < -1) {
            // This page is way off-screen to the left.
            view.setAlpha(1);
        } else if (position <= 1) { // [-1,1]
            // X, Y 변경으로 해당 애니메이션 적용
            imageView.setTranslationX(position * (pageWidth / 30));
            imageView.setTranslationY(Math.abs(position) * (pageHeght/10));
 
            titleLayout.setTranslationX(position * (pageWidth / 10));
            titleLayout.setTranslationY(Math.abs(position) * (pageHeght/5));
 
            artistLayout.setTranslationX(position * (pageWidth / 5));
            artistLayout.setTranslationY(Math.abs(position) * (pageHeght/3));
 
            genreLayout.setTranslationX(position * (pageWidth / 15));
            genreLayout.setTranslationY(Math.abs(position) * (pageHeght/1));
        } else { // (1,+Infinity]
            // This page is way off-screen to the right.
            view.setAlpha(1);
        }
    }
}

private void initViewPager() {
    MusicInfoAdapter musicInfoAdapter = new MusicInfoAdapter(this);
    playerViewPager.setAdapter(musicInfoAdapter);
    // 추가
    playerViewPager.setPageTransformer(false, new ParallaxPageTransformer());
    playerViewPager.setCurrentItem(currentPosition);
 
    playerViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
 
        }
 
        @Override
        public void onPageSelected(int position) {
            initMusic(position);
        }
 
        @Override
        public void onPageScrollStateChanged(int state) {
 
        }
    });
}

앨범과 장르 애니메이션 추가

앨범과 장르 별로 음악을 분류하고 해당 앨범, 장르를 클릭 했을 때 음악을 선택 할 수 있는 페이지와 애니메이션을 추가했다.
(앨범과 장르 탭에서 음악을 바로 출력하는 것이 아니라 Depth가 1개 더 생겼고 현재 Adapter를 재활용하기 위해 인터페이스를 만드는 등 고생했다.... 추후 정리할 예정이다.)

AS-IS	TO-BE