前言

Parallax Scrolling (視差滾動)，是一種常見的動畫效果。視差一詞來源于天文學，但在日常生活中也有它的身影。在疾馳的動車上看風景時，會發現越是離得近的，相對運動速度越快，而遠處的山川河流只是緩慢的移動著，這就是最常見的視差效果。視差動畫獨有的層次感能帶來極為逼真的視覺體驗，iOS、Android Launcher、Website 都將視差動畫作為提升用戶視覺愉悅度的不二選擇。

客戶端應用第一次打開出現引導頁也不是什么新鮮的事兒，ViewPager 配上幾張設計師精心繪制的圖片，分分鐘即可了事。但是總有人把平凡的事情做到不平凡，如本文的知乎客戶端，亦或是新浪微博賀歲版，百度貼吧某版等眾多應用里都出現了視差動畫的身影，隨著用戶手指的滑動，反饋以靈動、貼近真實的視覺以及操作體驗，對應用的初始印象登時被提升到一個極高的點。

給我印象最深的是去年新浪微博的賀歲版，引導頁是一系列的年畫，里面有紅色剪紙的小孩兒，滑動界面的時候感覺這些元素在『動』，是真正的靈動，能勾起人童年的回憶，年味兒十足。不過話說我年怎么過跟新浪微博一毛錢關系都沒有，但是這個啟動頁卻是深得我意。只是這個版本的微博找不到了，正好前兩天看到知乎的啟動頁做的也不錯，就正好拿來練練手吧。

本文就知乎 Android 客戶端啟動頁面為例，教你如何實現視差滾動效果。

界面分析

細心把玩下知乎的啟動頁，不難分析出來，視差動畫主要體現在背景層漸變、內容層元素差異滾動上，動畫內容分別是：

- 內容：元素差異滾動，形成視差效果()

- 背景：隨著界面的滑動，顏色由深藍色漸變為淺藍色()

- 文字：底部提示文案會隨頁面變動而切換，有簡單的淡入淡出效果

- 界面動畫：界面打開，元素的出場動畫(第一頁以及最后一頁)

鑒于其它幾項比較簡單，本文主要講視差動畫以及背景漸變的實現，其它幾項請自行參閱代碼，見后文。

Parallax Scrolling

這里的視差滾動效果，主要表現為內容元素滾動速率的差異上。比如在 ViewPager 中滑動了 1px ，而 A 元素移動 2px ， B 元素移動 1.5px ，這種移動差距的比率，我稱之為 parallaxCofficient ，即 視差系數 或者 視差速率 ，正是同一個界面中的元素，由于層級不同，賦予的視差系數不同，在移動速度上的差異形成了視差的錯覺，這就是我們要追求的效果。

那知道原理就好辦了，使用 ViewPager.OnPageChangeListener ，動態計算不就得了。 no no no ! 后面完成背景漸變效果確實需要計算這個，但是 ViewPager 已經為我們準備好了變形元素 transformium : ViewPager.PageTransformer ，它有一個抽象方法 transformPage(View page, float position) ，正是為我們完成視差動畫量身定制的。

ViewPager.PageTransformer

PageTransformer 在 ViewPager 滑動時被觸發，它為我們自定義頁面中進行視圖變換打開了一扇大門。

javapublic abstract void transformPage (View page, float position)

在 ViewPager 源碼中，我們可以很直觀的看到它的調用過程：

java// ViewPager#onPageScrolled

if (mPageTransformer != null) {

final int scrollX = getScrollX();

final int childCount = getChildCount();

for (int i = 0; i < childCount; i++) {

final View child = getChildAt(i);

final LayoutParams lp = (LayoutParams) child.getLayoutParams();

if (lp.isDecor) continue;

final float transformPos = (float) (child.getLeft() - scrollX) / getClientWidth();

mPageTransformer.transformPage(child, transformPos);

}

}

Param 1: View page

從上面的代碼中，不難看出，page 就是當前被滑動的頁面，調試得知，每一個 child view 被 NoSaveStateFrameLayout 包裝，也就是說 page.getChildAt(0) 即是每個 page 實際的 child view 。

