Android进阶篇之引导页系列之ViewPager实现Animation动画引导页

其实想实现一个静态的引导页还是很容易的，就是一个ViewPager，但是想对每一页实现动画效果，比如第一页有一几朵云在飘啊飘！，想实现这种效果对只要了解过Animation动画的人来说也不难实现。基于ViewPager，分别对每一页<也就是ViewPager的Child View>添加Animation，就可以简单实现一些动画效果。

今天，我在这里不多赘述，就将ViewPager结合Animation制作动画翻页效果。刚开始还是一样介绍一下代码，重点讲怎么优化动画引用，因为动画引用的图片资源很多，单个的动画demo基本上都不会怎么OOM，但是一旦整合进项目中，就很容易OOM，至于为什么会这样我也不多赘述，想知道的在下面评论也行，我会回答的。

这次就拿模仿搜狗地图6.3版本开启动画的demo来讲解，先看效果，第一页就是一个指针在转动，第二页那个小车从下面开向上面去，第三页云朵在飘动和小车在上下起伏，第四页钱币不断的洒落进存储罐。。。

代码分析：引用之前的ViewPager翻页框架，分别对每一页添加动画，源代码会在下面给出链接。

[java]  view plain  copy

 print ?

1. import java.util.ArrayList;  
2. import java.util.List;  
3.   
4. import android.app.Activity;  
5. import android.content.Context;  
6. import android.graphics.drawable.AnimationDrawable;  
7. import android.graphics.drawable.BitmapDrawable;  
8. import android.os.Bundle;  
9. import android.support.v4.view.PagerAdapter;  
10. import android.support.v4.view.ViewPager;  
11. import android.util.DisplayMetrics;  
12. import android.view.LayoutInflater;  
13. import android.view.MotionEvent;  
14. import android.view.View;  
15. import android.view.ViewGroup;  
16. import android.view.animation.AccelerateDecelerateInterpolator;  
17. import android.view.animation.Animation;  
18. import android.view.animation.AnimationUtils;  
19. import android.view.animation.LinearInterpolator;  
20. import android.view.animation.RotateAnimation;  
21. import android.view.animation.ScaleAnimation;  
22. import android.view.animation.TranslateAnimation;  
23. import android.widget.ImageView;  
24. import android.widget.Toast;  
25.   
26. public class MainActivity extends Activity implements  
27.         ViewPager.OnPageChangeListener {  
28.   
29.     public Context context ;  
30.       
31.     public static int screenW, screenH;  
32.   
33.     private static final int VIEW_NO_1 = 0;  
34.     private static final int VIEW_NO_2 = 1;  
35.     private static final int VIEW_NO_3 = 2;  
36.     private static final int VIEW_NO_4 = 3;  
37.     private static final int VIEW_NO_5 = 4;  
38.   
39.     // 第1页的资源,坐标  
40.     static ImageView mOnePointer;  
41.     // 第2页的资源,坐标  
42.     static ImageView mTwoCar;  
43.     // 第3页的资源,坐标  
44.     static ImageView mThreeCloudFast;  
45.     static ImageView mThreeCloudSlow;  
46.     static ImageView mThreeCarShadow;  
47.     static ImageView mThreeCar;  
48.     // 第4页的资源,坐标  
49.     static ImageView mFourPig;  
50.     static ImageView mFourPigShadow;  
51.     static ImageView mFourCoin;  
52.     static ImageView mFourCoinPack;  
53.     // 第5页的资源,坐标  
54.     static ImageView mFiveCar;  
55.     static ImageView mFiveCarShadow;  
56.     static ImageView mFiveCloudFast;  
57.     static ImageView mFiveCloudSlow;  
58.   
59.     private int preIndex = 0;  
60.     private ViewPager mPager;  
61.     private MyViewPagerAdapter mPagerAdapter;  
62.     List<View> list = new ArrayList<View>();  
63.   
64.     @Override  
65.     protected void onCreate(Bundle savedInstanceState) {  
66.         super.onCreate(savedInstanceState);  
67.         setContentView(R.layout.activity_main);  
68.   
69.         context = this ;  
70.         DisplayMetrics metric = new DisplayMetrics();  
71.         getWindowManager().getDefaultDisplay().getMetrics(metric);  
72.         screenW = metric.widthPixels; // 屏幕宽度（像素）  
73.         screenH = metric.heightPixels; // 屏幕高度（像素）  
74.           
75.         LayoutInflater inflater = LayoutInflater.from(this);  
76.           
77.         View view0 = inflater.inflate(R.layout.guide_fragment_main_1, null,  
78.                 false);  
79.         mOnePointer = (ImageView) view0.findViewById(R.id.one_pointer);  
80.   
81.         View view1 = inflater.inflate(R.layout.guide_fragment_main_2, null,  
82.                 false);  
83.   
84.         View view2 = inflater.inflate(R.layout.guide_fragment_main_3, null,  
85.                 false);  
86.   
87.         View view3 = inflater.inflate(R.layout.guide_fragment_main_4, null,  
88.                 false);  
89.   
90.         View view4 = inflater.inflate(R.layout.guide_fragment_main_5, null,  
91.                 false);  
92.   
93.         list.add(view0);  
94.         list.add(view1);  
95.         list.add(view2);  
96.         list.add(view3);  
97.         list.add(view4);  
98.   
99.         mPager = (ViewPager) findViewById(R.id.container);  
100.         mPagerAdapter = new MyViewPagerAdapter(list);  
101.         mPager.setAdapter(mPagerAdapter);  
102.         mPager.setOnPageChangeListener(this);  
103.         mPager.setPageTransformer(true, new transforms.StackTransformer());  
104.   
105.         animal(VIEW_NO_1);  
106.     }  
107.   
108.     public class MyViewPagerAdapter extends PagerAdapter {  
109.         private List<View> mListViews;  
110.   
111.         public MyViewPagerAdapter(List<View> mListViews) {  
112.             this.mListViews = mListViews;// 构造方法，参数是我们的页卡，这样比较方便。  
113.         }  
114.   
115.         @Override  
116.         public void destroyItem(ViewGroup container, int position, Object object) {  
117.             View view = mListViews.get(position) ;  
118.             BitmapDrawable drawable = (BitmapDrawable)view.getBackground() ;  
119.             if (drawable != null) {  
120.                 drawable.getBitmap().recycle() ;  
121.             }  
122.             switch (position) {  
123.             case VIEW_NO_1:  
124.                 break;  
125.             case VIEW_NO_2:  
126. //              mTwoCar.getBackground().setCallback(null) ;  
127.                 break;  
128.             case VIEW_NO_3:  
129.                 BitmapDrawable d3_1 = (BitmapDrawable)mThreeCar.getBackground() ;  
130.                 if (d3_1 != null) {  
131.                     d3_1.getBitmap().recycle() ;  
132.                 }  
133.                 BitmapDrawable d3_2 = (BitmapDrawable)mThreeCarShadow.getBackground() ;  
134.                 if (d3_2 != null) {  
135.                     d3_2.getBitmap().recycle() ;  
136.                 }  
137.                 break;  
138.             case VIEW_NO_4:  
139. //              mFourCoin.getBackground().setCallback(null) ;  
140.                 BitmapDrawable d4_1 = (BitmapDrawable)mFourCoinPack.getBackground() ;  
141.                 if (d4_1 != null) {  
142.                     d4_1.getBitmap().recycle() ;  
143.                 }  
144.                 BitmapDrawable d4_2 = (BitmapDrawable)mFourPig.getBackground() ;  
145.                 if (d4_2 != null) {  
146.                     d4_2.getBitmap().recycle() ;  
147.                 }  
148.                 BitmapDrawable d4_3 = (BitmapDrawable)mFourPigShadow.getBackground() ;  
149.                 if (d4_3 != null) {  
150.                     d4_3.getBitmap().recycle() ;  
151.                 }  
152.                 break;  
153.             case VIEW_NO_5:  
154.                 BitmapDrawable d5_1 = (BitmapDrawable)mFiveCar.getBackground() ;  
155.                 if (d5_1 != null) {  
156.                     d5_1.getBitmap().recycle() ;  
157.                 }  
158.                 BitmapDrawable d5_2 = (BitmapDrawable)mFiveCarShadow.getBackground() ;  
159.                 if (d5_2 != null) {  
160.                     d5_2.getBitmap().recycle() ;  
161.                 }  
162.                 break;  
163.             default:  
164.                 break;  
165.             }  
166.             container.removeView(mListViews.get(position));// 删除页卡  
167.         }  
168.   
169.         @SuppressWarnings("deprecation")  
170.         @Override  
171.         public Object instantiateItem(ViewGroup container, int position) { // 这个方法用来实例化页卡  
172.             View view = mListViews.get(position) ;  
173.             container.addView(view, 0);// 添加页卡  
174.             switch (position) {  
175.             case VIEW_NO_1:  
176.                 mOnePointer = (ImageView) view.findViewById(R.id.one_pointer);  
177.                 view.setBackgroundDrawable(  
178.                         ImageCompress  
179.                         .getInstance()  
180.                         .getCompressFromId(context, R.drawable.guide_one_bg, screenW, screenH)) ;  
181.                 break;  
182.             case VIEW_NO_2:  
183.                 mTwoCar = (ImageView) view.findViewById(R.id.two_car);  
184.                 mTwoCar.setBackgroundResource(R.anim.guide_two_car_frame_anim);  
185.                 view.setBackgroundDrawable(  
186.                         ImageCompress  
187.                         .getInstance()  
188.                         .getCompressFromId(context, R.drawable.guide_two_bg, screenW, screenH)) ;  
189.                 break;  
190.             case VIEW_NO_3:  
191.                 mThreeCar = (ImageView) view.findViewById(R.id.three_car);  
192.                 mThreeCarShadow = (ImageView) view.findViewById(R.id.three_car_shadow);  
193.                 mThreeCloudFast = (ImageView) view.findViewById(R.id.three_cloud_fast);  
194.                 mThreeCloudSlow = (ImageView) view.findViewById(R.id.three_cloud_slow);  
195.                 view.setBackgroundDrawable(  
196.                         ImageCompress  
197.                         .getInstance()  
198.                         .getCompressFromId(context, R.drawable.guide_three_bg, screenW, screenH)) ;  
199.                 break;  
200.             case VIEW_NO_4:  
201.                 mFourCoinPack = (ImageView) view.findViewById(R.id.four_pack);  
202.                 mFourCoin = (ImageView) view.findViewById(R.id.four_coin);  
203.                 mFourCoin.setBackgroundResource(R.anim.guide_four_coin_frame_anim);  
204.                 mFourPig = (ImageView) view.findViewById(R.id.four_pig);  
205.                 mFourPigShadow = (ImageView) view.findViewById(R.id.four_pig_shadow);  
206.                 view.setBackgroundDrawable(  
207.                         ImageCompress  
208.                         .getInstance()  
209.                         .getCompressFromId(context, R.drawable.guide_four_bg, screenW, screenH)) ;  
210.                 break;  
211.             case VIEW_NO_5:  
212.                 mFiveCar = (ImageView) view.findViewById(R.id.five_car);  
213.                 mFiveCarShadow = (ImageView) view.findViewById(R.id.five_car_shadow);  
214.                 mFiveCloudFast = (ImageView) view.findViewById(R.id.five_cloud_fast);  
215.                 mFiveCloudSlow = (ImageView) view.findViewById(R.id.five_cloud_slow);  
216.                 view.setOnTouchListener(mOnTouchListener);  
217.                 view.setBackgroundDrawable(  
218.                         ImageCompress  
219.                         .getInstance()  
220.                         .getCompressFromId(context, R.drawable.guide_five_bg, screenW, screenH)) ;  
221.                 break;  
222.             default:  
223.                 break;  
224.             }  
225.               
226.             return mListViews.get(position);  
227.         }  
228.   
229.         @Override  
230.         public int getCount() {  
231.             return mListViews.size();// 返回页卡的数量  
232.         }  
233.   
234.         @Override  
235.         public boolean isViewFromObject(View arg0, Object arg1) {  
236.             return arg0 == arg1;// 官方提示这样写  
237.         }  
238.     }  
239.   
240.     @Override  
241.     public void onPageScrolled(int position, float positionOffset,  
242.             int positionOffsetPixels) {  
243.     }  
244.   
245.     @Override  
246.     public void onPageSelected(int position) {  
247.         animal(position);  
248.     }  
249.   
250.     @Override  
251.     public void onPageScrollStateChanged(int state) {  
252.     }  
253.   
254.     private void animal(int position) {  
255.         try {  
256.             switch (position) {  
257.             case VIEW_NO_1:  
258.                 AccelerateDecelerateInterpolator interpolator = new AccelerateDecelerateInterpolator();  
259.                 Animation animation1_1 = AnimationUtils.loadAnimation(this,  
260.                         R.anim.guide_one_pointer_ratate);  
261.                 animation1_1.setFillAfter(true);  
262.                 animation1_1.setInterpolator(interpolator);  
263.                 mOnePointer.clearAnimation();  
264.                 mOnePointer.startAnimation(animation1_1);  
265.                 break;  
266.             case VIEW_NO_2:  
267.                 AnimationDrawable animation2_1 = (AnimationDrawable) mTwoCar  
268.                         .getBackground();  
269. //              animation2_1.unscheduleSelf(null); // 重新将Frame动画设置到第-1帧，也就是重新开始  
270.                 animation2_1.setVisible(false, true) ;  
271.                 animation2_1.start();  
272.                 break;  
273.             case VIEW_NO_3:  
274.                 LinearInterpolator linearInterpolator = new LinearInterpolator();  
275.                 Animation animation3_1 = new TranslateAnimation(  
276.                         Animation.RELATIVE_TO_SELF, 0,  
277.                         Animation.RELATIVE_TO_PARENT, 1.0f,  
278.                         Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF,  
279.                         0);  
280.                 animation3_1.setDuration(25000);  
281.                 animation3_1.setInterpolator(linearInterpolator);  
282.                 mThreeCloudFast.clearAnimation();  
283.                 mThreeCloudFast.startAnimation(animation3_1);  
284.                 Animation animation3_2 = new TranslateAnimation(  
285.                         Animation.RELATIVE_TO_SELF, 0,  
286.                         Animation.RELATIVE_TO_PARENT, 1.0f,  
287.                         Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF,  
288.                         0);  
289.                 animation3_2.setDuration(35000);  
290.                 animation3_2.setInterpolator(linearInterpolator);  
291.                 mThreeCloudSlow.clearAnimation();  
292.                 mThreeCloudSlow.startAnimation(animation3_2);  
293.                 Animation animation3_3 = new ScaleAnimation(1.0f, 1.0f, 1.0f,  
294.                         1.05f, Animation.RELATIVE_TO_SELF, 0,  
295.                         Animation.RELATIVE_TO_SELF, 1.0f);  
296.                 animation3_3.setRepeatCount(-1);  
297.                 animation3_3.setRepeatMode(Animation.REVERSE);  
298.                 animation3_3.setDuration(500);  
299.                 animation3_3.setInterpolator(linearInterpolator);  
300.                 mThreeCar.clearAnimation();  
301.                 mThreeCar.startAnimation(animation3_3);  
302.                 Animation animation3_4 = new ScaleAnimation(1.0f, 1.05f, 1.0f,  
303.                         1.05f, Animation.RELATIVE_TO_SELF, 0.5f,  
304.                         Animation.RELATIVE_TO_SELF, 0.5f);  
305.                 animation3_4.setRepeatCount(-1);  
306.                 animation3_4.setDuration(500);  
307.                 animation3_4.setRepeatMode(Animation.REVERSE);  
308.                 animation3_4.setInterpolator(linearInterpolator);  
309.                 mThreeCarShadow.clearAnimation();  
310.                 mThreeCarShadow.startAnimation(animation3_4);  
311.                 break;  
312.             case VIEW_NO_4:  
313.                 // 钱桶的动画  
314.                 Animation animation4_1 = new RotateAnimation(0, 5,  
315.                         Animation.RELATIVE_TO_SELF, 0.5f,  
316.                         Animation.RELATIVE_TO_PARENT, 0.5f);  
317.                 animation4_1.setRepeatCount(-1);  
318.                 animation4_1.setDuration(300);  
319.                 mFourCoinPack.clearAnimation();  
320.                 mFourCoinPack.startAnimation(animation4_1);  
321.                 // 硬币掉落的动画  
322.                 AnimationDrawable animation4_2 = (AnimationDrawable) mFourCoin  
323.                         .getBackground();  
324.                 animation4_2.start();  
325.                 // 小猪的动画  
326.                 Animation animation4_3 = new ScaleAnimation(1.0f, 1.0f, 1.0f,  
327.                         1.05f, Animation.RELATIVE_TO_SELF, 0,  
328.                         Animation.RELATIVE_TO_SELF, 1.0f);  
329.                 animation4_3.setRepeatCount(-1);  
330.                 animation4_3.setDuration(500);  
331.                 mFourPig.clearAnimation();  
332.                 mFourPig.startAnimation(animation4_3);  
333.                 // 小猪影子的动画  
334.                 Animation animation4_4 = new ScaleAnimation(1.0f, 1.05f, 1.0f,  
335.                         1.05f, Animation.RELATIVE_TO_SELF, 0.75f,  
336.                         Animation.RELATIVE_TO_SELF, 0.95f);  
337.                 animation4_4.setRepeatCount(-1);  
338.                 animation4_4.setDuration(500);  
339.                 mFourPigShadow.clearAnimation();  
340.                 mFourPigShadow.startAnimation(animation4_4);  
341.                 break;  
342.             case VIEW_NO_5:  
343.                 LinearInterpolator linearInterpolator2 = new LinearInterpolator();  
344.                 Animation animation5_1 = new TranslateAnimation(  
345.                         Animation.RELATIVE_TO_SELF, 0,  
346.                         Animation.RELATIVE_TO_PARENT, 1.0f,  
347.                         Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF,  
348.                         0);  
349.                 animation5_1.setDuration(25000);  
350.                 animation5_1.setInterpolator(linearInterpolator2);  
351.                 mFiveCloudFast.clearAnimation();  
352.                 mFiveCloudFast.startAnimation(animation5_1);  
353.                 Animation animation5_2 = new TranslateAnimation(  
354.                         Animation.RELATIVE_TO_SELF, 0,  
355.                         Animation.RELATIVE_TO_PARENT, 1.0f,  
356.                         Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF,  
357.                         0);  
358.                 animation5_2.setDuration(35000);  
359.                 animation5_2.setInterpolator(linearInterpolator2);  
360.                 mFiveCloudSlow.clearAnimation();  
361.                 mFiveCloudSlow.startAnimation(animation5_2);  
362.                 Animation animation5_3 = new ScaleAnimation(1.0f, 1.0f, 1.0f, 1.1f,  
363.                         Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF,  
364.                         1.0f);  
365.                 animation5_3.setRepeatCount(-1);  
366.                 animation5_3.setDuration(500);  
367.                 animation5_3.setRepeatMode(Animation.REVERSE);  
368.                 mFiveCar.clearAnimation();  
369.                 mFiveCar.startAnimation(animation5_3);  
370.                 Animation animation5_4 = new ScaleAnimation(1.0f, 1.1f, 1.0f, 1.1f,  
371.                         Animation.RELATIVE_TO_SELF, 0.5f,  
372.                         Animation.RELATIVE_TO_SELF, 0.5f);  
373.                 animation5_4.setRepeatCount(-1);  
374.                 animation5_4.setDuration(500);  
375.                 animation5_4.setRepeatMode(Animation.REVERSE);  
376.                 mFiveCarShadow.clearAnimation();  
377.                 mFiveCarShadow.startAnimation(animation5_4);  
378.                 break;  
379.             }  
380.             preIndex = position;  
381.         } catch (Exception e) {  
382.             finish() ;  
383.         }  
384.     }  
385.   
386.     View.OnTouchListener mOnTouchListener = new View.OnTouchListener() {  
387.   
388.         @Override  
389.         public boolean onTouch(View v, MotionEvent event) {  
390.             if (preIndex == 4) {  
391.                 switch (event.getAction()) {  
392.                 case MotionEvent.ACTION_DOWN:  
393.                     x1 = (int) event.getX();  
394.                     Toast.makeText(MainActivity.this, "X1--->" + x1,  
395.                             Toast.LENGTH_SHORT).show();  
396.                     break;  
397.                 case MotionEvent.ACTION_MOVE:  
398.   
399.                     x2 = (int) event.getX();  
400.                     Toast.makeText(MainActivity.this, "X2--->" + x2,  
401.                             Toast.LENGTH_SHORT).show();  
402.                     if ((x2 - x1) < 0) {  
403.                         finish();  
404.                     }  
405.   
406.                     // Toast.makeText(MainActivity.this, "<--->" + (int)  
407.                     // event.getX(), Toast.LENGTH_SHORT).show() ;  
408.                     break;  
409.                 case MotionEvent.ACTION_UP:  
410.                     x2 = (int) event.getX();  
411.                     Toast.makeText(MainActivity.this, "X2--->" + x2,  
412.                             Toast.LENGTH_SHORT).show();  
413.                     if ((x2 - x1) < 0) {  
414.                         finish();  
415.                     }  
416.                     break;  
417.                 default:  
418.                     break;  
419.                 }  
420.             }  
421.             return true;  
422.         }  
423.     };  
424.   
425.     int x1 = 0, x2 = 0;  
426.   
427. }  

