Android自定义加载圈动画效果
2017-08-03 14:11
603 查看
本文实例为大家分享了Android自定义加载圈动画展示的具体代码,供大家参考,具体内容如下
实现如下效果:
该效果图主要有3个动画:
1.旋转动画
2.聚合动画
3.扩散动画
以上3个动画都是通过ValueAnimator来实现,配合自定义View的onDraw()方法实现不断的刷新和绘制界面.
具体代码如下:
package blog.csdn.net.mchenys.myanimationloading; import android.animation.Animator; import android.animation.AnimatorListenerAdapter; import android.animation.ValueAnimator; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.PointF; import android.util.AttributeSet; import android.view.View; import android.view.animation.LinearInterpolator; import android.view.animation.OvershootInterpolator; /** * Created by mChenys on 2016/5/21. */ public class AnimationLoading extends View { private float mBigCircleRaduis = 90;//大圆的半径 private float mSubCircleRadius = 20;//小圆的半径 private PointF mBigCenterPoint;//大圆的圆心坐标 private Paint mBgPaint;//绘制背景的画笔 private Paint mFgPaint;//绘制前景色的画笔 private AnimatorTemplet mTemplet;//动画模板 float mBigCircleRotateAngle;//大圆旋转的角度 float mDiagonalDist;//屏幕对角线一半的距离 float mBgStrokeCircleRadius;//用于作为绘制背景空心圆的半径 //6个小圆的颜色 private int[] colors = new int[]{Color.RED, Color.DKGRAY, Color.YELLOW, Color.BLUE, Color.LTGRAY, Color.GREEN}; public AnimationLoading(Context context) { this(context, null); } public AnimationLoading(Context context, AttributeSet attrs) { super(context, attrs); init(); } @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); //确定大圆的圆心坐标 mBigCenterPoint.x = w / 2f; mBigCenterPoint.y = h / 2f; //屏幕对角线的一半 mDiagonalDist = (float) (Math.sqrt(w * w + h * h) / 2); } private void init() { mBigCenterPoint = new PointF(); mFgPaint = new Paint(); mFgPaint.setAntiAlias(true); mBgPaint = new Paint(mFgPaint); mBgPaint.setColor(Color.WHITE); mBgPaint.setStyle(Paint.Style.STROKE); } @Override protected void onDraw(Canvas canvas) { if (null == mTemplet) { //开启旋转动画 mTemplet = new RotateState(); } //传递Canvas对象 mTemplet.drawState(canvas); } /** * 绘制圆 * * @param canvas */ private void drawCircle(Canvas canvas) { //获取每个小圆间隔的角度 float rotateAngle = (float) (2 * Math.PI / colors.length); for (int i = 0; i < colors.length; i++) { //每个小圆的实际角度 double angle = rotateAngle * i + mBigCircleRotateAngle; //这里加上大圆旋转的角度是为了带动小圆一起旋转 //计算每个小圆的圆心坐标 float cx = (float) (mBigCircleRaduis * Math.cos(angle)) + mBigCenterPoint.x; float cy = (float) (mBigCircleRaduis * Math.sin(angle)) + mBigCenterPoint.y; //绘制6个小圆 mFgPaint.setColor(colors[i]); canvas.drawCircle(cx, cy, mSubCircleRadius, mFgPaint); } } /** * 绘制背景 * * @param canvas */ private void drawBackground(Canvas canvas) { if (mBgStrokeCircleRadius > 0f) { //不断扩散的空心圆,空心圆的半径为屏幕对角线的一半,空心圆的线宽则从线宽一半到0 float strokeWidth = mDiagonalDist - mBgStrokeCircleRadius;//线宽从对角线的1/2 ~ 0 mBgPaint.setStrokeWidth(strokeWidth); float radius = mBgStrokeCircleRadius + strokeWidth / 2;//半径从对角线的1/4 ~ 1/2 canvas.drawCircle(mBigCenterPoint.x, mBigCenterPoint.y,radius , mBgPaint); } else { //绘制白色背景 canvas.drawColor(Color.WHITE); } } private abstract class AnimatorTemplet { abstract void drawState(Canvas canvas); } /** * 绘制旋转动画 */ private class RotateState extends AnimatorTemplet { ValueAnimator mValueAnimator; public RotateState() { //旋转的过程,就是不断的获取大圆的角度,从0-2π mValueAnimator = ValueAnimator.ofFloat(0, (float) Math.PI * 2); mValueAnimator.setInterpolator(new LinearInterpolator());//匀速插值器 mValueAnimator.setDuration(1200); mValueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { //获取大圆旋转的角度 mBigCircleRotateAngle = (float) animation.getAnimatedValue(); //重绘 invalidate(); } }); mValueAnimator.setRepeatCount(ValueAnimator.INFINITE);//无限循环 mValueAnimator.start(); } /** * 停止旋转动画,在数据加载完毕后供外部调用 */ public void stopRotate() { mValueAnimator.cancel(); } @Override void drawState(Canvas canvas) { drawBackground(canvas); drawCircle(canvas); } } /** * 绘制聚合动画 */ private class MergingState extends AnimatorTemplet { public MergingState() { //聚合的过程,就是不断的改变大圆的半径,从mBigCircleRaduis~0 ValueAnimator valueAnimator = ValueAnimator.ofFloat(mBigCircleRaduis, 0); valueAnimator.setInterpolator(new OvershootInterpolator(10f));//弹性插值器 valueAnimator.setDuration(600); valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { //获取大圆变化的半径 mBigCircleRaduis = (float) animation.getAnimatedValue(); //重绘 invalidate(); } }); valueAnimator.addListener(new AnimatorListenerAdapter() { @Override public void onAnimationEnd(Animator animation) { //聚合执行完后进入下一个扩散动画 mTemplet = new SpreadState(); } }); valueAnimator.start(); } @Override void drawState(Canvas canvas) { drawBackground(canvas); drawCircle(canvas); } } /** * 绘制扩散动画 */ private class SpreadState extends AnimatorTemplet { public SpreadState() { //扩散的过程,就是不断的改变背景画绘制空心圆的半径,从0~mDiagonalDist ValueAnimator valueAnimator = ValueAnimator.ofFloat(0, mDiagonalDist); valueAnimator.setDuration(600); valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { //获取大圆变化的半径 mBgStrokeCircleRadius = (float) animation.getAnimatedValue(); //重绘 invalidate(); } }); valueAnimator.start(); } @Override void drawState(Canvas canvas) { drawBackground(canvas); } } /** * 停止加载动画 */ public void stopLoading() { if (null != mTemplet && mTemplet instanceof RotateState) { ((RotateState) mTemplet).stopRotate(); //开启下一个聚合动画 post(new Runnable() { @Override public void run() { mTemplet = new MergingState(); } }); } } }
测试的Activity
package blog.csdn.net.mchenys.myanimationloading; import android.os.Bundle; import android.os.Handler; import android.support.v7.app.AppCompatActivity; import android.widget.FrameLayout; import android.widget.ImageView; public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); FrameLayout content = new FrameLayout(this); content.setOnClickListener(null); ImageView bg = new ImageView(this); bg.setImageResource(R.drawable.fg); bg.setScaleType(ImageView.ScaleType.FIT_XY); content.addView(bg); final AnimationLoading loading = new AnimationLoading(this); content.addView(loading); setContentView(content); new Handler().postDelayed(new Runnable() { @Override public void run() { //3s后停止加载动画 loading.stopLoading(); } },3000); } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- Android自定义类似ProgressDialog效果加载动画
- Android自定义view实现阻尼效果的加载动画
- Android自定义View实现loading动画加载效果
- Android自定义view-高仿小米视频加载动画效果
- Android自定义带加载动画效果的环状进度条
- Android自定义环状进度条(带加载动画效果)
- [置顶] 自定义view实现阻尼效果的加载动画
- Android 三种方式实现自定义圆形页面加载中效果的进度条
- android开发过程中自定义动画加载进度条实现过程
- Android之全屏转圈加载动画和自定义Toast
- Android 自定义Title根据滑动距离动画效果
- android自定义加载动画
- Android 自定义ScrollView 支持惯性滑动,惯性回弹效果。支持上拉加载更多
- Android仿视频加载旋转小球动画效果的实例代码
- Android UI:看看Google官方自定义带旋转动画的ImageView-----RotateImageView怎么写(附 图片淡入淡出效果)
- Android自定义Activity酷炫的动画跳转效果
- 三种方式实现自定义圆形页面加载中效果的进度条,包含一个好看的Android UI
- Android UI:看看Google官方自定义带旋转动画的ImageView-----RotateImageView怎么写(附 图片淡入淡出效果)
- Android动画效果之自定义ViewGroup添加布局动画
- Android 自定义View之加载进度条效果