2. 程式人生 > >Android為ViewPager增加切換動畫——使用屬性動畫

Android為ViewPager增加切換動畫——使用屬性動畫

阿新 • • 發佈：2019-01-25

 ViewPager作為Android最常用的的元件之一，相信大家在專案中會頻繁的使用到的，例如利用ViewPager製作引導頁、輪播圖，甚至做整個app的表現層的框架等等。

Android3.0以下不支援切換動畫

但是在Android 3.0（API 11）以下的ViewPager是比較死板的，不支援動畫特效的，這也就讓ViewPager在切換的時候達不到很好的使用者體驗，下面就是Android3.0以下不新增動畫的ViewPager的實現程式碼以及效果演示：

public class MainActivity extends Activity {

	private ViewPager mViewPager;
	private int[] imgRes = new int[] { R.drawable.guide_image1, R.drawable.guide_image2, R.drawable.guide_image3 };
	private List<ImageView> imgList = new ArrayList<ImageView>();

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		setContentView(R.layout.activity_main);
		mViewPager = (ViewPager) findViewById(R.id.viewpager);
		mViewPager.setAdapter(new PagerAdapter() {

			@Override
			public boolean isViewFromObject(View arg0, Object arg1) {
				return arg0 == arg1;
			}

			@Override
			public int getCount() {
				return imgRes.length;
			}

			@Override
			public Object instantiateItem(ViewGroup container, int position) {
				ImageView mImageView = new ImageView(MainActivity.this);
				mImageView.setBackgroundResource(imgRes[position]);
				mImageView.setScaleType(ScaleType.CENTER_CROP);
				imgList.add(mImageView);
				container.addView(mImageView);
				return mImageView;
			}

			@Override
			public void destroyItem(ViewGroup container, int position, Object object) {
				container.removeView(imgList.get(position));
			}
		});
	}
}
上面是最簡單的ViewPager使用的Demo，執行如下，看起來很普通很死板：

支援Android3.0以上的官方方法

值得慶幸的是，Google在Android3.0以上的版本中增加了給ViewPager設定切換動畫的API，允許開發者在Android3.0以上版本的應用中為ViewPager增加動畫切換效果，這樣就可以讓ViewPager的切換效果變的絢麗點了，為ViewPager新增動畫效果的API如下： 
 public void setPageTransformer(boolean reverseDrawingOrder, PageTransformer transformer){...}
其中第一個引數boolean型別設定true就好，第二個引數PageTransformer就是我們自定義好的動畫效果： 
mViewPager = (ViewPager) findViewById(R.id.viewpager);
mViewPager.setPageTransformer(true, new ZoomOutPageTransformer());
其中ZoomOutPageTransformer的程式碼來自於google的training文件中，英文好的朋友可以直接進入文件檢視，連結是 原始碼如下： 
public class ZoomOutPageTransformer implements ViewPager.PageTransformer {
	private static final float MIN_SCALE = 0.85f;
	private static final float MIN_ALPHA = 0.5f;

	public void transformPage(View view, float position) {
		int pageWidth = view.getWidth();
		int pageHeight = view.getHeight();

		if (position < -1) { // [-Infinity,-1)
			// This page is way off-screen to the left.
			view.setAlpha(0);

		} else if (position <= 1) { // [-1,1]
			// Modify the default slide transition to shrink the page as well
			float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position));
			float vertMargin = pageHeight * (1 - scaleFactor) / 2;
			float horzMargin = pageWidth * (1 - scaleFactor) / 2;
			if (position < 0) {
				view.setTranslationX(horzMargin - vertMargin / 2);
			} else {
				view.setTranslationX(-horzMargin + vertMargin / 2);
			}

			// Scale the page down (between MIN_SCALE and 1)
			view.setScaleX(scaleFactor);
			view.setScaleY(scaleFactor);

			// Fade the page relative to its size.
			view.setAlpha(MIN_ALPHA + (scaleFactor - MIN_SCALE) / (1 - MIN_SCALE) * (1 - MIN_ALPHA));

		} else { // (1,+Infinity]
			// This page is way off-screen to the right.
			view.setAlpha(0);
		}
	}
}
另外Google文件中還提供了另外一個動畫的實現方式，我暫且把原始碼附在下面： 
public class DepthPageTransformer implements ViewPager.PageTransformer {
	private static final float MIN_SCALE = 0.75f;

