Android教程網
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> Android開發 >> 關於android開發 >> app引導頁(背景圖片切換加各個頁面動畫效果),

app引導頁(背景圖片切換加各個頁面動畫效果),

編輯:關於android開發

app引導頁(背景圖片切換加各個頁面動畫效果),


前言:不知不覺中又加班到了10點半,整個啟動頁面做了一天多的時間,一共有三個頁面,每個頁面都有動畫效果,動畫效果調試起來麻煩,既要跟ios統一,又要匹配各種不同的手機,然後產品經理還有可能在中途改需求,程序員各種苦逼有木有,在這個過程中也學到了蠻多東西的,所以寫一篇博客跟大家分享一下.

 

先看效果圖:

 

 

1.顯示三個頁面的Activity  用view pager去加載三個fragment實現,控制點點點的切換,監聽view pager的切換,控制fragment動畫的開始跟結束,重寫了view pager,實現了背景圖片的移動效果.

 

[java] view plaincopy  
  1. /** 
  2.  * 主Activity 
  3.  * @author ansen 
  4.  * @create time 2015-08-07 
  5.  */  
  6. public class KaKaLauncherActivity extends FragmentActivity {  
  7.     private GuideViewPager vPager;  
  8.     private List<LauncherBaseFragment> list = new ArrayList<LauncherBaseFragment>();  
  9.     private BaseFragmentAdapter adapter;  
  10.   
  11.     private ImageView[] tips;  
  12.     private int currentSelect;   
  13.       
  14.     @Override  
  15.     protected void onCreate(Bundle savedInstanceState) {  
  16.         super.onCreate(savedInstanceState);  
  17.         setContentView(R.layout.activity_luancher_main);  
  18.           
  19.         //初始化點點點控件  
  20.         ViewGroup group = (ViewGroup)findViewById(R.id.viewGroup);  
  21.         tips = new ImageView[3];  
  22.         for (int i = 0; i < tips.length; i++) {  
  23.             ImageView imageView = new ImageView(this);  
  24.             imageView.setLayoutParams(new LayoutParams(10, 10));  
  25.             if (i == 0) {  
  26.                 imageView.setBackgroundResource(R.drawable.page_indicator_focused);  
  27.             } else {  
  28.                 imageView.setBackgroundResource(R.drawable.page_indicator_unfocused);  
  29.             }  
  30.             tips[i]=imageView;  
  31.   
  32.             LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(new ViewGroup.LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT));  
  33.             layoutParams.leftMargin = 20;//設置點點點view的左邊距  
  34.             layoutParams.rightMargin = 20;//設置點點點view的右邊距  
  35.             group.addView(imageView,layoutParams);  
  36.         }  
  37.           
  38.         //獲取自定義viewpager 然後設置背景圖片  
  39.         vPager = (GuideViewPager) findViewById(R.id.viewpager_launcher);  
  40.         vPager.setBackGroud(BitmapFactory.decodeResource(getResources(),R.drawable.bg_kaka_launcher));  
  41.   
  42.         /** 
  43.          * 初始化三個fragment  並且添加到list中 
  44.          */  
  45.         RewardLauncherFragment rewardFragment = new RewardLauncherFragment();  
  46.         PrivateMessageLauncherFragment privateFragment = new PrivateMessageLauncherFragment();  
  47.         StereoscopicLauncherFragment stereoscopicFragment = new StereoscopicLauncherFragment();  
  48.         list.add(rewardFragment);  
  49.         list.add(privateFragment);  
  50.         list.add(stereoscopicFragment);  
  51.   
  52.         adapter = new BaseFragmentAdapter(getSupportFragmentManager(),list);  
  53.         vPager.setAdapter(adapter);  
  54.         vPager.setOffscreenPageLimit(2);  
  55.         vPager.setCurrentItem(0);  
  56.         vPager.setOnPageChangeListener(changeListener);  
  57.     }  
  58.       
  59.     /** 
  60.      * 監聽viewpager的移動 
  61.      */  
  62.     OnPageChangeListener changeListener=new OnPageChangeListener() {  
  63.         @Override  
  64.         public void onPageSelected(int index) {  
  65.             setImageBackground(index);//改變點點點的切換效果  
  66.             LauncherBaseFragment fragment=list.get(index);  
  67.               
  68.             list.get(currentSelect).stopAnimation();//停止前一個頁面的動畫  
  69.             fragment.startAnimation();//開啟當前頁面的動畫  
  70.               
  71.             currentSelect=index;  
  72.         }  
  73.           
  74.         @Override  
  75.         public void onPageScrolled(int arg0, float arg1, int arg2) {}  
  76.         @Override  
  77.         public void onPageScrollStateChanged(int arg0) {}  
  78.     };  
  79.       
  80.     /** 
  81.      * 改變點點點的切換效果 
  82.      * @param selectItems 
  83.      */  
  84.     private void setImageBackground(int selectItems) {  
  85.         for (int i = 0; i < tips.length; i++) {  
  86.             if (i == selectItems) {  
  87.                 tips[i].setBackgroundResource(R.drawable.page_indicator_focused);  
  88.             } else {  
  89.                 tips[i].setBackgroundResource(R.drawable.page_indicator_unfocused);  
  90.             }  
  91.         }  
  92.     }  
  93. }  


 