第一步：在onCreate函数中初始化每一个子view，然后添加翻页的监听和翻页的动画效果<注意：这是翻页效果，不是子view中的对象的动画效果>

[java]  view plain  copy

 print ?

1. public Context context ;  
2.   
3. public static int screenW, screenH;  
4.   
5. private static final int VIEW_NO_1 = 0;  
6. private static final int VIEW_NO_2 = 1;  
7. private static final int VIEW_NO_3 = 2;  
8. private static final int VIEW_NO_4 = 3;  
9. private static final int VIEW_NO_5 = 4;  
10.   
11. // 第1页的资源,坐标  
12. static ImageView mOnePointer;  
13. // 第2页的资源,坐标  
14. static ImageView mTwoCar;  
15. // 第3页的资源,坐标  
16. static ImageView mThreeCloudFast;  
17. static ImageView mThreeCloudSlow;  
18. static ImageView mThreeCarShadow;  
19. static ImageView mThreeCar;  
20. // 第4页的资源,坐标  
21. static ImageView mFourPig;  
22. static ImageView mFourPigShadow;  
23. static ImageView mFourCoin;  
24. static ImageView mFourCoinPack;  
25. // 第5页的资源,坐标  
26. static ImageView mFiveCar;  
27. static ImageView mFiveCarShadow;  
28. static ImageView mFiveCloudFast;  
29. static ImageView mFiveCloudSlow;  
30.   
31. private int preIndex = 0;  
32. private ViewPager mPager;  
33. private MyViewPagerAdapter mPagerAdapter;  
34. List<View> list = new ArrayList<View>();  
35.   
36. @Override  
37. protected void onCreate(Bundle savedInstanceState) {  
38.     super.onCreate(savedInstanceState);  
39.     setContentView(R.layout.activity_main);  
40.   
41.     context = this ;  
42.     DisplayMetrics metric = new DisplayMetrics();  
43.     getWindowManager().getDefaultDisplay().getMetrics(metric);  
44.     screenW = metric.widthPixels; // 屏幕宽度（像素）  
45.     screenH = metric.heightPixels; // 屏幕高度（像素）  
46.       
47.     LayoutInflater inflater = LayoutInflater.from(this);  
48.       
49.     View view0 = inflater.inflate(R.layout.guide_fragment_main_1, null,  
50.             false);  
51.     mOnePointer = (ImageView) view0.findViewById(R.id.one_pointer);  
52.   
53.     View view1 = inflater.inflate(R.layout.guide_fragment_main_2, null,  
54.             false);  
55.   
56.     View view2 = inflater.inflate(R.layout.guide_fragment_main_3, null,  
57.             false);  
58.   
59.     View view3 = inflater.inflate(R.layout.guide_fragment_main_4, null,  
60.             false);  
61.   
62.     View view4 = inflater.inflate(R.layout.guide_fragment_main_5, null,  
63.             false);  
64.   
65.     list.add(view0);  
66.     list.add(view1);  
67.     list.add(view2);  
68.     list.add(view3);  
69.     list.add(view4);  
70.   
71.     mPager = (ViewPager) findViewById(R.id.container);  
72.     mPagerAdapter = new MyViewPagerAdapter(list);  
73.     mPager.setAdapter(mPagerAdapter);  
74.     mPager.setOnPageChangeListener(this);//设置翻页的监听  
75.     mPager.setPageTransformer(true, new transforms.StackTransformer());//这里设置为堆栈式的翻页效果  
76.   
77.     animal(VIEW_NO_1);//这里是为了第一次进入应用时，作出第一页的动画  
78. }  

