app引导页(背景图片切换加各个页面动画效果)

前言:不知不觉中又加班到了10点半,整个启动页面做了一天多的时间,一共有三个页面,每个页面都有动画效果,动画效果调试起来麻烦,既要跟ios统一,又要匹配各种不同的手机,然后产品经理还有可能在中途改需求,程序员各种苦逼有木有,在这个过程中也学到了蛮多东西的,所以写一篇博客跟大家分享一下.

先看效果图:

1.显示三个页面的Activity  用view pager去加载三个fragment实现,控制点点点的切换,监听view pager的切换,控制fragment动画的开始跟结束,重写了view pager,实现了背景图片的移动效果.

[java] view plaincopy

/** 

 * 主Activity 

 * @author ansen 

 * @create time 2015-08-07 

 */  

public class KaKaLauncherActivity extends FragmentActivity {  

    private GuideViewPager vPager;  

    private List list = new ArrayList();  

    private BaseFragmentAdapter adapter;  

    private ImageView[] tips;  

    private int currentSelect;   

    @Override  

    protected void onCreate(Bundle savedInstanceState) {  

        super.onCreate(savedInstanceState);  

        setContentView(R.layout.activity_luancher_main);  

        //初始化点点点控件  

        ViewGroup group = (ViewGroup)findViewById(R.id.viewGroup);  

        tips = new ImageView[3];  

        for (int i = 0; i < tips.length; i++) {  

            ImageView imageView = new ImageView(this);  

            imageView.setLayoutParams(new LayoutParams(10, 10));  

            if (i == 0) {  

                imageView.setBackgroundResource(R.drawable.page_indicator_focused);  

            } else {  

                imageView.setBackgroundResource(R.drawable.page_indicator_unfocused);  

            }  

            tips[i]=imageView;  

            LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(new ViewGroup.LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT));  

            layoutParams.leftMargin = 20;//设置点点点view的左边距  

            layoutParams.rightMargin = 20;//设置点点点view的右边距  

            group.addView(imageView,layoutParams);  

        }  

        //获取自定义viewpager 然后设置背景图片  

        vPager = (GuideViewPager) findViewById(R.id.viewpager_launcher);  

        vPager.setBackGroud(BitmapFactory.decodeResource(getResources(),R.drawable.bg_kaka_launcher));  

        /** 

         * 初始化三个fragment  并且添加到list中 

         */  

        RewardLauncherFragment rewardFragment = new RewardLauncherFragment();  

        PrivateMessageLauncherFragment privateFragment = new PrivateMessageLauncherFragment();  

        StereoscopicLauncherFragment stereoscopicFragment = new StereoscopicLauncherFragment();  

        list.add(rewardFragment);  

        list.add(privateFragment);  

        list.add(stereoscopicFragment);  

        adapter = new BaseFragmentAdapter(getSupportFragmentManager(),list);  

        vPager.setAdapter(adapter);  

        vPager.setOffscreenPageLimit(2);  

        vPager.setCurrentItem(0);  

        vPager.setOnPageChangeListener(changeListener);  

    }  

    /** 

     * 监听viewpager的移动 

     */  

    OnPageChangeListener changeListener=new OnPageChangeListener() {  

        @Override  

        public void onPageSelected(int index) {  

            setImageBackground(index);//改变点点点的切换效果  

            LauncherBaseFragment fragment=list.get(index);  

            list.get(currentSelect).stopAnimation();//停止前一个页面的动画  

            fragment.startAnimation();//开启当前页面的动画  

            currentSelect=index;  

        }  

        @Override  

        public void onPageScrolled(int arg0, float arg1, int arg2) {}  

        @Override  

        public void onPageScrollStateChanged(int arg0) {}  

    };  

    /** 

     * 改变点点点的切换效果 

     * @param selectItems 

     */  

    private void setImageBackground(int selectItems) {  

        for (int i = 0; i < tips.length; i++) {  

            if (i == selectItems) {  

                tips[i].setBackgroundResource(R.drawable.page_indicator_focused);  

            } else {  

                tips[i].setBackgroundResource(R.drawable.page_indicator_unfocused);  

            }  

        }  

    }  

}