	public void transformPage(View view, float position) {
		int pageWidth = view.getWidth();

		if (position < -1) { // [-Infinity,-1)
			// This page is way off-screen to the left.
			view.setAlpha(0);

		} else if (position <= 0) { // [-1,0]
			// Use the default slide transition when moving to the left page
			view.setAlpha(1);
			view.setTranslationX(0);
			view.setScaleX(1);
			view.setScaleY(1);

		} else if (position <= 1) { // (0,1]
			// Fade the page out.
			view.setAlpha(1 - position);

			// Counteract the default slide transition
			view.setTranslationX(pageWidth * -position);

			// Scale the page down (between MIN_SCALE and 1)
			float scaleFactor = MIN_SCALE + (1 - MIN_SCALE) * (1 - Math.abs(position));
			view.setScaleX(scaleFactor);
			view.setScaleY(scaleFactor);

		} else { // (1,+Infinity]
			// This page is way off-screen to the right.
			view.setAlpha(0);
		}
	}
}
兩種方式的所實現的效果如下所示，一是ZoomOutPageTransformer，二是DepthPageTransformer         

相容Android3.0以下的版本

前面我們說過的，Android3.0以下版本是不支援ViewPager增加切換動畫的，原因很簡單，我們可以參考一下上面貼出的兩段程式碼，可以看到兩段程式碼中都是使用了Android的屬性動畫寫的切換效果，我們知道Android屬性動畫是在Android3.0才出來的特性，僅支援Android3.0及其以上版本，所以ViewPager的切換動畫在Android3.0以下的版本中就不會支援了。分析出了不能在Android3.0以下版本中新增動畫的原因後，我們就可以通過其它的方法來解決這個相容性的問題了。 還記得之前我們在部落格中就聊過老外的一個大牛——JakeWharton，對的，這個大牛在GitHub開源了自己為Android3.0以下系統新增屬性動畫的專案——NineOldAndroids，我們可以下載原始碼或者jar匯入到我們的工程中來，用它來相容我們的Android3.0以下的版本。 下面就是我在DepthPageTransformer類中將View換成NineOldAndroids下的ViewHelper後，修改可以相容Android3.0以下版本的屬性動畫： 
public class DepthPageTransformer implements ViewPager.PageTransformer {
	private static final float MIN_SCALE = 0.75f;

