高質量的客戶端引導動畫效果

時間 2019-11-08

標籤高質量客戶端引導動畫效果简体版

原文原文鏈接

高質量的客戶端引導動畫效果，高仿500px客戶端歡迎頁面。
主要實現，經過ViewPager加載每個fragment.建立一個引導頁adapter即GuideAdapter，
設置viewpager緩存頁數,默認的緩存一頁,由於引導頁共有4頁,因此設置緩存3頁,
這樣因此page在滑動過程當中不會從新建立，每個fragment切換的時候經過HKTransformer動畫實現效果。
代碼來源：https://github.com/hanks-zyh/500px-guideview
部份內容以下：
/**
     * by Hanks
     */
    class HKTransformer implements ViewPager.PageTransformer {
        @Override
        public void transformPage(View view, float position) {
            if (fragment00.getView() == view) {
                Log.i("", "view:    " + view + "position= " + position);
                currentPosition = position;
            }html

blurringView.invalidate();git

            if (position < -1) { // [-Infinity,-1)
                // This page is way off-screen to the left.
            } else if (position <= 0) { // [-1,0]
                // Use the default slide transition when moving to the left page
            } else if (position <= 1) { // (0,1]
                // Fade the page out.github

float p = Math.abs(position);
float f = (1 - p);緩存

                Log.i("", "p= " + p);
                // p : 1~0
                // f : 0~1ide

iv_final_photo.setPivotY(0f);
iv_final_photo.setPivotX(iv_final_photo.getWidth() / 2);動畫

if (-1 < currentPosition && currentPosition <= 0) {
// A ~ B 界面的動畫ui

                    iv_initial_phone.setTranslationY(-600 * f);
                    iv_initial_phone.setScaleX(0.5f * p + 0.5f);
                    iv_initial_phone.setScaleY(0.5f * p + 0.5f);
                    iv_device.setScaleX(1 + 2 * f);spa

                    if (p > 0.5 && p <= 1) {
                        iv_device.setAlpha(2 * p - 1);
                    } else {
                        iv_device.setAlpha(0f);
                    }code

                    ll_comments.setTranslationY(800 * p);
                    ll_comments.setAlpha(f);
                    ll_comments.setScaleX(2 - f);
                    ll_comments.setScaleY(2 - f);orm

                    ll_rows.setTranslationY(-1000 - 500 * p);
                    ll_rows.setAlpha(0.5f);
                    iv_final_photo.setTranslationY(-1000 - 500 * p);
                    iv_final_photo.setAlpha(0.5f);

tv_avatar_you.setTranslationY(-300);

tv_register.setTranslationY(300);

} else if (-2 < currentPosition && currentPosition <= -1) {
// B ~ C 界面的動畫

iv_initial_phone.setTranslationY(-600 + -300 * f);

ll_comments.setAlpha(p);

ll_rows.setTranslationY(-1000 * p);
ll_rows.setAlpha(0.5f + 0.5f * f);

iv_final_photo.setTranslationY(-1000 * p);
iv_final_photo.setAlpha(0.5f + 0.5f * f);

                    tv_avatar_you.setTranslationY(-300);
                    tv_register.setTranslationY(300);
                } else if (-3 < currentPosition && currentPosition <= -2) {
                    // C ~ D 界面的動畫

iv_final_photo.setScaleX(1 + 3 * f); //1~3
iv_final_photo.setScaleY(1 + 3 * f); //1~3

                    for (int i = 0; i < ll_rows.getChildCount(); i++) {
                        View child = ll_rows.getChildAt(i);
                        child.setAlpha(p);
                        if (i % 2 == 0) {
                            child.setTranslationX(100 * f);
                        } else {
                            child.setTranslationX(-100 * f);
                        }
                    }

tv_avatar_you.setTranslationY(-300 + 300 * f);

tv_register.setTranslationY(300 - 300 * f);
}

            } else { // (1,+Infinity]
                // This page is way off-screen to the right.
            }
        }
    }

高質量的客戶端引導動畫效果

運行效果：

相關代碼