Android進階篇之引導頁系列之ViewPager實現Animation動畫引導頁

阿新 • • 發佈：2018-12-23

小夥伴們，時隔很久，我又開始來BB了，勿噴，，今天繼續上次所說的引導頁之旅。

其實想實現一個靜態的引導頁還是很容易的，就是一個ViewPager，但是想對每一頁實現動畫效果，比如第一頁有一幾朵雲在飄啊飄！，想實現這種效果對只要瞭解過Animation動畫的人來說也不難實現。基於ViewPager，分別對每一頁<也就是ViewPager的Child View>新增Animation，就可以簡單實現一些動畫效果。

今天，我在這裡不多贅述，就將ViewPager結合Animation製作動畫翻頁效果。剛開始還是一樣介紹一下程式碼，重點講怎麼優化動畫引用，因為動畫引用的圖片資源很多，單個的動畫demo基本上都不會怎麼OOM，但是一旦整合進專案中，就很容易OOM，至於為什麼會這樣我也不多贅述，想知道的在下面評論也行，我會回答的。

這次就拿模仿搜狗地圖6.3版本開啟動畫的demo來講解，先看效果，第一頁就是一個指標在轉動，第二頁那個小車從下面開向上面去，第三頁雲朵在飄動和小車在上下起伏，第四頁錢幣不斷的灑落進儲存罐。。。

程式碼分析：引用之前的ViewPager翻頁框架，分別對每一頁新增動畫，原始碼會在下面給出連結。

import java.util.ArrayList;
import java.util.List;

import android.app.Activity;
import android.content.Context;
import android.graphics.drawable.AnimationDrawable;
import android.graphics.drawable.BitmapDrawable;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.util.DisplayMetrics;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.AccelerateDecelerateInterpolator;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.view.animation.LinearInterpolator;
import android.view.animation.RotateAnimation;
import android.view.animation.ScaleAnimation;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
import android.widget.Toast;

