加载超炫动画

1、MainActivity

package com.zyhui.zyh_splash;

import android.os.Bundle;
import android.os.Handler;
import android.widget.FrameLayout;
import android.app.Activity;

public class MainActivity extends Activity {

    private FrameLayout mMainView;
    private SplashView sv;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        
        mMainView = new FrameLayout(this);
        
        ContentView mContentView = new ContentView(this);
        mMainView.addView(mContentView);
        
        sv = new SplashView(this);
        mMainView.addView(sv);
        
        setContentView(mMainView);
        
        //模拟后台加载数据
        startLoadData();
    }

    Handler handler = new Handler();
    private void startLoadData() {
        handler.postDelayed(new Runnable(){
            @Override
            public void run() {
                //数据加载
                
                //数据加载完后，加载后面的两个动画
                sv.splashAndDisapper();
            }
            
        }, 20000);
    }


}

2、ContentView

package com.zyhui.zyh_splash;

import android.content.Context;
import android.widget.ImageView;

public class ContentView extends ImageView {

    public ContentView(Context context) {
        super(context);
        setImageResource(R.drawable.spring);
    }

}

3、动画视图类

package com.zyhui.zyh_splash;

import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.animation.ValueAnimator;
import android.animation.ValueAnimator.AnimatorUpdateListener;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Paint.Style;
import android.view.View;
import android.view.animation.LinearInterpolator;
import android.view.animation.OvershootInterpolator;

//=======================================
//1、问题:为什么第三个动画后，可以看到第底层图片?
//  答:它没有调用drawbackground方法
//2、问:动画是如何衔接的?
//  答:动画是通过invalidate()方法进行重绘操作的
//3、关于post方法的参考:
//   答:http://www.cnblogs.com/akira90/archive/2013/03/06/2946740.html
//=======================================
public class SplashView extends View {

    //大圆半径
    private float mRotationRadius = 90;
    //小圆半径
    private float mCircleRadius = 18;
    //小圆圈的颜色列表
    private int[] mCircleColors;
    //大圆和小圆旋转的时间,可以控制旋转速度
    private long mRotationDuration = 3200;//ms
    //第二部分动画执行的总时间(各占1/3)
    private long mSplashDuration = 3200; //ms
    //整体的背景颜色
    private int mSplashBgColor = Color.WHITE;
    
    //空心圆初始半径
    private float mHoleRadius = 0F;
    //当前大圆旋转的角度
    private float mCurrentRotationAngle = 0F;
    //当前大圆半径
    private float mCurrentRotationRadius = mRotationRadius;
    
    //绘制圆的画笔
    private Paint mPaint = new Paint();
    //绘制背景画笔
    private Paint mPaintBackground = new Paint();
    
    //屏幕正中心坐标
    private float mCenterX;
    private float mCenterY;
    //屏幕对角线一半
    private float mDiagonalDist;
    
    //保存当前动画状态
    private SplashState mState = null;
    private abstract class SplashState{
        public abstract void drawState(Canvas canvas);
    }
    
    public SplashView(Context context) {
        super(context);
        init(context);
    }
    
