属性动画—仿雅虎加载效果
2018-01-29 本文已影响0人
刘孙猫咪
device-2018-01-09-220050.gif
通过自定view绘制几个不同颜色的小圆，通过旋转、聚合等动画实现的一个加载效果；自绘控件，肯定少不了画笔的使用；
/**
* 初始化画笔
*/
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);
}
当然这里还要重写onSizeChanged方法，当大小发生改变时获取画布中心点的坐标；
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
mCenterX = w / 2;
mCenterY = h / 2;
//屏幕对角线一半
mDiagonalDist = (float) Math.sqrt((w * w + h * h) / 2);
}
接下就是重写onDraw()方法进行绘制了，这里使用策略模式进行绘制，仔细看效果，会有三种状态下的绘制，小球旋转，小球聚合，小球扩散；
这里建立一个抽象类，并提供drawState()抽象方法，具体的有子类去实现，在实例化对象时，遵循里氏替换原则；
/**
* 抽象类，定义绘制的状态
*/
private abstract class SplashState {
public abstract void drawState(Canvas canvas);
}
这样就可以在onDraw()方法中去实例化第一种状态的对象，并进行绘制；
@Override
protected void onDraw(Canvas canvas) {
//绘制动画 3个动画
if (mState == null) {
mState = new RotationState();
}
mState.drawState(canvas);
super.onDraw(canvas);
}
/**
* 第一个动画，小圆的旋转动画
*/
private class RotationState extends SplashState {
public RotationState() {
//动画初始化
mAnimator = ValueAnimator.ofFloat(0, (float) Math.PI * 2);
//设置插值器
mAnimator.setInterpolator(new LinearInterpolator());
mAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
//得到某个时间点计算的结果---这个时间点当前大圆旋转的角度
mCurrentRotationAngle = (float) animation.getAnimatedValue();
postInvalidate();
}
});
mAnimator.setDuration(mRotationDuration);
//重复次数无限循环
mAnimator.setRepeatCount(ValueAnimator.INFINITE);
mAnimator.start();
}
/**
* 停止动画
*/
public void cancel() {
mAnimator.cancel();
}
@Override
public void drawState(Canvas canvas) {
//进行绘制
//1擦黑板 绘制背景
drawBackground(canvas);
//2.绘制小圆
drawCircle(canvas);
}
}
在drawState()方法里面进行背景和小圆的绘制；
/**
* 绘制背景
* @param canvas
*/
private void drawBackground(Canvas canvas) {
if (mHoleRadius > 0f) {
//得到画笔的宽度=对角线/2-空心部分原的半径
float strokeWidth = mDiagonalDist - mHoleRadius;
mPaintBackground.setStrokeWidth(strokeWidth);
//画圆的半径=空心圆的半径+画笔宽度/2
float radius = mHoleRadius + strokeWidth / 2;
canvas.drawCircle(mCenterX, mCenterY, radius, mPaintBackground);
} else {
canvas.drawColor(mSplashBgColor);
}
}
/**
* 绘制小圆
* @param 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)+centerX
* y=r*sin(a)+centerY
*/
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);
}
}
这个时候会感觉到奇怪，RotationState类中并没有对动画进行相应的监听并改变相应的状态，是的在RotationState类是没有做相应的动作，而是提供了splashDisappear()方法，该方法中利用Handler在第一种状态动画开启后延迟5000毫秒，5000毫秒后将取消第一种状态动画，并实例化第二种状态对象；
/**
* 完毕后开启进场动画 1动画完毕 2/3动画开始
*/
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();
}
});
}
}
/**
* 第二个聚合动画
*/
private class MergingState extends SplashState {
public MergingState() {
//动画初始化
mAnimator = ValueAnimator.ofFloat(0, mRatationRadius);
mAnimator.setInterpolator(new OvershootInterpolator(10f));
mAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
//得到某个时间点计算的结果---这个时间点当前大圆旋转的角度
mCurrentRotationRadius = (float) animation.getAnimatedValue();
postInvalidate();
}
});
//监听动画执行完毕
mAnimator.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
mState = new ExpandState();
}
});
mAnimator.setDuration(mRotationDuration);
//反转执行动画
mAnimator.reverse();
}
@Override
public void drawState(Canvas canvas) {
//1擦黑板 绘制背景
drawBackground(canvas);
//2.绘制小圆
drawCircle(canvas);
}
}
第二种状态下drawState(Canvas canvas)方法还是一样的，绘制背景和绘制小圆，小圆扩散的效果设置一个OvershootInterpolator插值器就可以了，同时添加了动画执行完毕的监听，动画执行完毕后，就去实例化第三种状态对象；
/**
* 第三个水波纹的空心扩散动画
*/
private class ExpandState extends SplashState {
public ExpandState() {
//动画初始化
mAnimator = ValueAnimator.ofFloat(0, mDiagonalDist);
mAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
//得到某个时间点计算的结果---这个时间点当前大圆旋转的角度
mHoleRadius = (float) animation.getAnimatedValue();
postInvalidate();
}
});
mAnimator.setDuration(mRotationDuration / 2);
//反转执行动画
mAnimator.start();
}
@Override
public void drawState(Canvas canvas) {
//1擦黑板 绘制背景 //2绘制空心圆
drawBackground(canvas);
}
}
最后一种状态不需要绘制小圆，绘制背景即可，这样子就ok了，在activity中调用就可以了；
public class MainActivity extends AppCompatActivity {
private FrameLayout frameLayout;
private SplashView splashView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
frameLayout = new FrameLayout(this);
ContentView contentView = new ContentView(this);
frameLayout.addView(contentView);
splashView = new SplashView(this);
frameLayout.addView(splashView);
setContentView(frameLayout);
//开始加载数据---- 数据加载前开启动画，加载后开启进场的动画
startSplashDataLoad();
}
Handler handler = new Handler();
private void startSplashDataLoad() {
//模拟数据加载
handler.postDelayed(new Runnable() {
@Override
public void run() {
//开始加载数据---- 数据加载前开启动画，加载后开启进场的动画
splashView.splashDisappear();
}
}, 5000);
}
}