2.重写viewpager   在dispatchDraw方法中控制显示的背景图片区域,

[java] view plaincopy

/** 

 * 重写ViewPager  主要做一个切换背景的功能 

 * @author ansen 

 * @create time 2015-08-07 

 */  

public class GuideViewPager extends ViewPager {  

    private Bitmap bg;  

    private Paint b = new Paint(1);  

    public GuideViewPager(Context context) {  

        super(context);  

    }  

    public GuideViewPager(Context context, AttributeSet attrs) {  

        super(context, attrs);  

    }  

    @Override  

    protected void dispatchDraw(Canvas canvas) {  

        if (this.bg != null) {  

            int width = this.bg.getWidth();  

            int height = this.bg.getHeight();  

            int count = getAdapter().getCount();  

            int x = getScrollX();  

            // 子View中背景图片需要显示的宽度，放大背景图或缩小背景图。  

            int n = height * getWidth() / getHeight();  

            /** 

             * (width - n) / (count - 1)表示除去显示第一个ViewPager页面用去的背景宽度，剩余的ViewPager需要显示的背景图片的宽度。 

             * getWidth()等于ViewPager一个页面的宽度，即手机屏幕宽度。在该计算中可以理解为滑动一个ViewPager页面需要滑动的像素值。 

             * ((width - n) / (count - 1)) /getWidth()也就表示ViewPager滑动一个像素时，背景图片滑动的宽度。 

             * x * ((width - n) / (count - 1)) /  getWidth()也就表示ViewPager滑动x个像素时，背景图片滑动的宽度。 

             * 背景图片滑动的宽度的宽度可以理解为背景图片滑动到达的位置。 

             */  

            int w = x * ((width - n) / (count - 1)) / getWidth();  

            canvas.drawBitmap(this.bg, new Rect(w, 0, n + w, height), new Rect( x, 0, x + getWidth(), getHeight()), this.b);  

        }  

        super.dispatchDraw(canvas);  

    }  

    public void setBackGroud(Bitmap paramBitmap) {  

        this.bg = paramBitmap;  

        this.b.setFilterBitmap(true);  

    }  

}

3.主体布局文件  上面放一个自定义的viewpager  下面放一个显示点点的RelativeLayout

[html] view plaincopy

    xmlns:tools="http://schemas.android.com/tools"  

    android:layout_width="match_parent"  

    android:layout_height="match_parent" >  

        android:id="@+id/viewpager_launcher"  

        android:layout_width="match_parent"  

        android:layout_height="match_parent" />  

        android:layout_width="fill_parent"  

        android:layout_height="wrap_content"  

        android:orientation="vertical" >  

            android:id="@+id/viewGroup"  

            android:layout_width="fill_parent"  

            android:layout_height="wrap_content"  

            android:layout_alignParentBottom="true"  

            android:layout_marginBottom="30dp"  

            android:gravity="center_horizontal"  

            android:orientation="horizontal" />  

    xmlns:tools="http://schemas.android.com/tools"  

    android:layout_width="match_parent"  

    android:layout_height="match_parent" >  

        android:id="@+id/viewpager_launcher"  

        android:layout_width="match_parent"  

        android:layout_height="match_parent" />  

        android:layout_width="fill_parent"  

        android:layout_height="wrap_content"  

        android:orientation="vertical" >  

            android:id="@+id/viewGroup"  

            android:layout_width="fill_parent"  

            android:layout_height="wrap_content"  

            android:layout_alignParentBottom="true"  

            android:layout_marginBottom="30dp"  

            android:gravity="center_horizontal"  

            android:orientation="horizontal" />  

        android:id="@+id/viewpager_launcher"  

        android:layout_width="match_parent"  

        android:layout_height="match_parent" />  

        android:layout_width="fill_parent"  

        android:layout_height="wrap_content"  

        android:orientation="vertical" >  

            android:id="@+id/viewGroup"  

            android:layout_width="fill_parent"  

            android:layout_height="wrap_content"  

            android:layout_alignParentBottom="true"  

            android:layout_marginBottom="30dp"  

            android:gravity="center_horizontal"  

            android:orientation="horizontal" />  

        android:layout_width="fill_parent"  

        android:layout_height="wrap_content"  

        android:orientation="vertical" >  

            android:id="@+id/viewGroup"  

            android:layout_width="fill_parent"  

            android:layout_height="wrap_content"  

            android:layout_alignParentBottom="true"  

            android:layout_marginBottom="30dp"  

            android:gravity="center_horizontal"  

            android:orientation="horizontal" />  

            android:id="@+id/viewGroup"  

            android:layout_width="fill_parent"  

            android:layout_height="wrap_content"  

            android:layout_alignParentBottom="true"  

            android:layout_marginBottom="30dp"  

            android:gravity="center_horizontal"  

            android:orientation="horizontal" />  

