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

最新推荐文章于 2022-11-04 10:26:35 发布
最新推荐文章于 2022-11-04 10:26:35 发布
阅读量559 收藏
点赞数
分类专栏： Android开发 文章标签： 动画 ViewPager 引导页
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zchlww/article/details/50723343
版权

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

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

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



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

[java]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  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 ? 在CODE上查看代码片 派生到我的代码片
  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 ? 在CODE上查看代码片 派生到我的代码片
  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 ? 在CODE上查看代码片 派生到我的代码片
  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类，就是不同方法压缩图片

源码下载 

changhaiSmile
关注
专栏目录
Android控件ViewPager实现带有动画的引导页
08-30
Android 控件 ViewPager 实现带有动画的引导页 Android 控件 ViewPager 是一个非常流行的控件，经常被用于实现引导页、图片展示等功能。今天，我们将详细介绍如何使用 ViewPager 实现带有动画的引导页。 知识点一...
app引导页
zyxNobita专栏
08-29 807
先看效果图: 1.显示三个页面的Activity  用view pager去加载三个fragment实现,控制点点点的切换,监听view pager的切换,控制fragment动画的开始跟结束,重写了view pager,实现了背景图片的移动效果. [java] view plaincopy /** 
android进阶篇之引导页系列之viewpager实现Animation动画效果
haidaoduozhu的博客
12-23 588
看到一个demo发现很不错，于是就借来看了下，感觉很不错。
Android引导页动画的基本实现方法—ViewPager
xiangzaixiansheng的博客
01-06 601
首先我们要实现进入应用的引导页，有很多的方法，今天对ViewPager进行学习。    一. ViewPager的介绍       参看官网对ViewPager的介绍，（ViewPager）布局管理器，允许用户通过数据页向左和右翻转.。你生成的视图显示的网页由PagerAdapter去实现。  以下代码是官网上的实例：    android.support.v4.view.Vie
安卓欢迎界面引导页面viewpager相关-仿赶集生活android客户端的介绍动画界面.rar
07-29
本项目“安卓欢迎界面引导页面viewpager相关-仿赶集生活android客户端的介绍动画界面”旨在模拟赶集生活Android客户端的引导页效果，通过ViewPager实现动态过渡的动画效果。下面将详细阐述涉及的知识点。 1. **...
Android UI设计与开发之ViewPager仿微信引导界面以及动画效果
08-29
在`activity_main.xml`布局文件中，我们需要添加一个ViewPager组件，用于显示引导页的各个图片。同时，为了指示当前页面，还需要在底部添加一行小点。这些小点通常是ImageView，通过改变选中状态的图片来表示用户...
Android项目中的欢迎界面和引导页：动画和ViewPager
05-13
在Android应用程序开发中，欢迎界面（Splash Screen）和引导页（Onboarding）是常见的用户体验设计元素，它们在用户首次打开应用或更新应用后提供一种视觉介绍。这些页面通常包含品牌展示、功能介绍以及可能的权限...
Android引导页切换带动画
12-12
android中首次安装应用，实现引导页切换，带有动画效果。
Android 高质量的引导页动画效果 源码
10-15
高质量的客户端引导动画效果，高仿500px客户端欢迎页面。 主要实现，通过ViewPager加载每一个fragment.创建一个引导页adapter即GuideAdapter， 设置viewpager缓存页数,默认的缓存一页,因为引导页共有4页,所以设置缓存3页, 这样所以page在滑动过程中不会重新创建，每一个fragment切换的时候通过HKTransformer动画实现效果。
Android开发 引导页动画UI界面效果（个人整理08）
04-23
Android开发 引导页动画UI界面效果（个人整理08）
Android实现绕球心旋转的引导页效果
09-01
本篇文章主要介绍了Android实现绕球心旋转的引导页效果，想要实现此效果的同学可以参考一下本文。
Android实现过渡动画、引导页 Android判断是否第一次启动App
08-28
主要为大家详细介绍了Android实现过渡动画、引导页，以及Android判断是否第一次启动App，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
『Android基础入门』ViewPager实现引导动画的效果
一个专注于客户端开发的技术er，不定期更新Android，Flutter，HormonyOS等方向的使用心得和感悟
10-03 1094
adapter与viewpager的关系 adapter是将数据渲染到视图的桥梁；1.继承自PagerAdapter抽象类2.重写抽象类中的方法getCount()和isViewFromObject()3.ctrl+o重写 生成:instantiateItem() 销毁:destroyItem()4.用一个imageViewList数组来存储图片数据,并创建构造函数初始化5.getCount()方法返回图片的数量。
【Android studio】ViewPager和动画Animation
最新发布
m0_56047445的博客
11-04 3343
①点击监听事件 ②意图intent ③引导页Viewpager ④动画Animation
android的ViewPager和Animation的一些使用(二)
baidu_nod的专栏
07-15 1632
Animation的部分 android的animation分为scale,rotate,tranlateAnimation,alpha这几种 start animation的方式以下几种: t1_icon1.setImageResource(R.drawable.t1_frame_animation); //t1_frame_animation这个动画是放在drawab
android 动画引导页,Android VideoView实现炫酷引导页
weixin_39968995的博客
05-25 128
先看下效果图：103012hjj7zdfmlczj0blk.gif项目介绍：用VideoView实现英语流利说炫酷引导页刚开始的思路属性动画？(可以实现，但是估计只为这个业务做这么大量的动画会吐血)帧动画？(设计师会吐血)视频播放？(没错，就是它了)为了证实自己的思路，继续抱着崇拜的心态解压了apk，发现果然啊，有个18s的mp4文件，拿到这个后再想实现这个效果就太尼玛容易了。ps:我觉得单独这样...
Android ViewPager 动画引导页实现教程
首先，我们要理解传统的ViewPager实现引导页的基本原理。就像ListView一样，ViewPager需要一个适配器（在这里是PagerAdapter）来填充数据。在本例中，数据通常是多张图片，每张图片代表引导页的一个步骤。让我们分步...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值