2.重寫viewpager   在dispatchDraw方法中控制顯示的背景圖片區域,

 

[java] view plaincopy  
  1. /** 
  2.  * 重寫ViewPager  主要做一個切換背景的功能 
  3.  * @author ansen 
  4.  * @create time 2015-08-07 
  5.  */  
  6. public class GuideViewPager extends ViewPager {  
  7.     private Bitmap bg;  
  8.     private Paint b = new Paint(1);  
  9.       
  10.     public GuideViewPager(Context context) {  
  11.         super(context);  
  12.     }  
  13.   
  14.     public GuideViewPager(Context context, AttributeSet attrs) {  
  15.         super(context, attrs);  
  16.     }  
  17.   
  18.     @Override  
  19.     protected void dispatchDraw(Canvas canvas) {  
  20.         if (this.bg != null) {  
  21.             int width = this.bg.getWidth();  
  22.             int height = this.bg.getHeight();  
  23.             int count = getAdapter().getCount();  
  24.             int x = getScrollX();  
  25.             // 子View中背景圖片需要顯示的寬度,放大背景圖或縮小背景圖。  
  26.             int n = height * getWidth() / getHeight();  
  27.               
  28.             /** 
  29.              * (width - n) / (count - 1)表示除去顯示第一個ViewPager頁面用去的背景寬度,剩余的ViewPager需要顯示的背景圖片的寬度。 
  30.              * getWidth()等於ViewPager一個頁面的寬度,即手機屏幕寬度。在該計算中可以理解為滑動一個ViewPager頁面需要滑動的像素值。 
  31.              * ((width - n) / (count - 1)) /getWidth()也就表示ViewPager滑動一個像素時,背景圖片滑動的寬度。 
  32.              * x * ((width - n) / (count - 1)) /  getWidth()也就表示ViewPager滑動x個像素時,背景圖片滑動的寬度。 
  33.              * 背景圖片滑動的寬度的寬度可以理解為背景圖片滑動到達的位置。 
  34.              */  
  35.             int w = x * ((width - n) / (count - 1)) / getWidth();  
  36.             canvas.drawBitmap(this.bg, new Rect(w, 0, n + w, height), new Rect( x, 0, x + getWidth(), getHeight()), this.b);  
  37.         }  
  38.         super.dispatchDraw(canvas);  
  39.     }  
  40.       
  41.     public void setBackGroud(Bitmap paramBitmap) {  
  42.         this.bg = paramBitmap;  
  43.         this.b.setFilterBitmap(true);  
  44.     }  
  45. }  

 

 


3.主體布局文件  上面放一個自定義的viewpager  下面放一個顯示點點的RelativeLayout

 