4.ViewPager适配器

[java] view plaincopy

/** 

 * Viewpager适配器 

 * @author apple 

 * 

 */  

public class BaseFragmentAdapter extends FragmentStatePagerAdapter {  

    private Listlist;  

    public BaseFragmentAdapter(FragmentManager fm, List list) {  

        super(fm);  

        this.list = list;  

    }  

    public BaseFragmentAdapter(FragmentManager fm) {  

        super(fm);  

    }  

    @Override  

    public Fragment getItem(int arg0) {  

        return list.get(arg0);  

    }  

    @Override  

    public int getCount() {  

        return list.size();  

  &nbsnbsp; }  

}

5.Fragment抽象类 有两个抽象方法,开启动画跟停止动画  所有的Fragment都继承这个类  Viewpager切换的时候可以更好的控制每个Fragment开启动画,结束动画

[java] view plaincopy

/** 

 * Fragment抽象类 

 * @author ansen 

 *  

 */  

public abstract class LauncherBaseFragment extends Fragment{  

    public abstract void  startAnimation();  

    public abstract void  stopAnimation();  

}

6.打赏页Fragment  三个动画效果  硬币向下移动动画+打赏图片缩放动画+改变打赏图片透明度然后隐藏图片

[java] view plaincopy

/** 

 * 打赏页面 

 * @author ansen 

 * @create time 2015-08-07 

 */  

public class RewardLauncherFragment extends LauncherBaseFragment{  

    private ImageView ivReward;  

    private ImageView ivGold;  

    private Bitmap goldBitmap;  

    private boolean started;//是否开启动画(ViewPage滑动时候给这个变量赋值)  

    @Override  

    public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {  

        View rooView=inflater.inflate(R.layout.fragment_reward_launcher, null);  

        ivGold=(ImageView) rooView.findViewById(R.id.iv_gold);  

        ivReward=(ImageView) rooView.findViewById(R.id.iv_reward);  

        //获取硬币的高度  

        goldBitmap=BitmapFactory.decodeResource(getActivity().getResources(),R.drawable.icon_gold);  

        startAnimation();  

        return rooView;  

    }  

    public void startAnimation(){  

        started=true;  

        //向下移动动画 硬币的高度*2+80     

        TranslateAnimation translateAnimation=new TranslateAnimation(0,0,0,goldBitmap.getHeight()*2+80);  

        translateAnimation.setDuration(500);  

        translateAnimation.setFillAfter(true);  

        ivGold.startAnimation(translateAnimation);  

        translateAnimation.setAnimationListener(new AnimationListener() {  

            @Override  

            public void onAnimationStart(Animation animation) {}  

            @Override  

            public void onAnimationEnd(Animation animation){  

                if(started){  

                    ivReward.setVisibility(View.VISIBLE);  

                    //硬币移动动画结束开启缩放动画  

                    Animation anim=AnimationUtils.loadAnimation(getActivity(),R.anim.reward_launcher);    

                    ivReward.startAnimation(anim);  

                    anim.setAnimationListener(new AnimationListener(){  

                        @Override    

                        public void onAnimationStart(Animation animation) {}    

                        @Override    

                        public void onAnimationRepeat(Animation animation) {}    

                        @Override    

                        public void onAnimationEnd(Animation animation) {  

                                //缩放动画结束 开启改变透明度动画  

                                AlphaAnimation alphaAnimation=new AlphaAnimation(1,0);  

                                alphaAnimation.setDuration(1000);  

                                ivReward.startAnimation(alphaAnimation);  

                                alphaAnimation.setAnimationListener(new AnimationListener() {  

                                    @Override  

                                    public void onAnimationStart(Animation animation) {}  

                                    @Override  

                                    public void onAnimationRepeat(Animation animation) {}  

                                    @Override  

                                    public void onAnimationEnd(Animation animation) {  

                                        //透明度动画结束隐藏图片  

                                        ivReward.setVisibility(View.GONE);  

                                    }  

                            });  

                        }  

                    });  

                }  

            }  

            @Override  

            public void onAnimationRepeat(Animation animation) {}  

        });  

    }  