public class MainActivity extends Activity implements
		ViewPager.OnPageChangeListener {

	public Context context ;
	
	public static int screenW, screenH;

	private static final int VIEW_NO_1 = 0;
	private static final int VIEW_NO_2 = 1;
	private static final int VIEW_NO_3 = 2;
	private static final int VIEW_NO_4 = 3;
	private static final int VIEW_NO_5 = 4;

	// 第1頁的資源,座標
	static ImageView mOnePointer;
	// 第2頁的資源,座標
	static ImageView mTwoCar;
	// 第3頁的資源,座標
	static ImageView mThreeCloudFast;
	static ImageView mThreeCloudSlow;
	static ImageView mThreeCarShadow;
	static ImageView mThreeCar;
	// 第4頁的資源,座標
	static ImageView mFourPig;
	static ImageView mFourPigShadow;
	static ImageView mFourCoin;
	static ImageView mFourCoinPack;
	// 第5頁的資源,座標
	static ImageView mFiveCar;
	static ImageView mFiveCarShadow;
	static ImageView mFiveCloudFast;
	static ImageView mFiveCloudSlow;

	private int preIndex = 0;
	private ViewPager mPager;
	private MyViewPagerAdapter mPagerAdapter;
	List<View> list = new ArrayList<View>();

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		context = this ;
		DisplayMetrics metric = new DisplayMetrics();
		getWindowManager().getDefaultDisplay().getMetrics(metric);
		screenW = metric.widthPixels; // 螢幕寬度（畫素）
		screenH = metric.heightPixels; // 螢幕高度（畫素）
		
		LayoutInflater inflater = LayoutInflater.from(this);
		
		View view0 = inflater.inflate(R.layout.guide_fragment_main_1, null,
				false);
		mOnePointer = (ImageView) view0.findViewById(R.id.one_pointer);

		View view1 = inflater.inflate(R.layout.guide_fragment_main_2, null,
				false);

		View view2 = inflater.inflate(R.layout.guide_fragment_main_3, null,
				false);

		View view3 = inflater.inflate(R.layout.guide_fragment_main_4, null,
				false);

		View view4 = inflater.inflate(R.layout.guide_fragment_main_5, null,
				false);

		list.add(view0);
		list.add(view1);
		list.add(view2);
		list.add(view3);
		list.add(view4);

		mPager = (ViewPager) findViewById(R.id.container);
		mPagerAdapter = new MyViewPagerAdapter(list);
		mPager.setAdapter(mPagerAdapter);
		mPager.setOnPageChangeListener(this);
		mPager.setPageTransformer(true, new transforms.StackTransformer());

		animal(VIEW_NO_1);
	}

	public class MyViewPagerAdapter extends PagerAdapter {
		private List<View> mListViews;

		public MyViewPagerAdapter(List<View> mListViews) {
			this.mListViews = mListViews;// 構造方法，引數是我們的頁卡，這樣比較方便。
		}

		@Override
		public void destroyItem(ViewGroup container, int position, Object object) {
			View view = mListViews.get(position) ;
			BitmapDrawable drawable = (BitmapDrawable)view.getBackground() ;
			if (drawable != null) {
				drawable.getBitmap().recycle() ;
			}
			switch (position) {
			case VIEW_NO_1:
				break;
			case VIEW_NO_2:
//				mTwoCar.getBackground().setCallback(null) ;
				break;
			case VIEW_NO_3:
				BitmapDrawable d3_1 = (BitmapDrawable)mThreeCar.getBackground() ;
				if (d3_1 != null) {
					d3_1.getBitmap().recycle() ;
				}
				BitmapDrawable d3_2 = (BitmapDrawable)mThreeCarShadow.getBackground() ;
				if (d3_2 != null) {
					d3_2.getBitmap().recycle() ;
				}
				break;
			case VIEW_NO_4:
//				mFourCoin.getBackground().setCallback(null) ;
				BitmapDrawable d4_1 = (BitmapDrawable)mFourCoinPack.getBackground() ;
				if (d4_1 != null) {
					d4_1.getBitmap().recycle() ;
				}
				BitmapDrawable d4_2 = (BitmapDrawable)mFourPig.getBackground() ;
				if (d4_2 != null) {
					d4_2.getBitmap().recycle() ;
				}
				BitmapDrawable d4_3 = (BitmapDrawable)mFourPigShadow.getBackground() ;
				if (d4_3 != null) {
					d4_3.getBitmap().recycle() ;
				}
				break;
			case VIEW_NO_5:
				BitmapDrawable d5_1 = (BitmapDrawable)mFiveCar.getBackground() ;
				if (d5_1 != null) {
					d5_1.getBitmap().recycle() ;
				}
				BitmapDrawable d5_2 = (BitmapDrawable)mFiveCarShadow.getBackground() ;
				if (d5_2 != null) {
					d5_2.getBitmap().recycle() ;
				}
				break;
			default:
				break;
			}
			container.removeView(mListViews.get(position));// 刪除頁卡
		}

		@SuppressWarnings("deprecation")
		@Override
		public Object instantiateItem(ViewGroup container, int position) { // 這個方法用來例項化頁卡
			View view = mListViews.get(position) ;
			container.addView(view, 0);// 新增頁卡
			switch (position) {
			case VIEW_NO_1:
				mOnePointer = (ImageView) view.findViewById(R.id.one_pointer);
				view.setBackgroundDrawable(
						ImageCompress
						.getInstance()
						.getCompressFromId(context, R.drawable.guide_one_bg, screenW, screenH)) ;
				break;
			case VIEW_NO_2:
				mTwoCar = (ImageView) view.findViewById(R.id.two_car);
				mTwoCar.setBackgroundResource(R.anim.guide_two_car_frame_anim);
				view.setBackgroundDrawable(
						ImageCompress
						.getInstance()
						.getCompressFromId(context, R.drawable.guide_two_bg, screenW, screenH)) ;
				break;
			case VIEW_NO_3:
				mThreeCar = (ImageView) view.findViewById(R.id.three_car);
				mThreeCarShadow = (ImageView) view.findViewById(R.id.three_car_shadow);
				mThreeCloudFast = (ImageView) view.findViewById(R.id.three_cloud_fast);
				mThreeCloudSlow = (ImageView) view.findViewById(R.id.three_cloud_slow);
				view.setBackgroundDrawable(
						ImageCompress
						.getInstance()
						.getCompressFromId(context, R.drawable.guide_three_bg, screenW, screenH)) ;
				break;
			case VIEW_NO_4:
				mFourCoinPack = (ImageView) view.findViewById(R.id.four_pack);
				mFourCoin = (ImageView) view.findViewById(R.id.four_coin);
				mFourCoin.setBackgroundResource(R.anim.guide_four_coin_frame_anim);
				mFourPig = (ImageView) view.findViewById(R.id.four_pig);
				mFourPigShadow = (ImageView) view.findViewById(R.id.four_pig_shadow);
				view.setBackgroundDrawable(
						ImageCompress
						.getInstance()
						.getCompressFromId(context, R.drawable.guide_four_bg, screenW, screenH)) ;
				break;
			case VIEW_NO_5:
				mFiveCar = (ImageView) view.findViewById(R.id.five_car);
				mFiveCarShadow = (ImageView) view.findViewById(R.id.five_car_shadow);
				mFiveCloudFast = (ImageView) view.findViewById(R.id.five_cloud_fast);
				mFiveCloudSlow = (ImageView) view.findViewById(R.id.five_cloud_slow);
				view.setOnTouchListener(mOnTouchListener);
				view.setBackgroundDrawable(
						ImageCompress
						.getInstance()
						.getCompressFromId(context, R.drawable.guide_five_bg, screenW, screenH)) ;
				break;
			default:
				break;
			}
			
			return mListViews.get(position);
		}

		@Override
		public int getCount() {
			return mListViews.size();// 返回頁卡的數量
		}

		@Override
		public boolean isViewFromObject(View arg0, Object arg1) {
			return arg0 == arg1;// 官方提示這樣寫
		}
	}

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

	@Override
	public void onPageSelected(int position) {
		animal(position);
	}

	@Override
	public void onPageScrollStateChanged(int state) {
	}

	private void animal(int position) {
		try {
			switch (position) {
			case VIEW_NO_1:
				AccelerateDecelerateInterpolator interpolator = new AccelerateDecelerateInterpolator();
				Animation animation1_1 = AnimationUtils.loadAnimation(this,
						R.anim.guide_one_pointer_ratate);
				animation1_1.setFillAfter(true);
				animation1_1.setInterpolator(interpolator);
				mOnePointer.clearAnimation();
				mOnePointer.startAnimation(animation1_1);
				break;
			case VIEW_NO_2:
				AnimationDrawable animation2_1 = (AnimationDrawable) mTwoCar
						.getBackground();
//				animation2_1.unscheduleSelf(null); // 重新將Frame動畫設定到第-1幀，也就是重新開始
				animation2_1.setVisible(false, true) ;
				animation2_1.start();
				break;
			case VIEW_NO_3:
				LinearInterpolator linearInterpolator = new LinearInterpolator();
				Animation animation3_1 = new TranslateAnimation(
						Animation.RELATIVE_TO_SELF, 0,
						Animation.RELATIVE_TO_PARENT, 1.0f,
						Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF,
						0);
				animation3_1.setDuration(25000);
				animation3_1.setInterpolator(linearInterpolator);
				mThreeCloudFast.clearAnimation();
				mThreeCloudFast.startAnimation(animation3_1);
				Animation animation3_2 = new TranslateAnimation(
						Animation.RELATIVE_TO_SELF, 0,
						Animation.RELATIVE_TO_PARENT, 1.0f,
						Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF,
						0);
				animation3_2.setDuration(35000);
				animation3_2.setInterpolator(linearInterpolator);
				mThreeCloudSlow.clearAnimation();
				mThreeCloudSlow.startAnimation(animation3_2);
				Animation animation3_3 = new ScaleAnimation(1.0f, 1.0f, 1.0f,
						1.05f, Animation.RELATIVE_TO_SELF, 0,
						Animation.RELATIVE_TO_SELF, 1.0f);
				animation3_3.setRepeatCount(-1);
				animation3_3.setRepeatMode(Animation.REVERSE);
				animation3_3.setDuration(500);
				animation3_3.setInterpolator(linearInterpolator);
				mThreeCar.clearAnimation();
				mThreeCar.startAnimation(animation3_3);
				Animation animation3_4 = new ScaleAnimation(1.0f, 1.05f, 1.0f,
						1.05f, Animation.RELATIVE_TO_SELF, 0.5f,
						Animation.RELATIVE_TO_SELF, 0.5f);
				animation3_4.setRepeatCount(-1);
				animation3_4.setDuration(500);
				animation3_4.setRepeatMode(Animation.REVERSE);
				animation3_4.setInterpolator(linearInterpolator);
				mThreeCarShadow.clearAnimation();
				mThreeCarShadow.startAnimation(animation3_4);
				break;
			case VIEW_NO_4:
				// 錢桶的動畫
				Animation animation4_1 = new RotateAnimation(0, 5,
						Animation.RELATIVE_TO_SELF, 0.5f,
						Animation.RELATIVE_TO_PARENT, 0.5f);
				animation4_1.setRepeatCount(-1);
				animation4_1.setDuration(300);
				mFourCoinPack.clearAnimation();
				mFourCoinPack.startAnimation(animation4_1);
				// 硬幣掉落的動畫
				AnimationDrawable animation4_2 = (AnimationDrawable) mFourCoin
						.getBackground();
				animation4_2.start();
				// 小豬的動畫
				Animation animation4_3 = new ScaleAnimation(1.0f, 1.0f, 1.0f,
						1.05f, Animation.RELATIVE_TO_SELF, 0,
						Animation.RELATIVE_TO_SELF, 1.0f);
				animation4_3.setRepeatCount(-1);
				animation4_3.setDuration(500);
				mFourPig.clearAnimation();
				mFourPig.startAnimation(animation4_3);
				// 小豬影子的動畫
				Animation animation4_4 = new ScaleAnimation(1.0f, 1.05f, 1.0f,
						1.05f, Animation.RELATIVE_TO_SELF, 0.75f,
						Animation.RELATIVE_TO_SELF, 0.95f);
				animation4_4.setRepeatCount(-1);
				animation4_4.setDuration(500);
				mFourPigShadow.clearAnimation();
				mFourPigShadow.startAnimation(animation4_4);
				break;
			case VIEW_NO_5:
				LinearInterpolator linearInterpolator2 = new LinearInterpolator();
				Animation animation5_1 = new TranslateAnimation(
						Animation.RELATIVE_TO_SELF, 0,
						Animation.RELATIVE_TO_PARENT, 1.0f,
						Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF,
						0);
				animation5_1.setDuration(25000);
				animation5_1.setInterpolator(linearInterpolator2);
				mFiveCloudFast.clearAnimation();
				mFiveCloudFast.startAnimation(animation5_1);
				Animation animation5_2 = new TranslateAnimation(
						Animation.RELATIVE_TO_SELF, 0,
						Animation.RELATIVE_TO_PARENT, 1.0f,
						Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF,
						0);
				animation5_2.setDuration(35000);
				animation5_2.setInterpolator(linearInterpolator2);
				mFiveCloudSlow.clearAnimation();
				mFiveCloudSlow.startAnimation(animation5_2);
				Animation animation5_3 = new ScaleAnimation(1.0f, 1.0f, 1.0f, 1.1f,
						Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF,
						1.0f);
				animation5_3.setRepeatCount(-1);
				animation5_3.setDuration(500);
				animation5_3.setRepeatMode(Animation.REVERSE);
				mFiveCar.clearAnimation();
				mFiveCar.startAnimation(animation5_3);
				Animation animation5_4 = new ScaleAnimation(1.0f, 1.1f, 1.0f, 1.1f,
						Animation.RELATIVE_TO_SELF, 0.5f,
						Animation.RELATIVE_TO_SELF, 0.5f);
				animation5_4.setRepeatCount(-1);
				animation5_4.setDuration(500);
				animation5_4.setRepeatMode(Animation.REVERSE);
				mFiveCarShadow.clearAnimation();
				mFiveCarShadow.startAnimation(animation5_4);
				break;
			}
			preIndex = position;
		} catch (Exception e) {
			finish() ;
		}
	}

	View.OnTouchListener mOnTouchListener = new View.OnTouchListener() {

		@Override
		public boolean onTouch(View v, MotionEvent event) {
			if (preIndex == 4) {
				switch (event.getAction()) {
				case MotionEvent.ACTION_DOWN:
					x1 = (int) event.getX();
					Toast.makeText(MainActivity.this, "X1--->" + x1,
							Toast.LENGTH_SHORT).show();
					break;
				case MotionEvent.ACTION_MOVE:

					x2 = (int) event.getX();
					Toast.makeText(MainActivity.this, "X2--->" + x2,
							Toast.LENGTH_SHORT).show();
					if ((x2 - x1) < 0) {
						finish();
					}

					// Toast.makeText(MainActivity.this, "<--->" + (int)
					// event.getX(), Toast.LENGTH_SHORT).show() ;
					break;
				case MotionEvent.ACTION_UP:
					x2 = (int) event.getX();
					Toast.makeText(MainActivity.this, "X2--->" + x2,
							Toast.LENGTH_SHORT).show();
					if ((x2 - x1) < 0) {
						finish();
					}
					break;
				default:
					break;
				}
			}
			return true;
		}
	};

	int x1 = 0, x2 = 0;

}