	public void transformPage(View view, float position) {
		int pageWidth = view.getWidth();

		if (position < -1) {
			// view.setAlpha(0);
			ViewHelper.setAlpha(view, 0);
		} else if (position <= 0) {
			// view.setAlpha(1);
			ViewHelper.setAlpha(view, 1);
			// view.setTranslationX(0);
			ViewHelper.setTranslationX(view, 0);
			// view.setScaleX(1);
			ViewHelper.setScaleX(view, 1);
			// view.setScaleY(1);
			ViewHelper.setScaleY(view, 1);
		} else if (position <= 1) {
			// view.setAlpha(1 - position);
			ViewHelper.setAlpha(view, 1 - position);
			// view.setTranslationX(pageWidth * -position);
			ViewHelper.setTranslationX(view, pageWidth * -position);
			float scaleFactor = MIN_SCALE + (1 - MIN_SCALE) * (1 - Math.abs(position));
			// view.setScaleX(scaleFactor);
			ViewHelper.setScaleX(view, scaleFactor);
			// view.setScaleY(scaleFactor);
			ViewHelper.setScaleY(view, scaleFactor);
		} else {
			// view.setAlpha(0);
			ViewHelper.setAlpha(view, 0);
		}
	}
}
為了好理解，我沒有將Google提供的原始碼刪除，而是註釋掉了，方便大家進行比較閱讀，然而即使這樣使用了NineOldAndroids對我們的動畫原始碼進行了改造，當我們開啟一個Android2.3的模擬器執行一下的時候發現，沒有起到效果，也就是這個動畫效果並沒有執行，在模擬器上執行的ViewPager滑動的效果還是原始預設的左右來回切換的動畫，這又是怎麼回事呢？為止，我們需要開啟ViewPager的原始碼進行閱讀一下了，既然是在mViewPager.setPageTransformer(true, new DepthPageTransformer());這句程式碼沒有起到效果，那麼我們就點進去檢視一下setPageTransformer這個方法的原始碼，原始碼如下： 
public void setPageTransformer(boolean reverseDrawingOrder, PageTransformer transformer){
	if (Build.VERSION.SDK_INT >= 11) {
		boolean hasTransformer = transformer != null;
		boolean needsPopulate = hasTransformer != (this.mPageTransformer != null);
		this.mPageTransformer = transformer;
		setChildrenDrawingOrderEnabledCompat(hasTransformer);
		if (hasTransformer) {
			this.mDrawingOrder = (reverseDrawingOrder ? 2 : 1);
		 } else {
			this.mDrawingOrder = 0;
		}
		if (needsPopulate) 
		    populate();
		}
}
好了，原始碼一目瞭然，我們分析到在ViewPager中的setPageTransFormer這個方法中，首先判斷了一下當前裝置的Build.VERSION_SDK_INT>=11，也就是說當前裝置是Android3.0以上系統的話，這個方法體執行沒問題，但是若是3.0一下，那就抱歉，無法執行了。知道這個原因之後我們就需要解決這個問題了，我在這裡修改了一下ViewPager的原始碼，修改ViewPager的原始碼之前，讀者可以先去下載一份ViewPager的原始碼，然後拷貝到工程中，重新命名一下，將裡面的if判斷語句給刪除了。以下就是我修改後的部分原始碼，命名為ViewPagerCompat： 
public void setPageTransformer(boolean reverseDrawingOrder, ViewPager.PageTransformer transformer) {
	// if (Build.VERSION.SDK_INT >= 11) {
	final boolean hasTransformer = transformer != null;
	final boolean needsPopulate = hasTransformer != (mPageTransformer != null);
	mPageTransformer = transformer;
	setChildrenDrawingOrderEnabledCompat(hasTransformer);
	if (hasTransformer) {
		mDrawingOrder = reverseDrawingOrder ? DRAW_ORDER_REVERSE : DRAW_ORDER_FORWARD;
	} else {
		mDrawingOrder = DRAW_ORDER_DEFAULT;
	}
	if (needsPopulate)
		populate();
	// }
}
好，原始碼修改完畢，將您的原始碼中的ViewPager替換成這個修改後的原始碼ViewPagerCompat，那麼ViewPager切換動畫的效果就出現了。

分析動畫原始碼，實現自己的動畫效果

上面的動畫原始碼是我在Google的官方文件中找到的，裡面完整的實現了一個系列動畫的功能。那麼我們是不是可以也能通過分析一下Google文件中原始碼的寫法，找到規律後，我們自己動手實現一個自己的動畫效果呢？先來看一下DepthPageTransformer.java這段原始碼，這個類實現了一個介面ViewPager.PageTransformer，重寫了其中的一個方法 
public void transformPage(View view, float position) {
	...
	Log.i("TAG", "view = " + view + ",position = " + position);	
        ...
}
如上所示，我先在這個方法中打印出方法中的引數view物件和position的值，然後我們來看一下LOG的輸出： 好，我們看LOG輸出日誌，可以看到有2個view物件在不停交錯的輸出，其中我選中標註的view的雜湊值是4054c260，未選中標註的view的雜湊值是4054c548，然後再來看一下position的值，可以注意的是，4054c260的view的position值從0.0一直不斷減小到-1.0，4054c548的view的position的值從1.0一直不斷減小到0.0，我們為了方便，記雜湊值為4054c260的view為A頁，記雜湊值為4054c548的view為B頁。 情景分析一下，也請一邊看一下DepthPageTransformer.java的原始碼； 當position < -1，此時position均不代表A頁和B頁的位置，所以這裡我們不做任何的動畫出來。 當position <= 0，此時position的範圍是在0.0 ~-1.0之間，可以認為這是代表A頁的運動軌跡，也就是A頁移出螢幕外。 當position <= 1，此時position的範圍是在1.0 ~ 0.0之間，可以認為這是代表B頁的運動軌跡，也就是B頁移到螢幕上。 當position > 1，此時position均不代表A頁和B頁的位置，所以這裡我們不做任何的動畫出來。 好了，通過我們的分析可知，我們實現動畫效果是根據position的變化來設定的。那麼，我們現在也要根據position來實現一個自己的ViewPager的動畫效果了，我們做一個ViewPager的旋轉移出螢幕和旋轉移到螢幕上的效果吧。草圖如下所示：
看著草圖，我們想象一下，當手指向左滑動的時候，A頁會旋轉一定的角度移出螢幕，B頁也會旋轉一定的角度移到螢幕上，那麼我們就先給移動的角度設定一個常量吧，這裡我假設旋轉的最大角度是20度了，以下是我的原始碼： 
/**
 * ViewPager自定義旋轉動畫
 * 
 * @author Vincent
 * 
 */