    @Override  

    public void stopAnimation(){  

        started=false;//结束动画时标示符设置为false  

        ivGold.clearAnimation();//清空view上的动画  

    }  

}

7.私信页面   四个动画效果   并且四个动画都相同,其实只要我们实现了一个,其他的基本都很容易了.   依次实现四个图片的放大然后还原

[java] view plaincopy

/** 

 * 私信 

 * @author ansen 

 */  

public class PrivateMessageLauncherFragment extends LauncherBaseFragment{  

    private ImageView ivLikeVideo,ivThinkReward,ivThisWeek,ivWatchMovie;  

    private Animation likeAnimation,thinkAnimation,watchAnimation,thisWeekAnimation;  

    private boolean started;//是否开启动画  

    @Override  

    public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {  

        View rooView=inflater.inflate(R.layout.fragment_private_message_launcher, null);  

        ivLikeVideo=(ImageView) rooView.findViewById(R.id.iv_private_message_like_video);  

        ivThinkReward=(ImageView) rooView.findViewById(R.id.iv_private_message_think_reward);  

        ivWatchMovie=(ImageView) rooView.findViewById(R.id.iv_private_message_watch_movie);  

        ivThisWeek=(ImageView) rooView.findViewById(R.id.private_message_this_week);  

        return rooView;  

    }  

    public void stopAnimation(){  

        //动画开启标示符设置成false     

        started=false;  

        /** 

         * 清空所有控件上的动画 

         */  

        ivLikeVideo.clearAnimation();  

        ivThinkReward.clearAnimation();  

        ivWatchMovie.clearAnimation();  

        ivThisWeek.clearAnimation();  

    }  

    public void startAnimation(){  

        started=true;  

        /** 

         * 每次开启动画前先隐藏控件 

         */  

        ivLikeVideo.setVisibility(View.GONE);  

        ivThinkReward.setVisibility(View.GONE);  

        ivWatchMovie.setVisibility(View.GONE);  

        ivThisWeek.setVisibility(View.GONE);  

        new Handler().postDelayed(new Runnable() {//延时0.5秒之后开启喜欢视频动画  

            @Override  

            public void run(){  

                if(started)  

                    likeVideoAnimation();  

            }  

        },500);  

    }  

    /** 

     * 好喜欢你的视频 

     */  

    private void likeVideoAnimation(){  

        ivLikeVideo.setVisibility(View.VISIBLE);  

        likeAnimation = AnimationUtils.loadAnimation(getActivity(),R.anim.private_message_launcher);  

        ivLikeVideo.startAnimation(likeAnimation);//开启动画  

        likeAnimation.setAnimationListener(new AnimationListener(){    

            @Override    

            public void onAnimationStart(Animation animation) {}    

            @Override    

            public void onAnimationRepeat(Animation animation) {}    

            @Override    

            public void onAnimationEnd(Animation animation) {//监听动画结束  

                    if(started)  

                        thinkReward();  

            }    

        });   

    }  

    /** 

     * 谢谢你的打赏 

     */  

    private void thinkReward(){  

        ivThinkReward.setVisibility(View.VISIBLE);  

        thinkAnimation = AnimationUtils.loadAnimation(getActivity(),R.anim.private_message_launcher);  

        ivThinkReward.startAnimation(thinkAnimation);  

        thinkAnimation.setAnimationListener(new AnimationListener(){    

            @Override    

            public void onAnimationStart(Animation animation) {}    

            @Override    

            public void onAnimationRepeat(Animation animation) {}    

            @Override    

            public void onAnimationEnd(Animation animation) {  

                if(started)  

                    watchMovie();  

            }    

        });   

    }  