    private void init(Context context) {
        mCircleColors = context.getResources().getIntArray(R.array.splash_circle_colors);
        
        //设置画笔
        mPaint.setAntiAlias(true);//设置取消锯齿
        mPaintBackground.setAntiAlias(true);
        //设置边框样式
        mPaintBackground.setStyle(Style.STROKE);
        mPaintBackground.setColor(mSplashBgColor);
    }
    
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        // TODO Auto-generated method stub
        super.onSizeChanged(w, h, oldw, oldh);
        mCenterX = w/2f;
        mCenterY = h/2f;
        mDiagonalDist = (float) (Math.sqrt(w*w+h*h)/2);
    }
    @Override
    protected void onDraw(Canvas canvas) {
        if(mState == null){
            mState = new RotationState();
        }
        mState.drawState(canvas);
        super.onDraw(canvas);
    }

    //数据加载完之后，加载后面的两个动画
    public void splashAndDisapper(){
        if(mState != null && mState instanceof RotationState){
            RotationState rs = (RotationState) mState;
            rs.cancel();//取消第一个动画
            post(new Runnable(){
                @Override
                public void run() {
                    mState = new MergingState();
                }
                
            });
        }
    }
    
    //旋转类
    private class RotationState extends SplashState{
        private ValueAnimator mAnimator;
        public RotationState(){
            //小圆半径,需要大圆半径和它旋转的角度
            //估值器--它使用的是弧度0~2PI
            mAnimator = ValueAnimator.ofFloat(0, (float)Math.PI*2);
            //线性插值器，会平滑地计算；这样在每完成一个周期时，它不会卡顿
            mAnimator.setInterpolator(new LinearInterpolator());
            mAnimator.setDuration(mRotationDuration);//设置旋转时间
            mAnimator.addUpdateListener(new AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    //这个mCurrentRotationAngle这个值的变化，就是造成小圆旋转的原因;若
                    //这个值不变了，则小圆们就不会旋转
                    mCurrentRotationAngle = (Float)animation.getAnimatedValue();
                    //提醒view重绘
                    invalidate();
                }
            });
            
            //设置旋转次数--无穷次数;因为它不知道什么时候进入下一个动画，所以把它设置为重复次数为无穷
            mAnimator.setRepeatCount(ValueAnimator.INFINITE);
            mAnimator.start();
        }
        
        @Override
        public void drawState(Canvas canvas) {
            //实现动画的绘制
            //1、清空背景
            drawBackground(canvas);
            //绘制小圆
            drawCircle(canvas);
        }
        
        //取消该动画
        public void cancel(){
            mAnimator.cancel();
        }
        
    }
    
    //聚合动画
    private class MergingState extends SplashState{
        private ValueAnimator mAnimator;
        public MergingState(){
            //小圆半径,需要大圆半径和它旋转的角度
            //估值器
            mAnimator = ValueAnimator.ofFloat(0,mRotationRadius);
            //插值器-弹射效果的
            mAnimator.setInterpolator(new OvershootInterpolator(6f));
            mAnimator.setDuration(mSplashDuration/3);//设置动画时间
            mAnimator.addUpdateListener(new AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    mCurrentRotationRadius = (Float)animation.getAnimatedValue();
                    //提醒view重绘
                    invalidate();
                }
            });
            
            //监听动画执行完毕状态
            mAnimator.addListener(new AnimatorListenerAdapter() {
                @Override
                public void onAnimationEnd(Animator animation) {
                    super.onAnimationEnd(animation);
                    //进入下一个动画
                    mState = new ExpandingState();
                }
            });
            //动画反转过来
            mAnimator.reverse();
        }
        
        @Override
        public void drawState(Canvas canvas) {
            //实现动画的绘制
            //1、清空背景
            drawBackground(canvas);
            //绘制小圆
            drawCircle(canvas);
        }
        
    }
    
    //扩散动画
    private class ExpandingState extends SplashState{
        private ValueAnimator mAnimator;
        public ExpandingState(){
            //估值器 --空心圆的半径:0到对角线的一半
            mAnimator = ValueAnimator.ofFloat(0,mDiagonalDist);
            //插值器-弹射效果的
            //mAnimator.setInterpolator(new OvershootInterpolator(6f));
            mAnimator.setDuration(mSplashDuration/3);//设置动画时间
            mAnimator.addUpdateListener(new AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    //空心圆半径
                    mHoleRadius = (Float)animation.getAnimatedValue();
                    //提醒view重绘
                    invalidate();
                }
            });
            
            
            mAnimator.start();
        }
        
        @Override
        public void drawState(Canvas canvas) {
            //1、清空背景
            //drawBackground(canvas);
            //绘制空心圆效果
            if(mHoleRadius > 0f){
                //画笔的宽度:对角线的一半 - 空心圆半径
                float storkeWidth = mDiagonalDist - mHoleRadius;
                mPaintBackground.setStrokeWidth(storkeWidth);
                
                float circleRadius = mHoleRadius + mDiagonalDist / 2f;
                canvas.drawCircle(mCenterX, mCenterY, circleRadius, mPaintBackground);
            }
        }
        
    }

    //清空画布
    public void drawBackground(Canvas canvas) {
        canvas.drawColor(mSplashBgColor);
    }

    //画多个小圆
    public void drawCircle(Canvas canvas) {
        //每个小圆的间隔角度
        float rotationAngle = (float) (Math.PI*2/mCircleColors.length);
        
        for(int i=0; i<mCircleColors.length; i++){
            double angle = mCurrentRotationAngle + i * rotationAngle;
            float cx = (float) (mCenterX + mCurrentRotationRadius * Math.cos(angle));
            float cy = (float) (mCenterY + mCurrentRotationRadius * Math.sin(angle));
            mPaint.setColor(mCircleColors[i]);
            canvas.drawCircle(cx, cy, mCircleRadius, mPaint);
        }
    }

}

4、颜色值，使用xml进行配置

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="splash_bg">#F8F6EC</color>
    <color name="orange">#FF9600</color>
    <color name="aqua">#02D1AC</color>
    <color name="yellow">#FFD200</color>
    <color name="blue">#00C6FF</color>
    <color name="green">#00E099</color>
    <color name="pink">#FF3892</color>
    
    <array name="splash_circle_colors">
        <item>@color/blue</item>
        <item>@color/green</item>
        <item>@color/pink</item>
        <item>@color/orange</item>
        <item>@color/aqua</item>
        <item>@color/yellow</item>
    </array>
</resources>

 

 

注：onSizeChanged在什么时候执行呢?可看http://blog.csdn.net/jason0539/article/details/9896743