Android自定义加载圈动画效果
作者:mChenys 发布时间:2021-07-20 14:52:23
标签:Android,加载圈
本文实例为大家分享了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);
}
}
0
投稿
猜你喜欢
- 可以静态绑定数据源,这样就自动为DataGridView控件添加 相应的行。假如需要动态为DataGridView控件添加新行,方法有很多种
- 所谓回调,就是客户程序C调用服务程序S中的某个方法A,然后S又在某个时候反过来调用C中的某个方法B,对于C来说,这个B便叫做回调方法。下面看
- 本文实例讲述了C#画图之饼图折线图的实现方法,是C#程序设计中非常实用的技巧。分享给大家供大家参考。具体方法分析如下:显示图像的控件定义如下
- Java数字格式类以下两个类可用于格式化和解析数字:java.text.NumberFormatjava.text.DecimalForma
- Druid是阿里巴巴开源平台上一个数据库连接池实现,它结合了C3P0、DBCP、PROXOOL等DB池的优点,同时加入了日志监控,可以很好的
- 在高并发的系统中,往往需要在系统中做限流,一方面是为了防止大量的请求使服务器过载,导致服务不可用,另一方面是为了防止网络攻击。常见的限流方式
- 在linux主机部署Eureka高可用方案的时候,发现注册到服务中心的服务IP是随机的,由于主机的网卡是多个,随机的IP并不是自己想要的,上
- Android * 功能/手机关闭能拍照效果如下: 其实 * 与偷录实现方式是一样的,都是使用到的WindowManager来绘制
- 本文实例讲述了Java Swing中JDialog实现用户登陆UI。分享给大家供大家参考,具体如下:JDialog是一种对话框组件,它常常与
- 一. 泛型概念的提出(为什么需要泛型)?首先,我们看下下面这段简短的代码:public class GenericTest {public
- SpringBoot Data JPA实现 一对多、多对一关联表查询开发环境IDEA 2017.1Java1.8SpringBoot 2.0
- 简介对于一个APP来说,肯定会有一个AppBar,这个AppBar一般包含了APP的导航信息等。虽然我们可以用一个固定的组件来做为AppBa
- mapper.xml中if标签test判断的用法1. 字符串等于条件的两种写法① 将双引号和单引号的位置互换<if test='
- POM<dependency> <groupId>org.springframework.boot<
- 由于最近想要阅读下JDK1.8 中HashMap的具体实现,但是由于HashMap的实现中用到了红黑树,所以我觉得有必要先复习下红黑树的相关
- 通过配置变量调用配置文件url1.application.yml 配置文件配置参数feign: sys: http://127.
- 有很多地方要用到DatePickerDialog。但有时项目用到的主题样式是很丑的样式,显示出来的真丑。而我们真正想要的样式是这样的。这个就
- 一、获取企业微信群机器人 Webhook 地址业务需要在企业微信推送告警监控或者定时提醒业务,就可以使用企业微信自带的机器人工具Webhoo
- 前言A*搜寻算法俗称A星算法。这是一种在图形平面上,有多个节点的路径,求出最低通过成本的算法。常用于游戏中通过二维数组构建的一个迷宫,“%”
- RPC,即 Remote Procedure Call(远程过程调用),说得通俗一点就是:调用远程计算机上的服务,就像调用本地服务一样。RP