第一步：在onCreate函式中初始化每一個子view，然後新增翻頁的監聽和翻頁的動畫效果<注意：這是翻頁效果，不是子view中的物件的動畫效果>

	public Context context ;
	
	public static int screenW, screenH;

	private static final int VIEW_NO_1 = 0;
	private static final int VIEW_NO_2 = 1;
	private static final int VIEW_NO_3 = 2;
	private static final int VIEW_NO_4 = 3;
	private static final int VIEW_NO_5 = 4;

	// 第1頁的資源,座標
	static ImageView mOnePointer;
	// 第2頁的資源,座標
	static ImageView mTwoCar;
	// 第3頁的資源,座標
	static ImageView mThreeCloudFast;
	static ImageView mThreeCloudSlow;
	static ImageView mThreeCarShadow;
	static ImageView mThreeCar;
	// 第4頁的資源,座標
	static ImageView mFourPig;
	static ImageView mFourPigShadow;
	static ImageView mFourCoin;
	static ImageView mFourCoinPack;
	// 第5頁的資源,座標
	static ImageView mFiveCar;
	static ImageView mFiveCarShadow;
	static ImageView mFiveCloudFast;
	static ImageView mFiveCloudSlow;

	private int preIndex = 0;
	private ViewPager mPager;
	private MyViewPagerAdapter mPagerAdapter;
	List<View> list = new ArrayList<View>();

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		context = this ;
		DisplayMetrics metric = new DisplayMetrics();
		getWindowManager().getDefaultDisplay().getMetrics(metric);
		screenW = metric.widthPixels; // 螢幕寬度（畫素）
		screenH = metric.heightPixels; // 螢幕高度（畫素）
		
		LayoutInflater inflater = LayoutInflater.from(this);
		
		View view0 = inflater.inflate(R.layout.guide_fragment_main_1, null,
				false);
		mOnePointer = (ImageView) view0.findViewById(R.id.one_pointer);

		View view1 = inflater.inflate(R.layout.guide_fragment_main_2, null,
				false);

		View view2 = inflater.inflate(R.layout.guide_fragment_main_3, null,
				false);

		View view3 = inflater.inflate(R.layout.guide_fragment_main_4, null,
				false);

		View view4 = inflater.inflate(R.layout.guide_fragment_main_5, null,
				false);

		list.add(view0);
		list.add(view1);
		list.add(view2);
		list.add(view3);
		list.add(view4);

		mPager = (ViewPager) findViewById(R.id.container);
		mPagerAdapter = new MyViewPagerAdapter(list);
		mPager.setAdapter(mPagerAdapter);
		mPager.setOnPageChangeListener(this);//設定翻頁的監聽
		mPager.setPageTransformer(true, new transforms.StackTransformer());//這裡設定為堆疊式的翻頁效果

		animal(VIEW_NO_1);//這裡是為了第一次進入應用時，作出第一頁的動畫
	}