[html] view plaincopy  
  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:tools="http://schemas.android.com/tools"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent" >  
  5.   
  6.     <com.example.view.GuideViewPager  
  7.         android:id="@+id/viewpager_launcher"  
  8.         android:layout_width="match_parent"  
  9.         android:layout_height="match_parent" />  
  10.   
  11.     <RelativeLayout  
  12.         android:layout_width="fill_parent"  
  13.         android:layout_height="wrap_content"  
  14.         android:orientation="vertical" >  
  15.   
  16.         <LinearLayout  
  17.             android:id="@+id/viewGroup"  
  18.             android:layout_width="fill_parent"  
  19.             android:layout_height="wrap_content"  
  20.             android:layout_alignParentBottom="true"  
  21.             android:layout_marginBottom="30dp"  
  22.             android:gravity="center_horizontal"  
  23.             android:orientation="horizontal" />  
  24.     </RelativeLayout>  
  25.   
  26. </RelativeLayout>  

 

4.ViewPager適配器

 

[java] view plaincopy  
  1. /** 
  2.  * Viewpager適配器 
  3.  * @author apple 
  4.  * 
  5.  */  
  6. public class BaseFragmentAdapter extends FragmentStatePagerAdapter {  
  7.     private List<LauncherBaseFragment>list;  
  8.     public BaseFragmentAdapter(FragmentManager fm, List<LauncherBaseFragment> list) {  
  9.         super(fm);  
  10.         this.list = list;  
  11.     }  
  12.   
  13.     public BaseFragmentAdapter(FragmentManager fm) {  
  14.         super(fm);  
  15.     }  
  16.   
  17.     @Override  
  18.     public Fragment getItem(int arg0) {  
  19.         return list.get(arg0);  
  20.     }  
  21.   
  22.     @Override  
  23.     public int getCount() {  
  24.         return list.size();  
  25.     }  
  26. }  

 

 

5.Fragment抽象類 有兩個抽象方法,開啟動畫跟停止動畫  所有的Fragment都繼承這個類  Viewpager切換的時候可以更好的控制每個Fragment開啟動畫,結束動畫

 

[java] view plaincopy  
  1. /** 
  2.  * Fragment抽象類 
  3.  * @author ansen 
  4.  *  
  5.  */  
  6. public abstract class LauncherBaseFragment extends Fragment{  
  7.     public abstract void  startAnimation();  
  8.     public abstract void  stopAnimation();  
  9. }  

 

 

6.打賞頁Fragment  三個動畫效果  硬幣向下移動動畫+打賞圖片縮放動畫+改變打賞圖片透明度然後隱藏圖片

 