    /** 

     * 一起看个电影呗 

     */  

    private void watchMovie(){  

        ivWatchMovie.setVisibility(View.VISIBLE);  

        watchAnimation = AnimationUtils.loadAnimation(getActivity(),R.anim.private_message_launcher);  

        ivWatchMovie.startAnimation(watchAnimation);  

        watchAnimation.setAnimationListener(new AnimationListener(){    

            @Override    

            public void onAnimationStart(Animation animation) {}    

            @Override    

            public void onAnimationRepeat(Animation animation) {}    

            @Override    

            public void onAnimationEnd(Animation animation) {  

                if(started)  

                    thisWeek();  

            }    

        });   

    }  

    /** 

     * 好啊 nbsp; 这周末有空 

     */  

    private void thisWeek(){  

        ivThisWeek.setVisibility(View.VISIBLE);  

        thisWeekAnimation = AnimationUtils.loadAnimation(getActivity(),R.anim.private_message_launcher);    

        ivThisWeek.startAnimation(thisWeekAnimation);  

    }  

}

8.最后一个引导页  就两个动画  图片的放大跟缩小,其实用xml布局的话一个动画就能搞定,跟私信页面的动画差不多.小伙伴写的代码.这里换了一种方式.代码比较多.

[java] view plaincopy

/** 

 * 最后一个 

 * @author apple 

 */  

public class StereoscopicLauncherFragment extends LauncherBaseFragment implements OnClickListener{  

    private static final float ZOOM_MAX = 1.3f;  

    private static final  float ZOOM_MIN = 1.0f;  

    private ImageView imgView_immediate_experience;  

    @Override  

    public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {  

        View rooView=inflater.inflate(R.layout.fragment_stereoscopic_launcher, null);  

        imgView_immediate_experience=(ImageView) rooView.findViewById(R.id.imgView_immediate_experience);  

        imgView_immediate_experience.setOnClickListener(this);  

        return rooView;  

    }  

    public void playHeartbeatAnimation(){  

            /** 

             * 放大动画 

             */  

        AnimationSet animationSet = new AnimationSet(true);  

        animationSet.addAnimation(new ScaleAnimation(ZOOM_MIN, ZOOM_MAX, ZOOM_MIN, ZOOM_MAX, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,0.5f));  

        animationSet.addAnimation(new AlphaAnimation(1.0f, 0.8f));  

        animationSet.setDuration(500);  

        animationSet.setInterpolator(new AccelerateInterpolator());  

        animationSet.setFillAfter(true);  

        animationSet.setAnimationListener(new AnimationListener() {  

            @Override  

            public void onAnimationStart(Animation animation) {  

            }  

            @Override  

            public void onAnimationRepeat(Animation animation) {  

            }  

            @Override  

            public void onAnimationEnd(Animation animation) {  

                    /** 

                     * 缩小动画 

                     */  

                AnimationSet animationSet = new AnimationSet(true);  

                animationSet.addAnimation(new ScaleAnimation(ZOOM_MAX, ZOOM_MIN, ZOOM_MAX,ZOOM_MIN, Animation.RELATIVE_TO_SELF, 0.5f,Animation.RELATIVE_TO_SELF, 0.5f));  

                animationSet.addAnimation(new AlphaAnimation(0.8f, 1.0f));  

                animationSet.setDuration(600);  

                animationSet.setInterpolator(new DecelerateInterpolator());  

                animationSet.setFillAfter(false);  

                 // 实现心跳的View  

                imgView_immediate_experience.startAnimation(animationSet);  

            }  

        });  

         // 实现心跳的View  

        imgView_immediate_experience.startAnimation(animationSet);  

    }   

    @Override  

    public void onClick(View v) {  

//      Intent intent = new Intent();  

//      intent.setClass(getActivity(),MainActivity.class);  

//      startActivity(intent);  

//      getActivity().finish();  

    }  

    @Override  

    public void startAnimation() {  

        playHeartbeatAnimation();  

    }  

    @Override  

    public void stopAnimation() {  

    }  

}

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。