第二步：新增翻頁監聽後，處理翻頁的回撥函式

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

	@Override
	public void onPageSelected(int position) {
		animal(position);//播放第position頁的動畫
	}

第三步：實現animal函式

	private void animal(int position) {
		try {
			switch (position) {
			case VIEW_NO_1:
				AccelerateDecelerateInterpolator interpolator = new AccelerateDecelerateInterpolator();
				Animation animation1_1 = AnimationUtils.loadAnimation(this,
						R.anim.guide_one_pointer_ratate);
				animation1_1.setFillAfter(true);
				animation1_1.setInterpolator(interpolator);
				mOnePointer.clearAnimation();
				mOnePointer.startAnimation(animation1_1);
				break;
			case VIEW_NO_2:
				AnimationDrawable animation2_1 = (AnimationDrawable) mTwoCar
						.getBackground();
//				animation2_1.unscheduleSelf(null); // 重新將Frame動畫設定到第-1幀，也就是重新開始
				animation2_1.setVisible(false, true) ;
				animation2_1.start();
				break;
			case VIEW_NO_3:
				LinearInterpolator linearInterpolator = new LinearInterpolator();
				Animation animation3_1 = new TranslateAnimation(
						Animation.RELATIVE_TO_SELF, 0,
						Animation.RELATIVE_TO_PARENT, 1.0f,
						Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF,
						0);
				animation3_1.setDuration(25000);
				animation3_1.setInterpolator(linearInterpolator);
				mThreeCloudFast.clearAnimation();
				mThreeCloudFast.startAnimation(animation3_1);
				Animation animation3_2 = new TranslateAnimation(
						Animation.RELATIVE_TO_SELF, 0,
						Animation.RELATIVE_TO_PARENT, 1.0f,
						Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF,
						0);
				animation3_2.setDuration(35000);
				animation3_2.setInterpolator(linearInterpolator);
				mThreeCloudSlow.clearAnimation();
				mThreeCloudSlow.startAnimation(animation3_2);
				Animation animation3_3 = new ScaleAnimation(1.0f, 1.0f, 1.0f,
						1.05f, Animation.RELATIVE_TO_SELF, 0,
						Animation.RELATIVE_TO_SELF, 1.0f);
				animation3_3.setRepeatCount(-1);
				animation3_3.setRepeatMode(Animation.REVERSE);
				animation3_3.setDuration(500);
				animation3_3.setInterpolator(linearInterpolator);
				mThreeCar.clearAnimation();
				mThreeCar.startAnimation(animation3_3);
				Animation animation3_4 = new ScaleAnimation(1.0f, 1.05f, 1.0f,
						1.05f, Animation.RELATIVE_TO_SELF, 0.5f,
						Animation.RELATIVE_TO_SELF, 0.5f);
				animation3_4.setRepeatCount(-1);
				animation3_4.setDuration(500);
				animation3_4.setRepeatMode(Animation.REVERSE);
				animation3_4.setInterpolator(linearInterpolator);
				mThreeCarShadow.clearAnimation();
				mThreeCarShadow.startAnimation(animation3_4);
				break;
			case VIEW_NO_4:
				// 錢桶的動畫
				Animation animation4_1 = new RotateAnimation(0, 5,
						Animation.RELATIVE_TO_SELF, 0.5f,
						Animation.RELATIVE_TO_PARENT, 0.5f);
				animation4_1.setRepeatCount(-1);
				animation4_1.setDuration(300);
				mFourCoinPack.clearAnimation();
				mFourCoinPack.startAnimation(animation4_1);
				// 硬幣掉落的動畫
				AnimationDrawable animation4_2 = (AnimationDrawable) mFourCoin
						.getBackground();
				animation4_2.start();
				// 小豬的動畫
				Animation animation4_3 = new ScaleAnimation(1.0f, 1.0f, 1.0f,
						1.05f, Animation.RELATIVE_TO_SELF, 0,
						Animation.RELATIVE_TO_SELF, 1.0f);
				animation4_3.setRepeatCount(-1);
				animation4_3.setDuration(500);
				mFourPig.clearAnimation();
				mFourPig.startAnimation(animation4_3);
				// 小豬影子的動畫
				Animation animation4_4 = new ScaleAnimation(1.0f, 1.05f, 1.0f,
						1.05f, Animation.RELATIVE_TO_SELF, 0.75f,
						Animation.RELATIVE_TO_SELF, 0.95f);
				animation4_4.setRepeatCount(-1);
				animation4_4.setDuration(500);
				mFourPigShadow.clearAnimation();
				mFourPigShadow.startAnimation(animation4_4);
				break;
			case VIEW_NO_5:
				LinearInterpolator linearInterpolator2 = new LinearInterpolator();
				Animation animation5_1 = new TranslateAnimation(
						Animation.RELATIVE_TO_SELF, 0,
						Animation.RELATIVE_TO_PARENT, 1.0f,
						Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF,
						0);
				animation5_1.setDuration(25000);
				animation5_1.setInterpolator(linearInterpolator2);
				mFiveCloudFast.clearAnimation();
				mFiveCloudFast.startAnimation(animation5_1);
				Animation animation5_2 = new TranslateAnimation(
						Animation.RELATIVE_TO_SELF, 0,
						Animation.RELATIVE_TO_PARENT, 1.0f,
						Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF,
						0);
				animation5_2.setDuration(35000);
				animation5_2.setInterpolator(linearInterpolator2);
				mFiveCloudSlow.clearAnimation();
				mFiveCloudSlow.startAnimation(animation5_2);
				Animation animation5_3 = new ScaleAnimation(1.0f, 1.0f, 1.0f, 1.1f,
						Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF,
						1.0f);
				animation5_3.setRepeatCount(-1);
				animation5_3.setDuration(500);
				animation5_3.setRepeatMode(Animation.REVERSE);
				mFiveCar.clearAnimation();
				mFiveCar.startAnimation(animation5_3);
				Animation animation5_4 = new ScaleAnimation(1.0f, 1.1f, 1.0f, 1.1f,
						Animation.RELATIVE_TO_SELF, 0.5f,
						Animation.RELATIVE_TO_SELF, 0.5f);
				animation5_4.setRepeatCount(-1);
				animation5_4.setDuration(500);
				animation5_4.setRepeatMode(Animation.REVERSE);
				mFiveCarShadow.clearAnimation();
				mFiveCarShadow.startAnimation(animation5_4);
				break;
			}
			preIndex = position;
		} catch (Exception e) {
			finish() ;
		}
	}

