自定义雅虎新闻闪屏加载动画
activity的绘制
闪屏的原理是画两层view，一层就是动画结束需要呈现的底层，我们这里定义为ContentView，另外一层就是我们的动画SplashView，动画都在这层上绘制，
在activity这里我们先画contentView，再画SplashView，这样SplashView就在contentView的上层，清除SplashView就可以显示contentView
public class SplanshActivity extends Activity {//AppCompat
private FrameLayout fragment;
private SplashView splashView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_splansh);
fragment = new FrameLayout(this);
ContentView contentView = new ContentView(this);
fragment.addView(contentView);
splashView = new SplashView(this);
fragment.addView(splashView);
setContentView(fragment);
//开始加载数据
startSplanshDataLoad();
}
Handler handler = new Handler();
private void startSplanshDataLoad() {
handler.postDelayed(new Runnable() {
@Override
public void run() {
//数据加载完毕--进入主界面--开启后面两个动画
splashView.SplashDisappear();
}
}, 2000);
}
}
contentView
contentView没有什么特别之处，我们用imageView演示就可以了
public class ContentView extends ImageView{
public ContentView(Context context) {
super(context);
setImageResource(R.drawable.a1);
}
}splashView
所有的动画都在这层
我们的动画分三部分：
- 小球旋转加载
- 小球聚合
- 空心圆扩散
不使用ifelse来写，使用状态模式这种设计模式，好处不言而喻
private SplashState mState = null;
private abstract class SplashState {
public abstract void drawState(Canvas canvas);
}用mState对象来保存当前执行的动画，写一个内部类或者接口，来规范我们的状态行为
public class SplashView extends View {
/**
* some adjustable paramerters
**/
//大圆（里面包括很多小圆）的半径
private float mRoatationRadius = 90;
//每个小圆的半径
private float mCircleRadius = 18;
//小圆圈颜色列表，在initiallize方法里面初始化
private int[] mCircleColors;
//大圆和小圆旋转的时间
private long mRoatationDuration = 1200;//ms
//第二部分动画的总执行时间（包第二个动画时间，各占用1/2）
private long mSplashDuration = 1200;//ms
//整体的背景颜色
private int mSplashBgColor = Color.WHITE;//ms
/**
* 参数，保存一些绘制的状态，会被动态地改变
*/
//空心圆初始半径
private float mHoleRadius = 0F;
//当前大圆旋转角度（弧度）
private float mCurrentRotationAngle = 0F;
//当前大圆的半径
private float mCurrentRotationRadius = mRoatationRadius;
//绘制圆的画笔
private Paint mPaint = new Paint();
//绘制背景的画笔
private Paint mPaintBackground = new Paint();
//屏幕正中心点坐标
private float mCenterX;
private float mCenterY;
//屏幕对角线一半
private float mDiagonalDist;
public SplashView(Context context) {
super(context);
init();
}
private void init() {
mPaint.setAntiAlias(true);
mPaintBackground.setAntiAlias(true);
mPaintBackground.setStyle(Paint.Style.STROKE);
mPaintBackground.setColor(mSplashBgColor);
mCircleColors = getContext().getResources().getIntArray(R.array.splash_circle_colors);
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
mCenterX = w / 2f;
mCenterY = h / 2f;
mDiagonalDist = (float) Math.sqrt(w * w + h * h) / 2;
}
public void SplashDisappear() {
//进入主页面 开启后面的两个动画
if (mState != null && mState instanceof RotationState) {
RotationState rotationState = (RotationState) mState;
rotationState.cancel();
post(new Runnable() {
@Override
public void run() {
//状态修改
mState = new MergingState();
}
});
// invalidate();
}
}
//保存当前动画状态--当前在执行哪种动画
private SplashState mState = null;
private abstract class SplashState {
public abstract void drawState(Canvas canvas);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//绘制动画，三种状态
if (mState == null) {
//默认加载第一个
mState = new RotationState();
Log.i("wxh", "执行了");
}
//绘制的分发
mState.drawState(canvas);
}
/**
* 小球旋转动画
*/
private class RotationState extends SplashState {
private ValueAnimator animator;
public RotationState() {
//小圆的坐标-->大圆的旋转读书（0~2π）、半径
animator = ValueAnimator.ofFloat(0, (float) Math.PI * 2);
//设置线性插值器---平滑计算
animator.setInterpolator(new LinearInterpolator());
//计算时间
animator.setDuration(mRoatationDuration);
//设置监听
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
//不断修改旋转的角度
mCurrentRotationAngle = (float) animation.getAnimatedValue();
// Log.i("wxh",mCurrentRota);
//提醒view重新绘制onDraw
invalidate();
}
});
//循环次数为无限
animator.setRepeatCount(ValueAnimator.INFINITE);
animator.start();
Log.i("wxh", "cccc");
}
public void cancel() {
animator.cancel();
}
@Override
public void drawState(Canvas canvas) {
//绘制背景（还原纯色）
drawBackground(canvas);
//绘制小圆
drawCircle(canvas);
}
private void drawCircle(Canvas canvas) {
//绘制小圆（坐标、自身半径）核心算法哦
//得到每个小圆中间的间隔角度
float rotationAngle = (float) (2 * Math.PI / mCircleColors.length);
for (int i = 0; i < mCircleColors.length; i++) {
/**
* x=r*cos(a)
* y=r*sin(a)
*/
double angle = i * rotationAngle + mCurrentRotationAngle;
float cx = (float) (mCurrentRotationRadius * Math.cos(angle) + mCenterX);
float cy = (float) (mCurrentRotationRadius * Math.sin(angle) + mCenterY);
mPaint.setColor(mCircleColors[i]);
canvas.drawCircle(cx, cy, mCircleRadius, mPaint);
}
}
private void drawBackground(Canvas canvas) {
//擦黑板
canvas.drawColor(mSplashBgColor);
}
}
/**
* 小球聚合动画
*/
private class MergingState extends SplashState {
private ValueAnimator animator;
public MergingState() {
//小圆的坐标-->大圆的旋转读书（0~2π）、半径
animator = ValueAnimator.ofFloat(0, mRoatationRadius);
//设置线性插值器---弹射效果
animator.setInterpolator(new OvershootInterpolator(10f));
//计算时间
animator.setDuration(mSplashDuration / 2);//++
//设置监听
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
//不断修改大圆半径
mCurrentRotationRadius = (Float) animation.getAnimatedValue();
// Log.i("wxh",mCurrentRota);
//提醒view重新绘制onDraw
postInvalidate();
}
});
animator.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
//开启下一个动画
mState = new ExpandingState();
}
});
//反向计算
animator.reverse();
}
@Override
public void drawState(Canvas canvas) {
//绘制背景（还原纯色）
drawBackground(canvas);
//绘制小圆
drawCircle(canvas);
}
private void drawCircle(Canvas canvas) {
//绘制小圆（坐标、自身半径）核心算法哦
//得到每个小圆中间的间隔角度
float rotationAngle = (float) (2 * Math.PI / mCircleColors.length);
for (int i = 0; i < mCircleColors.length; i++) {
/**
* x=r*cos(a)
* y=r*sin(a)
*/
double angle = i * rotationAngle + mCurrentRotationAngle;
float cx = (float) (mCurrentRotationRadius * Math.cos(angle) + mCenterX);
float cy = (float) (mCurrentRotationRadius * Math.sin(angle) + mCenterY);
mPaint.setColor(mCircleColors[i]);
canvas.drawCircle(cx, cy, mCircleRadius, mPaint);
}
}
private void drawBackground(Canvas canvas) {
//擦黑板
canvas.drawColor(mSplashBgColor);
}
}
/**
* 水波纹的而空心扩散动画
*/
private class ExpandingState extends SplashState {
private ValueAnimator animator;
public ExpandingState() {
//>计算某个时刻空心圆的半径（0~w*w+h*h开方除二）、半径
animator = ValueAnimator.ofFloat(0, mDiagonalDist);
//设置线性插值器---加速器
animator.setInterpolator(new AccelerateInterpolator());
//计算时间
animator.setDuration(mSplashDuration / 2);//++
//设置监听
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
//空心圆当前的半径
mHoleRadius = (Float) animation.getAnimatedValue();
// Log.i("wxh",mCurrentRota);
//提醒view重新绘制onDraw
postInvalidate();
}
});
//反向计算
animator.start();
}
@Override
public void drawState(Canvas canvas) {
//绘制背景（绘制空心圆背景）
drawBackground(canvas);
}
private void drawBackground(Canvas canvas) {
if (mHoleRadius > 0f) {
//画笔的宽度=对角线/2-空心部分的半径
float strokeWidth = mDiagonalDist - mHoleRadius;
//绘制空心圆(半径，画笔宽度)
float radius = mHoleRadius + strokeWidth / 2;
mPaintBackground.setStrokeWidth(strokeWidth);
canvas.drawCircle(mCenterX, mCenterY, radius, mPaintBackground);
} else {
//擦黑板
canvas.drawColor(mSplashBgColor);
}
}
}
}