第二步：添加翻页监听后，处理翻页的回调函数

[java]  view plain  copy

 print ?

1. @Override  
2. public void onPageScrolled(int position, float positionOffset,  
3.         int positionOffsetPixels) {  
4. }  
5.   
6. @Override  
7. public void onPageSelected(int position) {  
8.     animal(position);//播放第position页的动画  
9. }  

第三步：实现animal函数

[java]  view plain  copy

 print ?

1. private void animal(int position) {  
2.     try {  
3.         switch (position) {  
4.         case VIEW_NO_1:  
5.             AccelerateDecelerateInterpolator interpolator = new AccelerateDecelerateInterpolator();  
6.             Animation animation1_1 = AnimationUtils.loadAnimation(this,  
7.                     R.anim.guide_one_pointer_ratate);  
8.             animation1_1.setFillAfter(true);  
9.             animation1_1.setInterpolator(interpolator);  
10.             mOnePointer.clearAnimation();  
11.             mOnePointer.startAnimation(animation1_1);  
12.             break;  
13.         case VIEW_NO_2:  
14.             AnimationDrawable animation2_1 = (AnimationDrawable) mTwoCar  
15.                     .getBackground();  
16. /               animation2_1.unscheduleSelf(null); // 重新将Frame动画设置到第-1帧，也就是重新开始  
17.             animation2_1.setVisible(false, true) ;  
18.             animation2_1.start();  
19.             break;  
20.         case VIEW_NO_3:  
21.             LinearInterpolator linearInterpolator = new LinearInterpolator();  
22.             Animation animation3_1 = new TranslateAnimation(  
23.                     Animation.RELATIVE_TO_SELF, 0,  
24.                     Animation.RELATIVE_TO_PARENT, 1.0f,  
25.                     Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF,  
26.                     0);  
27.             animation3_1.setDuration(25000);  
28.             animation3_1.setInterpolator(linearInterpolator);  
29.             mThreeCloudFast.clearAnimation();  
30.             mThreeCloudFast.startAnimation(animation3_1);  
31.             Animation animation3_2 = new TranslateAnimation(  
32.                     Animation.RELATIVE_TO_SELF, 0,  
33.                     Animation.RELATIVE_TO_PARENT, 1.0f,  
34.                     Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF,  
35.                     0);  
36.             animation3_2.setDuration(35000);  
37.             animation3_2.setInterpolator(linearInterpolator);  
38.             mThreeCloudSlow.clearAnimation();  
39.             mThreeCloudSlow.startAnimation(animation3_2);  
40.             Animation animation3_3 = new ScaleAnimation(1.0f, 1.0f, 1.0f,  
41.                     1.05f, Animation.RELATIVE_TO_SELF, 0,  
42.                     Animation.RELATIVE_TO_SELF, 1.0f);  
43.             animation3_3.setRepeatCount(-1);  
44.             animation3_3.setRepeatMode(Animation.REVERSE);  
45.             animation3_3.setDuration(500);  
46.             animation3_3.setInterpolator(linearInterpolator);  
47.             mThreeCar.clearAnimation();  
48.             mThreeCar.startAnimation(animation3_3);  
49.             Animation animation3_4 = new ScaleAnimation(1.0f, 1.05f, 1.0f,  
50.                     1.05f, Animation.RELATIVE_TO_SELF, 0.5f,  
51.                     Animation.RELATIVE_TO_SELF, 0.5f);  
52.             animation3_4.setRepeatCount(-1);  
53.             animation3_4.setDuration(500);  
54.             animation3_4.setRepeatMode(Animation.REVERSE);  
55.             animation3_4.setInterpolator(linearInterpolator);  
56.             mThreeCarShadow.clearAnimation();  
57.             mThreeCarShadow.startAnimation(animation3_4);  
58.             break;  
59.         case VIEW_NO_4:  
60.             // 钱桶的动画  
61.             Animation animation4_1 = new RotateAnimation(0, 5,  
62.                     Animation.RELATIVE_TO_SELF, 0.5f,  
63.                     Animation.RELATIVE_TO_PARENT, 0.5f);  
64.             animation4_1.setRepeatCount(-1);  
65.             animation4_1.setDuration(300);  
66.             mFourCoinPack.clearAnimation();  
67.             mFourCoinPack.startAnimation(animation4_1);  
68.             // 硬币掉落的动画  
69.             AnimationDrawable animation4_2 = (AnimationDrawable) mFourCoin  
70.                     .getBackground();  
71.             animation4_2.start();  
72.             // 小猪的动画  
73.             Animation animation4_3 = new ScaleAnimation(1.0f, 1.0f, 1.0f,  
74.                     1.05f, Animation.RELATIVE_TO_SELF, 0,  
75.                     Animation.RELATIVE_TO_SELF, 1.0f);  
76.             animation4_3.setRepeatCount(-1);  
77.             animation4_3.setDuration(500);  
78.             mFourPig.clearAnimation();  
79.             mFourPig.startAnimation(animation4_3);  
80.             // 小猪影子的动画  
81.             Animation animation4_4 = new ScaleAnimation(1.0f, 1.05f, 1.0f,  
82.                     1.05f, Animation.RELATIVE_TO_SELF, 0.75f,  
83.                     Animation.RELATIVE_TO_SELF, 0.95f);  
84.             animation4_4.setRepeatCount(-1);  
85.             animation4_4.setDuration(500);  
86.             mFourPigShadow.clearAnimation();  
87.             mFourPigShadow.startAnimation(animation4_4);  
88.             break;  
89.         case VIEW_NO_5:  
90.             LinearInterpolator linearInterpolator2 = new LinearInterpolator();  
91.             Animation animation5_1 = new TranslateAnimation(  
92.                     Animation.RELATIVE_TO_SELF, 0,  
93.                     Animation.RELATIVE_TO_PARENT, 1.0f,  
94.                     Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF,  
95.                     0);  
96.             animation5_1.setDuration(25000);  
97.             animation5_1.setInterpolator(linearInterpolator2);  
98.             mFiveCloudFast.clearAnimation();  
99.             mFiveCloudFast.startAnimation(animation5_1);  
100.             Animation animation5_2 = new TranslateAnimation(  
101.                     Animation.RELATIVE_TO_SELF, 0,  
102.                     Animation.RELATIVE_TO_PARENT, 1.0f,  
103.                     Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF,  
104.                     0);  
105.             animation5_2.setDuration(35000);  
106.             animation5_2.setInterpolator(linearInterpolator2);  
107.             mFiveCloudSlow.clearAnimation();  
108.             mFiveCloudSlow.startAnimation(animation5_2);  
109.             Animation animation5_3 = new ScaleAnimation(1.0f, 1.0f, 1.0f, 1.1f,  
110.                     Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF,  
111.                     1.0f);  
112.             animation5_3.setRepeatCount(-1);  
113.             animation5_3.setDuration(500);  
114.             animation5_3.setRepeatMode(Animation.REVERSE);  
115.             mFiveCar.clearAnimation();  
116.             mFiveCar.startAnimation(animation5_3);  
117.             Animation animation5_4 = new ScaleAnimation(1.0f, 1.1f, 1.0f, 1.1f,  
118.                     Animation.RELATIVE_TO_SELF, 0.5f,  
119.                     Animation.RELATIVE_TO_SELF, 0.5f);  
120.             animation5_4.setRepeatCount(-1);  
121.             animation5_4.setDuration(500);  
122.             animation5_4.setRepeatMode(Animation.REVERSE);  
123.             mFiveCarShadow.clearAnimation();  
124.             mFiveCarShadow.startAnimation(animation5_4);  
125.             break;  
126.         }  
127.         preIndex = position;  
128.     } catch (Exception e) {  
129.         finish() ;  
130.     }  
131. }  

里面都是对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类，就是不同方法压缩图片

源码下载