public class RotateDownTransformer implements PageTransformer {

	// 旋轉的最大角度為20度
	private static final float MAX_ROTATE = 20.0f;
	// 旋轉過程中的角度
	private float currentRotate;

	@Override
	public void transformPage(View view, float position) {
		int pageWidth = view.getWidth();
		Log.i("TAG", "view = " + view + ",position = " + position);
		if (position < -1) {
			ViewHelper.setRotation(view, 0);
		} else if (position <= 0) {
			// position範圍[-1.0,0.0],此時A頁動畫移出螢幕
			currentRotate = position * MAX_ROTATE;
			// 設定當前頁的旋轉中心點，橫座標是螢幕寬度的1/2,縱座標為螢幕的高度
			ViewHelper.setPivotX(view, pageWidth / 2);
			ViewHelper.setPivotY(view, view.getHeight());
			ViewHelper.setRotation(view, currentRotate);
		} else if (position <= 1) {
			// position範圍(0.0,1.0],此時B頁動畫移到螢幕
			currentRotate = position * MAX_ROTATE;
			// 設定當前頁的旋轉中心點，橫座標是螢幕寬度的1/2,縱座標為螢幕的高度
			ViewHelper.setPivotX(view, pageWidth / 2);
			ViewHelper.setPivotY(view, view.getHeight());
			ViewHelper.setRotation(view, currentRotate);
		} else {
			ViewHelper.setRotation(view, 0);
		}
	}
}
效果圖就在上面哦，看起來還湊合吧，根據上面的描述，只要你知道屬性動畫的相關api，也可以自定義初各種各樣的動畫效果出來，可以將多種單一的動畫效果混合在一起使用，讓ViewPager的滑動效果看起來更加的“複雜”。
感謝CSDN部落格專家鴻洋無私奉獻的教程，教程視訊地址：http://www.imooc.com/learn/226

相關推薦

Android為ViewPager增加切換動畫——使用屬性動畫

 ViewPager作為Android最常用的的元件之一，相信大家在專案中會頻繁的使用到的，例如利用ViewPager製作引導頁、輪播圖，甚至做整個app的表現層的框架等等。 Android3.0以下不支援切換動畫 但是在Android 3.0（API 11）以下的Vi

Android動畫--屬性動畫總結（一）

屬性動畫是API 11 才引入的新特性，屬性動畫彌補了view動畫的一些不足。屬性動畫可以針對屬性進行動畫而不僅僅是View。 但並不是傳遞任何的屬性都能有效果。屬性動畫要求做動畫的物件提供該屬性的get和set方法，屬性動畫根據外界傳遞的該屬性的初始值和最終值，以動畫的效果多次呼叫set

android 動畫 屬性動畫 ValueAnimator

屬性動畫2  Property Animation ValueAnimator（差值動畫） 單純從字面上理解的話ObjectAnimator作用於某個實際的物件，而ValueAnimator是Obje

Android 安卓動畫 屬性動畫

目錄 引入 佈局檔案 篇 程式碼邏輯 篇 引入 屬性動畫的出現，彌補了補間動畫的不足之處，補間動畫，只是改變了表面上的東西，但是其中屬性並未改變，而屬性動畫相反，改變了表面上的東西，並且也更改了其屬性。 類：ObjectAnimator 用於操作屬性動畫的類

Android 去掉橫豎屏切換時的動畫

直接上程式碼 ViewGroup decorView = (ViewGroup) activity.getWindow().getDecorView(); WindowManager windowManager = (WindowManager) getContext()

為表增加一列屬性（補充）

公司 uid dir 註意 器） name 哪些 在線 alter 事情變得有意思了，上一篇花1小時撰寫的“一分鐘”文章，又引起了廣泛的討論，說明相關的技術大家感興趣，挺好。第一次一篇技術文章的評論量過100，才知道原來“評論精選”還有100上限，甚為欣慰（雖然是以一種自己

