[2017.11.29] 80. Android 음악 플레이어 프로젝트 [애니메이션 추가]

도입

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

---

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

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

 

찾아보니 애니메이션을 적용하고 싶은 Viewpager에 setPageTransformer라는 메소드가 존재하고 

(출처 - https://developer.android.com/reference/android/support/v4/view/ViewPager.html)

변경 전	변경 후

---

코드 추가

ParallaxPageTransformer.java

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);
        }
    }
}

PlayMainViewActivity.java 

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) {
 
        }
    });
}

---

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

앨범과 장르 별로 음악을 분류하고 해당 앨범, 장르를 클릭 했을 때 음악을 선택 할 수 있는 페이지와 애니메이션을 추가했다.

(앨범과 장르 탭에서 음악을 바로 출력하는 것이 아니라 Depth가 1개 더 생겼고 현재 Adapter를 재활용하기 위해 인터페이스를 만드는 등 고생했다.... 추후 정리할 예정이다.)

 

변경 전	변경 후

코드 변경

변경 전

public class ListActivity extends BaseActivity implements OnListFragmentInteractionListener { // ... @Override public void callAlbumGenreView(ArrayList<Music> mValues) { Intent intent = new Intent(this, AlbumGenreViewActivity.class); intent.putParcelableArrayListExtra("albumMusic", mValues); startActivity(intent); } // ... }

변경 후

public class ListActivity extends BaseActivity implements OnListFragmentInteractionListener { // ... @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP) @Override public void callAlbumGenreView(ArrayList<Music> mValues, View sharedView) { Intent intent = new Intent(this, AlbumGenreViewActivity.class); intent.putParcelableArrayListExtra("albumMusic", mValues); ActivityOptions transitionActivityOptions = ActivityOptions.makeSceneTransitionAnimation(this, sharedView, "Test"); startActivity(intent, transitionActivityOptions.toBundle()); } // ... }

---

코드 추가

res - transition 폴더 생성 후 explode.xml, change.xml 생성

explode.xml

<?xml version="1.0" encoding="utf-8"?>
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
    <explode
        android:duration="@android:integer/config_longAnimTime" />
</transitionSet>

change.xml

<?xml version="1.0" encoding="utf-8"?>
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="@android:integer/config_longAnimTime">
    <slide />
</transitionSet>

values-styles.xml

<style name="CustomListTheme" parent="@style/Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
        <!-- specify enter and exit transitions -->
    <item name="android:windowEnterTransition">@transition/explode</item>
    <item name="android:windowExitTransition">@transition/explode</item>
 
        <!-- specify shared element transitions -->
    <item name="android:windowSharedElementEnterTransition">@transition/change</item>
    <item name="android:windowSharedElementExitTransition">@transition/change</item>
 
    <item name="android:windowContentTransitions">true</item>
</style>

 

 

#안드로이드 음악 플레이어 #안드로이드 mp3 #안드로이드 프로젝트  #앱개발 #모바일앱개발 #어플개발