Ultra-Pull-To-Refresh 自定義下拉刷新視差動(dòng)畫(huà)

Ultra-Pull-To-Refresh自定義下拉刷新視差動(dòng)畫(huà)效果刷新自定義動(dòng)畫(huà)的分析首先是Ultra-Pull-To-Refresh的特點(diǎn)，此庫(kù)提供了一個(gè)Layout類(lèi)：PtrFramLayout作為Wrapper來(lái)包涵ContentView，今天用到兩個(gè)方法：第一個(gè)PtrFramLayout#setHeaderView(View)用來(lái)設(shè)置頭部顯示的刷新View，第二個(gè)PtrFramLayout#addPtrUIHandler(PtrHandler)用來(lái)設(shè)置監(jiān)聽(tīng)用戶(hù)下拉狀態(tài)、下拉offset、刷新完成狀態(tài)等。其次是動(dòng)畫(huà)的，根據(jù)效果圖，第一點(diǎn)是下拉的時(shí)候人物從左側(cè)走過(guò)來(lái)到中間，到中間后手指再繼續(xù)往下拉，此時(shí)人物也不走了，第二點(diǎn)是當(dāng)手指松開(kāi)時(shí)或者處于下拉狀態(tài)時(shí)，人物不停的走動(dòng)，并且背景產(chǎn)生一個(gè)相對(duì)位移，給人的視覺(jué)上造成一個(gè)視覺(jué)差，也就是我們想要的視差動(dòng)畫(huà)了，這就是整個(gè)視差動(dòng)畫(huà)的實(shí)現(xiàn)步驟。那么幾個(gè)動(dòng)畫(huà)拆分開(kāi)來(lái)就是，人物向右中間移動(dòng)、人物原地踏步、背景無(wú)限向左移動(dòng)。頭View和刷新Layout的實(shí)現(xiàn)我把實(shí)現(xiàn)步驟分開(kāi)講解，方便讀者理解：實(shí)現(xiàn)自定義的頭View。繼承PtrFramLayout實(shí)現(xiàn)一個(gè)ParallaxPtrFrameLayout，設(shè)置自定頭和PtrHandler監(jiān)聽(tīng)下拉動(dòng)作。實(shí)現(xiàn)人物向左走的動(dòng)畫(huà)。松開(kāi)手時(shí)背景不停的向右移動(dòng)，人物在原地邁步，形成一個(gè)視差上的向右走的動(dòng)畫(huà)。自定義頭部View頭View的底下是這樣一個(gè)圖：那么一個(gè)圖是如何做到不停的向左移動(dòng)還是無(wú)限重復(fù)的呢？用HTML做很簡(jiǎn)單，但是Android中并沒(méi)有repeat這樣的屬性，于是我們想到：在屏幕上放一個(gè)ImageView向左移動(dòng)100%，在這張圖的右側(cè)再放一個(gè)ImageView，以同樣的速度向左移動(dòng)100%，結(jié)果就是當(dāng)屏幕上的圖移動(dòng)到左邊外屏幕的時(shí)候，屏幕右邊的圖剛好移動(dòng)到屏幕上完全顯示，然后我們的動(dòng)畫(huà)又有重復(fù)播放的屬性，結(jié)合起來(lái)就產(chǎn)生了一個(gè)背景無(wú)限長(zhǎng)的動(dòng)畫(huà)效果。對(duì)于人物原地踏步就很簡(jiǎn)單了，直接用一個(gè)ImageView不停的切換圖形成一個(gè)人物在走動(dòng)的視覺(jué)效果。所以我們用兩個(gè)ImageView作為背景圖來(lái)相間向左移動(dòng)，用一個(gè)ImageView不停的切換圖模擬人物走動(dòng)，來(lái)達(dá)到一個(gè)人物走動(dòng)的視差效果，我打算用FrameLayout來(lái)作為頭View的Layout，所以布局用merge包裹了一下：refresh_parallax.xml<?xmlversion="1.0"encoding="utf-8"?><mergexmlns:android="/apk/res/android"><ImageViewandroid:id="@+id/iv_background_1"android:layout_width="match_parent"android:layout_height="wrap_content"android:contentDescription="@string/app_name"android:src="@drawable/refresh_down_background"/><ImageViewandroid:id="@+id/iv_background_2"android:layout_width="match_parent"android:layout_height="wrap_content"android:contentDescription="@string/app_name"android:src="@drawable/refresh_down_background"/><ImageViewandroid:id="@+id/iv_refresh_icon"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="bottom"android:contentDescription="@string/app_name"android:scaleType="center"/></merge>然后定義頭View加載剛才寫(xiě)好的布局，因?yàn)镻trFrameLayout是通過(guò)PtrHandler接口來(lái)監(jiān)聽(tīng)下拉狀態(tài)和刷新?tīng)顟B(tài)，然后以狀態(tài)為依據(jù)來(lái)刷新頭View的動(dòng)畫(huà)，所以頭View直接實(shí)現(xiàn)PtrHandler接口，然后操作自身的狀態(tài)和動(dòng)畫(huà)也就更加方便了，所以頭View初步的代碼是：ParallaxHeaderpublicclassParallaxHeaderextendsFrameLayoutimplementsPtrUIHandler{ImageViewmIvBack1;ImageViewmIvBack2;ImageViewmIvIcon;privatevoidinitialize(){//加載剛才的LayoutInflater.from(getContext()).inflate(R.layout.refresh_parallax,this);//設(shè)置一個(gè)藍(lán)色天空的背景。setBackgroundColor(ContextCompat.getColor(getContext(),R.color.refresh_background));mIvBack1=(ImageView)findViewById(R.id.iv_background_1);mIvBack2=(ImageView)findViewById(R.id.iv_background_2);mIvIcon=(ImageView)findViewById(R.id.iv_refresh_icon);}publicParallaxHeader(Contextcontext){this(context,null,0);}publicParallaxHeader(Contextcontext,AttributeSetattrs){this(context,attrs,0);}publicParallaxHeader(Contextcontext,AttributeSetattrs,intdefStyleAttr){super(context,attrs,defStyleAttr);}@OverridepublicvoidonUIReset(PtrFrameLayoutframe){//重置頭View的動(dòng)畫(huà)狀態(tài)，一般停止刷新動(dòng)畫(huà)。}@OverridepublicvoidonUIRefreshPrepare(PtrFrameLayoutframe){//準(zhǔn)備刷新的UI。}@OverridepublicvoidonUIRefreshBegin(PtrFrameLayoutframe){//開(kāi)始刷新的UI動(dòng)畫(huà)。}@OverridepublicvoidonUIRefreshComplete(PtrFrameLayoutframe){//刷新完成，停止刷新動(dòng)畫(huà)。}@OverridepublicvoidonUIPositionChange(PtrFrameLayoutframe,booleanisUnderTouch,bytestatus,PtrIndicatorptrIndicator){//手指下拉的時(shí)候的狀態(tài)，我們的下拉動(dòng)畫(huà)的控制就是通過(guò)這個(gè)方法：//frame是刷新的rootlayout。//isUnderTouch是手指是否按下，因?yàn)檫€有自動(dòng)刷新，手指肯定是松開(kāi)狀態(tài)。//status是現(xiàn)在的加載狀態(tài)，準(zhǔn)備、加載中、完成：PREPARE、LOADING、COMPLETE。//ptrIndicator是一些下拉偏移量的參數(shù)封裝。}}里面的代碼很簡(jiǎn)單，就是加載剛才定義好的頭View對(duì)應(yīng)的Layout.xml文件，然后把兩個(gè)背景View和人物View給找出來(lái)。頭View定義好了，接下來(lái)定義刷新的Layout。實(shí)現(xiàn)ParallaxPtrFrameLayout加載頭ViewUltra-Pull-To-Refresh的刷新Layout都是繼承PtrFramLayout，然后設(shè)置頭View和刷新?tīng)顟B(tài)監(jiān)聽(tīng)等，所以我們定義一個(gè)ParallaxPtrFrameLayout繼承PtrFrameLayout，在里面設(shè)置頭View和PtrHandler等來(lái)回調(diào)操作的頭View的動(dòng)畫(huà)，很簡(jiǎn)單的幾行代碼：publicclassParallaxPtrFrameLayoutextendsPtrFrameLayout{publicParallaxPtrFrameLayout(Contextcontext){super(context);initViews();}publicParallaxPtrFrameLayout(Contextcontext,AttributeSetattrs){super(context,attrs);initViews();}publicParallaxPtrFrameLayout(Contextcontext,AttributeSetattrs,intdefStyle){super(context,attrs,defStyle);initViews();}privatevoidinitViews(){//這里初始化上面的頭View：ParallaxHeaderparallaxHeader=newParallaxHeader(getContext());//這里設(shè)置頭View為上面自定義的頭View：setHeaderView(parallaxHeader);//下拉和刷新?tīng)顟B(tài)監(jiān)聽(tīng)：//因?yàn)镻arallaxHeader已經(jīng)實(shí)現(xiàn)過(guò)PtrUIHandler接口，所以直接設(shè)置為ParallaxHeader：addPtrUIHandler(parallaxHeader);}}由于Ultra-Pull-To-Refresh的合理設(shè)計(jì)，到這里為止，我們的頭View和刷新的Layout就完成了，接下來(lái)就專(zhuān)心研究動(dòng)畫(huà)吧。動(dòng)畫(huà)的實(shí)現(xiàn)上文也提過(guò)了，這里的動(dòng)畫(huà)拆分開(kāi)幾個(gè)，一是下拉的時(shí)候人物向右中間移動(dòng)，二是刷新的時(shí)候人物不停的原地踏步，三是刷新的時(shí)候背景一個(gè)向左平移，為了方便理解，這里把下拉時(shí)候人物向右中間移動(dòng)放到最后來(lái)講。一、人物原地踏步動(dòng)畫(huà)首先想到的就是幀動(dòng)畫(huà)，沒(méi)錯(cuò)就是這家伙，用幀動(dòng)畫(huà)可以做到每多少時(shí)間換一張圖片，所以我們的人物有三張不同的動(dòng)畫(huà)，不停的切換就形成了一個(gè)人物走動(dòng)并車(chē)輪轉(zhuǎn)動(dòng)的效果：我們用幀動(dòng)畫(huà)控制每張圖顯示100毫秒，然后就切換下一張圖，這樣便達(dá)到我們說(shuō)的人物走動(dòng)的效果了，用xml來(lái)實(shí)現(xiàn)：<?xmlversion="1.0"encoding="utf-8"?><animation-listxmlns:android="/apk/res/android"android:oneshot="false"><itemandroid:drawable="@drawable/refresh_down_icon_1"android:duration="100"/><itemandroid:drawable="@drawable/refresh_down_icon_2"android:duration="100"/><itemandroid:drawable="@drawable/refresh_down_icon_3"android:duration="100"/></animation-list>因?yàn)檫@是一個(gè)幀動(dòng)畫(huà)，需要在代碼中觸發(fā)，所以我們要把這個(gè)動(dòng)畫(huà)放在drawable文件夾，并且把這個(gè)drawable當(dāng)圖片設(shè)置頭View中的人物ImageView：<ImageViewandroid:id="@+id/iv_refresh_icon"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="bottom"android:scaleType="center"android:src="@drawable/refresh_down_icon"/>二、背景無(wú)限向左移動(dòng)這個(gè)動(dòng)畫(huà)就厲害了word哥，當(dāng)時(shí)我先做出來(lái)，然后給iOS的同學(xué)講實(shí)現(xiàn)的原理，他還是花了點(diǎn)時(shí)間來(lái)理解的，所以我再費(fèi)點(diǎn)口舌解釋一下。這里是兩個(gè)ImageView，一個(gè)在屏幕正中央，并且占據(jù)整屏寬，一個(gè)在屏幕外的右側(cè)，寬度等于屏幕寬度。動(dòng)畫(huà)開(kāi)始時(shí)，屏幕上的ImageView開(kāi)始一步步向左移動(dòng)100%，屏幕之外的ImageView以同樣的速度向左移動(dòng)100%，當(dāng)屏幕上的ImageView移動(dòng)到左邊外屏幕的時(shí)候，屏幕右邊的圖剛好移動(dòng)到屏幕上完全顯示，然后我們的動(dòng)畫(huà)又有重復(fù)播放的屬性，結(jié)合起來(lái)就產(chǎn)生了一個(gè)背景無(wú)限長(zhǎng)的動(dòng)畫(huà)效果。為了方便大家理解，我畫(huà)了一張圖：圖是畫(huà)的有點(diǎn)簡(jiǎn)陋了，但是很好理解，當(dāng)頭View剛出來(lái)的時(shí)候只顯示ImageView1，當(dāng)刷新的時(shí)候ImageView1和ImageView2同時(shí)向左移動(dòng)，看起來(lái)就是連貫的一張圖（實(shí)際xml中兩張圖是沒(méi)有空隙的），等ImageView1移出屏幕時(shí)，ImageView2剛好充斥滿(mǎn)屏幕，然后我們給動(dòng)畫(huà)加上重復(fù)播放屬性，然后又從圖1開(kāi)始重復(fù)到圖三，就形成了一個(gè)無(wú)限向左移動(dòng)的街道。所以我們給第一張圖的動(dòng)畫(huà)是，在2S內(nèi)，勻速移動(dòng)，從屏幕上移動(dòng)到屏幕左外邊，然后再次重復(fù)動(dòng)作：<?xmlversion="1.0"encoding="utf-8"?><setxmlns:android="/apk/res/android"android:interpolator="@android:anim/linear_interpolator"><translateandroid:duration="2000"android:fromXDelta="0%"android:interpolator="@android:anim/linear_interpolator"android:repeatCount="infinite"android:repeatMode="restart"android:toXDelta="-100%"/></set>我們給第二張圖的動(dòng)畫(huà)是，在2S內(nèi)，勻速移動(dòng)，從屏幕右外邊移動(dòng)到屏幕上，然后再次重復(fù)動(dòng)作：<?xmlversion="1.0"encoding="utf-8"?><setxmlns:android="/apk/res/android"android:interpolator="@android:anim/linear_interpolator"><translateandroid:duration="2000"android:fromXDelta="100%"android:interpolator="@android:anim/linear_interpolator"android:repeatCount="infinite"android:repeatMode="restart"android:toXDelta="0%"/></set>三個(gè)動(dòng)畫(huà)到這里就定義完了，接下來(lái)就是怎么控制動(dòng)畫(huà)了。三、動(dòng)畫(huà)和下拉動(dòng)作、刷新?tīng)顟B(tài)的結(jié)合要控制動(dòng)畫(huà)就要把三個(gè)動(dòng)畫(huà)加載出來(lái)，我們繼續(xù)回到頭View``ParallaxHeader中。首先要加載人物的動(dòng)畫(huà)，因?yàn)槭菐瑒?dòng)畫(huà)，所以要用到AnimationDrawable：privateAnimationDrawablemAnimationDrawable;privatevoidinitialize(){...mIvIcon=(ImageView)findViewById(R.id.iv_refresh_icon);mAnimationDrawable=(AnimationDrawable)mIvIcon.getDrawable();}然后加在兩個(gè)背景的位移動(dòng)畫(huà)：privateAnimationDrawablemAnimationDrawable;privateAnimationmBackAnim1;privateAnimationmBackAnim2;privatevoidinitialize(){...mIvIcon=(ImageView)findViewById(R.id.iv_refresh_icon);mAnimationDrawable=(AnimationDrawable)mIvIcon.getDrawable();mBackAnim1=AnimationUtils.loadAnimation(getContext(),R.anim.refresh_down_background_1);mBackAnim2=AnimationUtils.loadAnimation(getContext(),R.anim.refresh_down_background_2);}接著為了方便調(diào)用，也減少代碼邏輯的復(fù)雜度，我們需要定義兩個(gè)方法來(lái)控制動(dòng)畫(huà)的結(jié)束和開(kāi)始，同時(shí)為了動(dòng)畫(huà)不被重復(fù)開(kāi)始和停止，定義一個(gè)變量來(lái)記錄動(dòng)畫(huà)是否是運(yùn)行的：/***記錄動(dòng)畫(huà)是否在執(zhí)行。*/privatebooleanisRunAnimation=false;/***開(kāi)始刷新動(dòng)畫(huà)。*/privatevoidstartAnimation(){if(!isRunAnimation){isRunAnimation=true;mIvBack1.startAnimation(mBackAnim1);mIvBack2.startAnimation(mBackAnim2);mIvIcon.setImageDrawable(mAnimationDrawable);mAnimationDrawable.start();}}/***停止刷新動(dòng)畫(huà)。*/privatevoidstopAnimation(){if(isRunAnimation){isRunAnimation=false;mIvBack1.clearAnimation();mIvBack2.clearAnimation();mAnimationDrawable.stop();}}到這里基本上已經(jīng)完成了，我們可以把上面PrallaxHeader中的下拉監(jiān)聽(tīng)和刷新?tīng)顟B(tài)代碼補(bǔ)全了：@OverridepublicvoidonUIReset(PtrFrameLayoutframe){//重置頭View的動(dòng)畫(huà)狀態(tài)，一般停止刷新動(dòng)畫(huà)。stopAnimation();}@OverridepublicvoidonUIRefreshPrepare(PtrFrameLayoutframe){//準(zhǔn)備刷新的UI。}@OverridepublicvoidonUIRefreshBegin(PtrFrameLayoutframe){//開(kāi)始刷新的UI動(dòng)畫(huà)。stopAnimation();startAnimation();}@OverridepublicvoidonUIRefreshComplete(PtrFrameLayoutframe){//刷新完成，停止刷新動(dòng)畫(huà)。stopAnimation();}@OverridepublicvoidonUIPositionChange(PtrFrameLayoutframe,booleanisUnderTouch,bytestatus,PtrIndicatorptrIndicator){//手指下拉的時(shí)候的狀態(tài)，我們的下拉動(dòng)畫(huà)的控制就是通過(guò)這個(gè)方法：//frame是刷新的rootlayout。//isUnderTouch是手指是否按下，因?yàn)檫€有自動(dòng)刷新，手指肯定是松開(kāi)狀態(tài)。//status是現(xiàn)在的加載狀態(tài)，準(zhǔn)備、加載中、完成：PREPARE、LOADING、COMPLETE。//ptrIndicator是一些下拉偏移量的參數(shù)封裝。}onUIRefreshPrepare()是準(zhǔn)備UI，這里不需要實(shí)現(xiàn)，除了最后一個(gè)方法在下拉的時(shí)候觸發(fā)外，其它都已經(jīng)實(shí)現(xiàn)了，如果你基礎(chǔ)還過(guò)關(guān)，你可以照著本博客敲出來(lái)上面講的所有代碼，然后在你的Layout中用一個(gè)ParallaxPtrFrameLayout包涵一個(gè)布局，運(yùn)行起來(lái)，然后下拉后松開(kāi)看看，已經(jīng)看到了文章開(kāi)頭刷新?tīng)顟B(tài)時(shí)的背景左移，人物走路的動(dòng)畫(huà)了。不過(guò)我是個(gè)追求完美的人，所以我必須要實(shí)現(xiàn)下拉的時(shí)候人物走向中間的動(dòng)畫(huà)。四、下拉時(shí)，人物走向中間不可避免，這里我們要拿到下拉時(shí)的總offset，還要拿到手指已經(jīng)下拉的offset，然后算出一個(gè)百分比，結(jié)合從屏幕最左邊到屏幕中間的位置，算出當(dāng)前人物需要走到哪里。這里有一個(gè)注意的點(diǎn)，就是人物要走到屏幕中間的位置，這個(gè)位置可不是屏幕寬度/2，應(yīng)該等于屏幕寬度/2-人物View寬度/2。因?yàn)槿宋锸菑钠聊蛔钭筮厁=0開(kāi)始移動(dòng)，如果移動(dòng)到x=屏幕寬/2這個(gè)位置，那么人物就看起來(lái)偏右了。好吧說(shuō)這么多，不如再來(lái)個(gè)圖解釋一下：這里的問(wèn)號(hào)代表的是Y，這個(gè)不用關(guān)心，我們只需要關(guān)心X方向的平移，這里人物ImageView的X是以左邊開(kāi)始算的，讓它移動(dòng)到屏幕中間的時(shí)候它就會(huì)是圖一所示，此時(shí)如果我們將人物ImageView向左移動(dòng)半個(gè)人的距離，剛好是到屏幕中間，所以人物每次需要移動(dòng)的距離是（屏幕寬度/2-人物View寬度/2）。那么下面我們把代碼擼起：/***人物到屏幕中間的x點(diǎn)。*/privateintlimitX;/***計(jì)算人物到屏幕中間的x點(diǎn)。*/privatevoidcalcLimitX(){limitX=DisplayUtils.screenWidth/2;intmIconIvWidth=mIvIcon.getMeasuredWidth();limitX-=(mIconIvWidth/2);}@OverridepublicvoidonUIPositionChange(PtrFrameLayoutframe,booleanisUnderTouch,bytestatus,PtrIndicatorptrIndicator){//獲取總的頭部可下拉的距離：finalintoffsetToRefresh=frame.getOffsetToRefresh();//獲取當(dāng)前手指已經(jīng)下拉的距離：finalintcurrentPos=ptrIndicator.getCurrentPosY();//當(dāng)前距離小于總的下拉距離時(shí)才計(jì)算移動(dòng)if(currentPos<=offsetToRefresh){//計(jì)算人物到屏幕中間的x點(diǎn)。calcLimitX();//根據(jù)下拉距離占可下拉高度的比例，算出向右走的距離：doublepercent=(double)currentPos/offsetToRefresh;inttargetX=(int)(limitX*percent);//人物向右走：mIvIcon.setTranslationX(targetX);//人物向右移動(dòng)算出來(lái)還不夠，因?yàn)檫€有換圖片才能模擬出人物走動(dòng)的效果。//當(dāng)百分比是1030507090時(shí)顯示第一張圖。//當(dāng)百分比是20406080100時(shí)顯示第二張圖。//當(dāng)百分比是5152535455565758595時(shí)顯示第三張圖。//這樣就模擬出了下拉時(shí)人物向右走的效果了。intnewPercent=(int)(percent*100);if(newPercent%10==0){doublei=newPercent/10;if(i%2==0){mIvIcon.setImageResource(R.drawable.refresh_down_icon_3);}else{mIvIcon.setImageResource(R.drawable.refresh_down_icon_1);}}elseif(newPercent%5==0){mIvIcon.setImageResource(R.drawable.refresh_down_icon_2);}}}這里廢話(huà)就再不多說(shuō)了，一切都在代碼注釋中，所以下面貼出ParallaxHeader的完整代碼，本文源碼下載鏈接在文章末尾：publicclassParallaxHeaderextendsFrameLayoutimplementsPtrUIHandler{ImageViewmIvBack1;ImageViewmIvBack2;ImageViewmIvIcon;privateAnimationmBackAnim1;privateAnimationmBackAnim2;privateAnimationDrawablemAnimationDrawable;privatebooleanisRunAnimation=false;privateintlimitX;privatevoidinitialize(){LayoutInflater.from(getContext()).inflate(R.layout.refresh_parallax,this);setBackgroundColor(ContextCompat.getColor(getContext(),R.color.refresh_background));mIvBack1=(ImageView)findViewById(R.id.iv_background_1);mIvBack2=(ImageView)findViewById(R.id.iv_background_2);mIvIcon=(ImageView)findViewById(R.id.iv_refresh_icon);mAnimationDrawable=(AnimationDrawable)mIvIcon.getDrawable();mBackAnim1=AnimationUtils.loadAnimation(getContext(),R.anim.refresh_down_background_1);mBackAnim2=AnimationUtils.loadAnimation(getContext(),R.anim.refresh_down_background_2);}publicParallaxHeader(Contextcontext){this(context,null,0);}publicParallaxHeader(Contextcontext,AttributeSetattrs){this(context,attrs,0);}publicParallaxHeader(Contextcontext,AttributeSetattrs,intdefStyleAttr){super(context,attrs,defStyleAttr);initialize();}/***開(kāi)始刷新動(dòng)畫(huà)。*/privatevoidstartAnimation(){if(!isRunAnimation){isRunAnimation=true;mIvBack1.startAnimation(mBackAnim1);mIvBack2.startAnimation(mBackAnim2);mIvIcon.setImageDrawable(mAnimationDrawable);mAnimationDrawable.start();}}/***停止刷新動(dòng)畫(huà)。*/privatevoidstopAnimation(){if(isRunAnimation){isRunAnimation=false;mIvBack1.clearAnimation();mIvBack2.clearAnimation();mAnimationDrawable.stop();}}@OverridepublicvoidonUIReset(PtrFrameLayoutframe){