Param 2: float position

position 這個參數不看代碼或者文檔，總會誤以為就是我們熟知的 integer position ，不過它實際上是滑動頁面的一個相對比例，本質跟 1、2、3、4 這種 position 是一樣的。

比如知乎啟動頁共有 6 個頁面，分別是 A、B、C、D、E、F 初始狀態也就是 A 頁面靜止時，A 頁面的 position 正好是 0 ，B 頁面是 1 。而后滑動頁面(B -> A)，在這個過程中 A 的 position 是間于 [-1, 0] ，B 頁面則是間于 [0, 1] 。

不過這個參數的文檔卻是簡單不夠直觀，對照上面的例子，現在應該很清晰了。

Position of page relative to the current front-and-center position of the pager. 0 is front and center. 1 is one full page position to the right, and -1 is one page position to the left.

ParallaxTransformer

根據上面的分析，我們可以得出一個相對簡單的自定義 transformer ，對 page view 進行遍歷，遞增或者遞減其 parallaxCofficient ，以得到我們預期的效果，具體的系數設置請參考代碼。

javaclass ParallaxTransformer implements ViewPager.PageTransformer {

float parallaxCoefficient;

float distanceCoefficient;

public ParallaxTransformer(float parallaxCoefficient, float distanceCoefficient) {

this.parallaxCoefficient = parallaxCoefficient;

this.distanceCoefficient = distanceCoefficient;

}

@Override

public void transformPage(View page, float position) {

float scrollXOffset = page.getWidth() * parallaxCoefficient;

// ...

// layer is the id collection of views in this page

for (int id : layer) {

View view = page.findViewById(id);

if (view != null) {

view.setTranslationX(scrollXOffset * position);

}

scrollXOffset *= distanceCoefficient;

}

}

}

背景漸變

留心才會發現，從第一頁滑動到最后一頁，背景色會平滑的從深藍色過度到淺藍色，這種效果又該怎么實現呢？

用過 Property Animation 的同學應該知道，以前的 Animation 只能用在 View 上，而 Property Animation 卻可以用在任意類型屬性值上，這歸功于 TypeEvaluator 。

正好我們有 ArgbEvaluator ，它可以估算兩個顏色值之間，任意部分的色值。因此，只需要指定起始色值以及最終的色值，傳入滑動所對應的 fraction 即當前位置相對總距離的比例值，即可獲得相應的色值。

javapublic class ArgbEvaluator implements TypeEvaluator {

public Object evaluate(float fraction, Object startValue, Object endValue) {

// ...

}

}

當然，前面說到需要使用 ViewPager.OnPageChangeListener 的：

javaclass GuidePageChangeListener implements ViewPager.OnPageChangeListener {

ArgbEvaluator mColorEvaluator;

int mPageWidth, mTotalScrollWidth;

int mGuideStartBackgroundColor, mGuideEndBackgroundColor;

public GuidePageChangeListener() {

mColorEvaluator = new ArgbEvaluator();

mPageWidth = getWindowManager().getDefaultDisplay().getWidth();

mTotalScrollWidth = mPageWidth * mAdapter.getCount();

mGuideStartBackgroundColor = getResources().getColor(R.color.guide_start_background);

mGuideEndBackgroundColor = getResources().getColor(R.color.guide_end_background);

}

@Override

public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

float ratio = (mPageWidth * position + positionOffsetPixels) / (float) mTotalScrollWidth;

Integer color = (Integer) mColorEvaluator.evaluate(ratio, mGuideStartBackgroundColor, mGuideEndBackgroundColor);

mPager.setBackgroundColor(color);

}

@Override

public void onPageSelected(int position) {}

@Override

public void onPageScrollStateChanged(int state) {}

}

源碼

代碼已經 push 到 Github 了，諸位自取。不過請注意，其素材均取自于知乎 Android 客戶端(你懂的)，學習交流即可，請勿用作商業用途。

還求更優雅的實現方式，歡迎發起 pull request 。

參考