[java] view plaincopy  
  1. /** 
  2.  * 打賞頁面 
  3.  * @author ansen 
  4.  * @create time 2015-08-07 
  5.  */  
  6. public class RewardLauncherFragment extends LauncherBaseFragment{  
  7.     private ImageView ivReward;  
  8.     private ImageView ivGold;  
  9.       
  10.     private Bitmap goldBitmap;  
  11.     private boolean started;//是否開啟動畫(ViewPage滑動時候給這個變量賦值)  
  12.       
  13.     @Override  
  14.     public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {  
  15.         View rooView=inflater.inflate(R.layout.fragment_reward_launcher, null);  
  16.         ivGold=(ImageView) rooView.findViewById(R.id.iv_gold);  
  17.         ivReward=(ImageView) rooView.findViewById(R.id.iv_reward);  
  18.           
  19.         //獲取硬幣的高度  
  20.         goldBitmap=BitmapFactory.decodeResource(getActivity().getResources(),R.drawable.icon_gold);  
  21.         startAnimation();  
  22.         return rooView;  
  23.     }  
  24.       
  25.     public void startAnimation(){  
  26.         started=true;  
  27.           
  28.         //向下移動動畫 硬幣的高度*2+80     
  29.         TranslateAnimation translateAnimation=new TranslateAnimation(0,0,0,goldBitmap.getHeight()*2+80);  
  30.         translateAnimation.setDuration(500);  
  31.         translateAnimation.setFillAfter(true);  
  32.           
  33.         ivGold.startAnimation(translateAnimation);  
  34.         translateAnimation.setAnimationListener(new AnimationListener() {  
  35.             @Override  
  36.             public void onAnimationStart(Animation animation) {}  
  37.             @Override  
  38.             public void onAnimationEnd(Animation animation){  
  39.                 if(started){  
  40.                     ivReward.setVisibility(View.VISIBLE);  
  41.                     //硬幣移動動畫結束開啟縮放動畫  
  42.                     Animation anim=AnimationUtils.loadAnimation(getActivity(),R.anim.reward_launcher);    
  43.                     ivReward.startAnimation(anim);  
  44.                     anim.setAnimationListener(new AnimationListener(){  
  45.                         @Override    
  46.                         public void onAnimationStart(Animation animation) {}    
  47.                         @Override    
  48.                         public void onAnimationRepeat(Animation animation) {}    
  49.                         @Override    
  50.                         public void onAnimationEnd(Animation animation) {  
  51.                                 //縮放動畫結束 開啟改變透明度動畫  
  52.                                 AlphaAnimation alphaAnimation=new AlphaAnimation(1,0);  
  53.                                 alphaAnimation.setDuration(1000);  
  54.                                 ivReward.startAnimation(alphaAnimation);  
  55.                                 alphaAnimation.setAnimationListener(new AnimationListener() {  
  56.                                     @Override  
  57.                                     public void onAnimationStart(Animation animation) {}  
  58.                                     @Override  
  59.                                     public void onAnimationRepeat(Animation animation) {}  
  60.                                     @Override  
  61.                                     public void onAnimationEnd(Animation animation) {  
  62.                                         //透明度動畫結束隱藏圖片  
  63.                                         ivReward.setVisibility(View.GONE);  
  64.                                     }  
  65.                             });  
  66.                         }  
  67.                     });  
  68.                 }  
  69.             }  
  70.             @Override  
  71.             public void onAnimationRepeat(Animation animation) {}  
  72.         });  
  73.     }  
  74.       
  75.     @Override  
  76.     public void stopAnimation(){  
  77.         started=false;//結束動畫時標示符設置為false  
  78.         ivGold.clearAnimation();//清空view上的動畫  
  79.     }  
  80. }  

 

 

7.私信頁面   四個動畫效果   並且四個動畫都相同,其實只要我們實現了一個,其他的基本都很容易了.   依次實現四個圖片的放大然後還原

 

