android刷新时的圆形动画_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);
}
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
android刷新时的圆形动画_Android自定义加载圈动画效果相关推荐
- android菊花动画,Android实现仿iOS菊花加载圈动画效果
常见的实现方式 切图,做旋转动画 自定义View,绘制效果 gif图 1.切图会增加体积,但相对简单,不过在换肤的场景下,会使用不同颜色,需要准备多张图,不够灵活. 2.由于自定义的好处,不同颜色只需 ...
- android刷新时的圆形动画_【Android UI】自定义圆形Loading动画
1.创建环形loading图片 android:fromDegrees="0" android:toDegrees="360" android:pivotX=& ...
- android 自定义加载动画效果,Android 自定义View修炼-自定义加载进度动画LoadingImageView...
一.概述 本自定义View,是加载进度动画的自定义View,继承于ImageView来实现,主要实现蒙层加载进度的加载进度效果. 支持水平左右加载和垂直上下加载四个方向,同时也支持自定义蒙层进度颜色. ...
- Android 自定义加载Dialog 运行效果流畅
如何实现Android 自定义加载Dialog,而且运行效果流畅.用ProgreBar效果不是很好. 下面介绍一种用ImageView+动画 实现. 1.在.xml中加入控件: <ImageV ...
- android录音波浪动画_Android自定义View实现波浪动画
本文实例为大家分享了Android自定义View实现波浪动画的具体代码,供大家参考,具体内容如下 效果演示 代码调用与实现效果 xml中调用 android:layout_width="ma ...
- android录音波浪动画_Android 自定义 view 实现波浪动画进度条
最近在做项目时需要实现这样一种动画,类似于波浪形的进度动画,粗略的看了一下,发现好像类似于正余弦曲线实现的,但是Android 没有相关的API,所以需要我们动手画出来,所以现在在此记录一下学习过程, ...
- Android中给listview/gridview设置动画(逐条加载条目动画)
先看实现的效果如下: 演示效果如上: 上面的列表是GridView 要给这个GridView添加一个动画,才可以逐个加载.网上找了大量资料,不少人说用多线程加载,通过SetAdapter设置数据 ...
- uniapp 点击动画_uni-app自定义加载动画组件
先写好一个加载动画组件,如: main.js 中添加相应引用,使用Vuex来记录显示状态,所以Vuex也需要引用 //Vuex import store from './store' Vue.prot ...
- android刷新时的圆形动画_Android自定义view渐变圆形动画
本文实例为大家分享了Android自定义view渐变圆形动画的具体代码,供大家参考,具体内容如下 直接上效果图 自定义属性 attrs.xml文件 创建一个类 ProgressRing继承自 view ...
最新文章
- Caffe源码中caffe.proto文件分析
- 如何从SEO优化角度设计网站导航栏?
- 用c语言描述单链表的数据类型,数据结构—单链表(类C语言描述)
- codeforces679C Bear and Square Grid(dfs优化)
- CentOS下配置JDK1.6+TOMCAT6
- Windows平台下的Redis集群搭建(简单有效)
- 信息论与编码_学术动态 | “中大网络信息理论与编码研讨会”成功举办
- yolo算法python代码_深度学习目标检测系列:一文弄懂YOLO算法|附Python源码
- http长连接与主动断开方
- 2016年5月热门IT职位的推荐
- 【PCL自学:目录】PCL简介及主要功能模块介绍 (持续更新)
- 阿里面试题 ——输入一个字符串,输出所有的排列
- TDA4VM中各个CPU对应的名字
- win10系统麦克风声音太小怎么设置
- 系统问题导致的笔记本部分按键失灵
- 读懂matlab代码,一个Matlab的寻峰程序没有看懂,不知大家能否帮助?
- python内置库求复数的辐角_皮肤与美容—医学专家如是说_中国大学MOOC(慕课)_章节测验答案...
- innerHTML用法
- 概率(probability)---似然(likelihood)的前世今生
- Doxygen 使用总结
热门文章
- RabbitMQ系列教程之四:路由(Routing)
- JWT【JSON Web Token】 简述
- django18:auth模块
- Django04: ORM配置与使用MySQL数据库
- php里面sql是什么意思,MySQL和SQL是什么?MySQL和SQL之间的区别有哪些
- Android Studio 引用aar包 更新后找不到新增的方法问题(踩坑)
- 【数据库原理及应用】经典题库附答案(14章全)——第十三章:面向对象程数据库系统
- GIS专业核心课程电子教材配套实验数据汇总(持续更新)
- 打开vs2010,提示无效的许可证数据,需要重新安装
- C和指针之部分理解和编码总结