Android封装带动画效果的引导页面Demo

分享一个Android APP的引导页的Demo、一共有3个Fragment页面组合而来的、同时提供了滑动功能、分别都对应有不同的动画、一共有3个动画、话不多说、可直接看Demo效果图、相信你一定会下载使用的

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

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);
    }
}

第一个界面动画

@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) {}
    });
}

android引导页动画效果源代码下载链接: android引导页面动画 密码: 8mxq

另外BarCode也是有Java和Php相关的Api的、本文只分享一Jquery的Api、如果有另外的需求大家可以访问JQuery BarCode官网