[java] view plaincopy  
  1. /** 
  2.  * 私信 
  3.  * @author ansen 
  4.  */  
  5. public class PrivateMessageLauncherFragment extends LauncherBaseFragment{  
  6.     private ImageView ivLikeVideo,ivThinkReward,ivThisWeek,ivWatchMovie;  
  7.       
  8.     private Animation likeAnimation,thinkAnimation,watchAnimation,thisWeekAnimation;  
  9.       
  10.     private boolean started;//是否開啟動畫  
  11.       
  12.     @Override  
  13.     public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {  
  14.         View rooView=inflater.inflate(R.layout.fragment_private_message_launcher, null);  
  15.           
  16.         ivLikeVideo=(ImageView) rooView.findViewById(R.id.iv_private_message_like_video);  
  17.         ivThinkReward=(ImageView) rooView.findViewById(R.id.iv_private_message_think_reward);  
  18.         ivWatchMovie=(ImageView) rooView.findViewById(R.id.iv_private_message_watch_movie);  
  19.         ivThisWeek=(ImageView) rooView.findViewById(R.id.private_message_this_week);  
  20.         return rooView;  
  21.     }  
  22.       
  23.     public void stopAnimation(){  
  24.         //動畫開啟標示符設置成false     
  25.         started=false;  
  26.         /** 
  27.          * 清空所有控件上的動畫 
  28.          */  
  29.         ivLikeVideo.clearAnimation();  
  30.         ivThinkReward.clearAnimation();  
  31.         ivWatchMovie.clearAnimation();  
  32.         ivThisWeek.clearAnimation();  
  33.     }  
  34.       
  35.       
  36.     public void startAnimation(){  
  37.         started=true;  
  38.           
  39.         /** 
  40.          * 每次開啟動畫前先隱藏控件 
  41.          */  
  42.         ivLikeVideo.setVisibility(View.GONE);  
  43.         ivThinkReward.setVisibility(View.GONE);  
  44.         ivWatchMovie.setVisibility(View.GONE);  
  45.         ivThisWeek.setVisibility(View.GONE);  
  46.           
  47.         new Handler().postDelayed(new Runnable() {//延時0.5秒之後開啟喜歡視頻動畫  
  48.             @Override  
  49.             public void run(){  
  50.                 if(started)  
  51.                     likeVideoAnimation();  
  52.             }  
  53.         },500);  
  54.     }  
  55.       
  56.     /** 
  57.      * 好喜歡你的視頻 
  58.      */  
  59.     private void likeVideoAnimation(){  
  60.         ivLikeVideo.setVisibility(View.VISIBLE);  
  61.           
  62.         likeAnimation = AnimationUtils.loadAnimation(getActivity(),R.anim.private_message_launcher);  
  63.         ivLikeVideo.startAnimation(likeAnimation);//開啟動畫  
  64.         likeAnimation.setAnimationListener(new AnimationListener(){    
  65.             @Override    
  66.             public void onAnimationStart(Animation animation) {}    
  67.             @Override    
  68.             public void onAnimationRepeat(Animation animation) {}    
  69.             @Override    
  70.             public void onAnimationEnd(Animation animation) {//監聽動畫結束  
  71.                     if(started)  
  72.                         thinkReward();  
  73.             }    
  74.         });   
  75.     }  
  76.       
  77.     /** 
  78.      * 謝謝你的打賞 
  79.      */  
  80.     private void thinkReward(){  
  81.         ivThinkReward.setVisibility(View.VISIBLE);  
  82.         thinkAnimation = AnimationUtils.loadAnimation(getActivity(),R.anim.private_message_launcher);  
  83.         ivThinkReward.startAnimation(thinkAnimation);  
  84.         thinkAnimation.setAnimationListener(new AnimationListener(){    
  85.             @Override    
  86.             public void onAnimationStart(Animation animation) {}    
  87.             @Override    
  88.             public void onAnimationRepeat(Animation animation) {}    
  89.             @Override    
  90.             public void onAnimationEnd(Animation animation) {  
  91.                 if(started)  
  92.                     watchMovie();  
  93.             }    
  94.         });   
  95.     }  
  96.       
  97.     /** 
  98.      * 一起看個電影呗 
  99.      */  
  100.     private void watchMovie(){  
  101.         ivWatchMovie.setVisibility(View.VISIBLE);  
  102.         watchAnimation = AnimationUtils.loadAnimation(getActivity(),R.anim.private_message_launcher);  
  103.         ivWatchMovie.startAnimation(watchAnimation);  
  104.         watchAnimation.setAnimationListener(new AnimationListener(){    
  105.             @Override    
  106.             public void onAnimationStart(Animation animation) {}    
  107.             @Override    
  108.             public void onAnimationRepeat(Animation animation) {}    
  109.             @Override    
  110.             public void onAnimationEnd(Animation animation) {  
  111.                 if(started)  
  112.                     thisWeek();  
  113.             }    
  114.         });   
  115.     }  
  116.       
  117.     /** 
  118.      * 好啊  這周末有空 
  119.      */  
  120.     private void thisWeek(){  
  121.         ivThisWeek.setVisibility(View.VISIBLE);  
  122.         thisWeekAnimation = AnimationUtils.loadAnimation(getActivity(),R.anim.private_message_launcher);    
  123.         ivThisWeek.startAnimation(thisWeekAnimation);  
  124.     }  
  125. }  

 

 

8.最後一個引導頁  就兩個動畫  圖片的放大跟縮小,其實用xml布局的話一個動畫就能搞定,跟私信頁面的動畫差不多.小伙伴寫的代碼.這裡換了一種方式.代碼比較多.

 