裡面都是對Animation的疊加使用，只要理解了Android的Animation這段程式碼應該都可以看得懂，

，實在是看不懂可以參與討論哦

最後一步：實現PagerAdapter，因為翻頁動畫加入專案中需要很高的效率性，如果效率不高，很容易導致資源佔用過多，所以這裡分別對destroyItem和instantiateItem函式進行了高效率的重寫。ViewPager的機制是隻載入<假如當前頁是B>A、B和C頁，所以對不用的頁面會呼叫destroyItem函式，所以都在這裡做回收操作，因為有頁面會被回收，所以如果在物件棧中找不到想去的下一頁資源ViewPager的PagerAdapter就會呼叫instantiateItem函式來建立view，所以需要在這裡分別建立子view。

說好的重視優化呢？，如果你們以為上面這些就是優化，說明你對動畫的使用還不是很瞭解，也對圖片的使用規則不是很清楚

但是接下來，我會淺談一下這些問題滴，又要被鄙視了

還是OOM的問題，Android OS會對每一個APP分配一個固定大小的記憶體僅供使用，所以當你的引導頁中使用了許多大背景，比如像幀動畫一下就使用N張大圖，所以一下就OOM了，雖然PNG格式會有很多透明的地方，就像這裡的一個小車，但是UI切的圖片就和背景一樣大，那是因為要對應小車的位置。在Android中Bitmap儲存的流可不管你是什麼格式的圖片，佔用空間有多大，一切都要按照Android的計算方式，那就是 height*width*size，所以過多的使用大圖片就很佔記憶體。