展開拉伸動畫---屬性動畫

最近有一個需求是一個介面上點選一個按鈕,開啟一個需要顯示的View,然後再次點選隱藏,先看效果圖 展開前的介面 展開後的介面 實現原理,就是在佈局檔案中先把,需要顯示出來的View寫出來,然後再用屬性動畫動態的控制高度,從而實現點選展開和關閉的動畫

Android 為ViewPager新增滑動指示器（2）

上一篇博文使用了開源庫PagerSlidingTabStrip來實現ViewPager的滑動指示器 其實Google官方的Android Support Design包也提供了TabLayout來實現滑動指示器的效果 TabLayout的使用方法也十分簡單，

Android 中關於屬性動畫的一些思考，或許能為你解決一定的效能問題

——學之開源，用於開源；初學者的心態，與君共勉！======================================================== 序 用動畫用的久了漸漸的喜歡上她了，雖然它或許並不是女的，但我希望是~~ 用的久了，我漸漸的思考效能的問題

Android Studio之Activity切換動畫（三）

文章 oid out size ref intel tar studio anim 1、上一篇文章“Android Studio之多個Activity的滑動切換（二）”中實現了多個activity之間的滑動切換，可是新切換出的activity大多是從右側進入 2、我們能

Android屬性動畫完全解析(上)，初識屬性動畫的基本用法

fcm 操作 fad 擴展性 改變 內部使用 如果 轉載 @override 轉載請註明出處：http://blog.csdn.net/guolin_blog/article/details/43536355 在手機上去實現一些動畫效果算是件比較炫酷的事情，因此Andr

Android 屬性動畫（Property Animation） 全然解析 （上）

顏色 valid 全部 加速度 ext target ng- 點擊 save 轉載請標明出處：http://blog.csdn.net/lmj623565791/article/details/380674751、概述Android提供了幾種動畫類型：View Anima

Android圖文具體解釋屬性動畫

ref processor 拷貝 number name rup prop ren del Android中的動畫分為視圖動畫(View Animation)、屬性動畫（Property Animation）以及Drawable動畫。從Android 3

android動畫具體解釋二 屬性動畫原理

api概述 告訴 繪制 限制 post 了解 播放 語言 targe property動畫是一個強大的框架，它差點兒能使你動畫不論什麽東西。你能夠定義一個動畫來改變對象的不論什麽屬性，不論其是否被繪制於屏幕之上。一個屬性動畫在一定時間內多次改變一個屬性（對象的一

淺談Android屬性動畫.

1、前言 在我們體驗一款APP時，炫酷的動畫往往能讓使用者體驗大幅度提升。想當年我剛學Android的時候，無意中看到蘑菇街購物車的動畫效果，把我給激動得，非要在自己的APP中加入那動畫，記得當時用費了好大的勁...不提了，說多了都是淚... 先了解下，目前可以實現動畫的方

android中屬性動畫 ObjectionAnimation

   關於動畫：  android中動畫包括 View Animation、Drawable Animation和屬性動畫Property Animation      ●

Android RecyclerView、設定佈局管理器、設定Item增加、移除動畫、新增分割線

概述 RecyclerView出現已經有一段時間了，相信大家肯定不陌生了，大家可以通過匯入support-v7對其進行使用。 據官方的介紹，該控制元件用於在有限的視窗中展示大量資料集，其實這樣功能的控制元件我們並不陌生，例如：ListView、GridView。 那麼有了ListView、G

Android的Activity螢幕切換動畫左右滑動切換

在Android開發過程中，經常會碰到Activity之間的切換效果的問題，下面介紹一下如何實現左右滑動的切換效果，首先了解一下Activity切換的實現，從Android2.0開始在Activity增加了一個方法： public void overridePendingT

Android 自定義柱狀圖及屬性動畫

前段時間公司專案中用到了統計圖，網上找了些資料和框架都不能滿足我的需求，沒辦法，只有自己寫了。 近來清閒，將其抽出一個demo了，歡迎大家交流指正。 效果圖先行 實現方案有兩個，一是自定義控制元件，二是使用屬性動畫。屬性動畫在api11以上版本才有，在11版本以下使用可以引入nin

Android屬性動畫深入分析 讓你成為動畫牛人

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！