[java] view plaincopy  
  1. /** 
  2.  * 最後一個 
  3.  * @author apple 
  4.  */  
  5. public class StereoscopicLauncherFragment extends LauncherBaseFragment implements OnClickListener{  
  6.     private static final float ZOOM_MAX = 1.3f;  
  7.     private static final  float ZOOM_MIN = 1.0f;  
  8.       
  9.     private ImageView imgView_immediate_experience;  
  10.       
  11.     @Override  
  12.     public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {  
  13.         View rooView=inflater.inflate(R.layout.fragment_stereoscopic_launcher, null);  
  14.         imgView_immediate_experience=(ImageView) rooView.findViewById(R.id.imgView_immediate_experience);  
  15.         imgView_immediate_experience.setOnClickListener(this);  
  16.         return rooView;  
  17.     }  
  18.       
  19.     public void playHeartbeatAnimation(){  
  20.             /** 
  21.              * 放大動畫 
  22.              */  
  23.         AnimationSet animationSet = new AnimationSet(true);  
  24.         animationSet.addAnimation(new ScaleAnimation(ZOOM_MIN, ZOOM_MAX, ZOOM_MIN, ZOOM_MAX, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,0.5f));  
  25.         animationSet.addAnimation(new AlphaAnimation(1.0f, 0.8f));  
  26.    
  27.         animationSet.setDuration(500);  
  28.         animationSet.setInterpolator(new AccelerateInterpolator());  
  29.         animationSet.setFillAfter(true);  
  30.    
  31.         animationSet.setAnimationListener(new AnimationListener() {  
  32.             @Override  
  33.             public void onAnimationStart(Animation animation) {  
  34.             }  
  35.    
  36.             @Override  
  37.             public void onAnimationRepeat(Animation animation) {  
  38.             }  
  39.    
  40.             @Override  
  41.             public void onAnimationEnd(Animation animation) {  
  42.                     /** 
  43.                      * 縮小動畫 
  44.                      */  
  45.                 AnimationSet animationSet = new AnimationSet(true);  
  46.                 animationSet.addAnimation(new ScaleAnimation(ZOOM_MAX, ZOOM_MIN, ZOOM_MAX,ZOOM_MIN, Animation.RELATIVE_TO_SELF, 0.5f,Animation.RELATIVE_TO_SELF, 0.5f));  
  47.                 animationSet.addAnimation(new AlphaAnimation(0.8f, 1.0f));  
  48.                 animationSet.setDuration(600);  
  49.                 animationSet.setInterpolator(new DecelerateInterpolator());  
  50.                 animationSet.setFillAfter(false);  
  51.                  // 實現心跳的View  
  52.                 imgView_immediate_experience.startAnimation(animationSet);  
  53.             }  
  54.         });  
  55.          // 實現心跳的View  
  56.         imgView_immediate_experience.startAnimation(animationSet);  
  57.     }   
  58.   
  59.     @Override  
  60.     public void onClick(View v) {  
  61. //      Intent intent = new Intent();  
  62. //      intent.setClass(getActivity(),MainActivity.class);  
  63. //      startActivity(intent);  
  64. //      getActivity().finish();  
  65.     }  
  66.   
  67.     @Override  
  68.     public void startAnimation() {  
  69.         playHeartbeatAnimation();  
  70.     }  
  71.   
  72.     @Override  
  73.     public void stopAnimation() {  
  74.           
  75.     }  
  76. }  

 

 

最後總結:以上就是三個引導頁的核心代碼了,還有一些布局文件,動畫效果的布局文件我就不一一貼出來的,大家可以去下載我的源碼,在這個過程中碰到的幾個大的問題說明一下.

1.viewpager切換的時候要結束上個fragment的動畫   我是通過boolean變量去控制的

2.背景圖片移動的效果    之前自己走了很多彎路,後面在網上找了一個demo拿過來用了.因為大家都有開源精神所以這裡省了很多功夫

3.圖片放大縮小以前居然不知道一個xml動畫布局就能搞定.之前一直想辦法用兩個動畫實現

 

看看時間一篇博客寫了一個半小時,都12點了,辦公室一個人敲打著鍵盤,記錄著這兩天做過的東西,才發現這也是一件很惬意的事情。。。。閃人。。。回家.
推薦下自己創建的android QQ群:202928390 歡迎大家的加入.

 

點擊下載源碼

  1. 上一頁:
  2. 下一頁:
熱門文章
閱讀排行版
Copyright © Android教程網 All Rights Reserved