Android自定义加载圈动画效果

发布时间 - 2026-01-11 02:38:02    点击率:

本文实例为大家分享了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  # 加载圈  # Android实现加载圈  # Android实现仿iOS菊花加载圈动画效果  # Android绘制圆形百分比加载圈效果  # Android自定义加载圈的方法  # 小圆  # 加载  # 自定义  # 都是  # 插值  # 大家分享  # 来实现  # 完后  # 具体内容  # 大家多多  # 是为了  # 前景色  # 主要有  # 完毕后  # float  # mBigCircleRaduis  # mSubCircleRadius  # mBgPaint  # mFgPaint  # mBigCenterPoint 


相关栏目: 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571


相关推荐: 如何用PHP工具快速搭建高效网站?  html文件怎么打开证书错误_https协议的html打开提示不安全【指南】  公司门户网站制作流程,华为官网怎么做?  Laravel如何处理CORS跨域请求?(配置示例)  Android 常见的图片加载框架详细介绍  Python正则表达式进阶教程_复杂匹配与分组替换解析  新三国志曹操传主线渭水交兵攻略  清除minerd进程的简单方法  CSS3怎么给轮播图加过渡动画_transition加transform实现【技巧】  Python文本处理实践_日志清洗解析【指导】  太平洋网站制作公司,网络用语太平洋是什么意思?  武汉网站设计制作公司,武汉有哪些比较大的同城网站或论坛,就是里面都是武汉人的?  Laravel如何实现图片防盗链功能_Laravel中间件验证Referer来源请求【方案】  Laravel如何操作JSON类型的数据库字段?(Eloquent示例)  绝密ChatGPT指令:手把手教你生成HR无法拒绝的求职信  香港服务器WordPress建站指南:SEO优化与高效部署策略  昵图网官方站入口 昵图网素材图库官网入口  Laravel怎么做缓存_Laravel Cache系统提升应用速度的策略与技巧  Python进程池调度策略_任务分发说明【指导】  如何挑选优质建站一级代理提升网站排名?  如何在七牛云存储上搭建网站并设置自定义域名?  JavaScript常见的五种数组去重的方式  如何获取上海专业网站定制建站电话?  高防网站服务器:DDoS防御与BGP线路的AI智能防护方案  教你用AI润色文章,让你的文字表达更专业  重庆市网站制作公司,重庆招聘网站哪个好?  制作企业网站建设方案,怎样建设一个公司网站?  实例解析angularjs的filter过滤器  如何快速生成可下载的建站源码工具?  香港服务器租用每月最低只需15元?  佛山企业网站制作公司有哪些,沟通100网上服务官网?  JS经典正则表达式笔试题汇总  网站制作企业,网站的banner和导航栏是指什么?  如何在 Go 中优雅地映射具有动态字段的 JSON 对象到结构体  Laravel怎么使用Session存储数据_Laravel会话管理与自定义驱动配置【详解】  如何确认建站备案号应放置的具体位置?  如何续费美橙建站之星域名及服务?  python中快速进行多个字符替换的方法小结  PHP的CURL方法curl_setopt()函数案例介绍(抓取网页,POST数据)  国美网站制作流程,国美电器蒸汽鍋怎么用官方网站?  Android利用动画实现背景逐渐变暗  微信推文制作网站有哪些,怎么做微信推文,急?  Laravel怎么解决跨域问题_Laravel配置CORS跨域访问  Laravel中间件如何使用_Laravel自定义中间件实现权限控制  郑州企业网站制作公司,郑州招聘网站有哪些?  Laravel怎么进行数据库事务处理_Laravel DB Facade事务操作确保数据一致性  Laravel任务队列怎么用_Laravel Queues异步处理任务提升应用性能  详解一款开源免费的.NET文档操作组件DocX(.NET组件介绍之一)  Laravel API资源类怎么用_Laravel API Resource数据转换  悟空识字怎么关闭自动续费_悟空识字取消会员自动扣费步骤