當自己使用的圖片太大，那就需要壓縮，這裡我不講圖片壓縮，壓縮圖片以後專門講

原始碼中附帶了兩個util類，就是不同方法壓縮圖片

，BB完了，感覺也沒有多少東西

原始碼下載如果有什麼疑問，多多留言哦，小夥伴們！

接下來，會出一篇相對高階一點的動畫引導頁教程，使用SurfaceView實現動畫。

在SurfaceView的世界裡，只有你想不到的，沒有我實現不了的。，又開始裝B了。。。

Android進階篇之引導頁系列之ViewPager實現Animation動畫引導頁

Android進階篇之引導頁系列之ViewPager實現Animation動畫引導頁

【Android 進階】仿抖音系列之翻頁上下滑切換視訊（四）

【Android 進階】仿抖音系列之翻頁上下滑切換視訊（一）

【Android 進階】仿抖音系列之列表播放視訊（三）

【Android 進階】仿抖音系列之列表播放視訊（二）

【Android 進階】仿抖音系列之視訊預覽和錄製（五）

【android進階篇】Firefly-RK系列（eg：RK3288 RK3368）App實現重啟、靜默安裝應用

Android進階篇之引導頁系列之Splash閃屏Log

Android進階篇之ListView、GridView以及ScrollView實現按鈕控制滾動

android進階篇二 Android硬體加速詳解 Hardware Acceleration

Android進階篇-自定義Menu(設定Menu的背景及文字屬性)

[android進階篇]MVP模式優化，防止記憶體洩漏和空指標問題

spring進階第一節 : spring boot 系列之ssm專案實戰

Android進階——Material Design新控制元件之TabLayout製作可滾動的Tabs頁面（二）

《Android 進階（五）》應用分享簡單實現-LazyApkShare

mysql 開發進階篇系列 40 mysql日誌之二進位制日誌下以及查詢日誌

mysql 開發進階篇系列 41 mysql日誌之慢查詢日誌

Android逆向之旅---動態方式破解apk進階篇 IDA除錯so原始碼

Android進階系列之Support Annotation Library使用詳解

Android進階——多執行緒系列之非同步任務AsyncTask的使用與原始碼分析

Android進階篇之引導頁系列之ViewPager實現Animation動畫引導頁

相關推薦