Android自定义View实现注销图案的加载动画
先看效果图:
有那味了。。。(懂得都懂^ ^ √)
我们先来分析一下怎么画,然后再研究怎么让他动起来
这个View是由内部的注销图案和外面一圈圆环构成。而内部的注销图案又是由一个基本满角度的圆弧和一根竖线组成
一、绘制内部注销图案
首先初始化画笔和圆弧的外切矩形:
private Paint logOffPaint; //注销图案的画笔
private Paint circlePaint; //外圆的画笔
private RectF logOffRect; //注销图案中圆弧的外切矩形
private int logOffLength=50; //注销图案中竖线的长度
public MyLogOffLoadView(Context context, @Nullable AttributeSet attrs){
super(context, attrs);
init();
}
private void init(){
logOffRect=new RectF();
}
@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
super.onLayout(changed, left, top, right, bottom);
initStyle();
}
//设置控件属性
private void initStyle(){
logOffLength=getWidth()/4;
logOffPaint=setPaint(Color.WHITE,8, Paint.Style.STROKE,true);
circlePaint=setPaint(Color.WHITE,12, Paint.Style.STROKE,true);
}
//设置画笔属性
private Paint setPaint(int color, int strokeWidth, Paint.Style style,boolean openAntiAlias){
Paint paint=new Paint();
paint.setColor(color);
paint.setStrokeWidth(strokeWidth+getWidth()/200);
paint.setStyle(style);
paint.setAntiAlias(openAntiAlias);
return paint;
}
圆弧的中心是View的中心,坐标为(getWidth()/2,getWidth()/2),半径设置为getWidth/4,获取圆弧外切矩形:
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
drawLogOff(canvas);
}
//绘制注销图片
private void drawLogOff(Canvas canvas){
logOffRect.set(getWidth()/4,getWidth()/4,getWidth()*3/4,getWidth()*3/4);
}
设置圆弧的初始位置为-75度,以及总共需要绘制的角度为360-(90-75)*2=330,调用drawArc()绘制圆弧:
//绘制注销图片
private void drawLogOff(Canvas canvas){
logOffRect.set(getWidth()/4,getWidth()/4,getWidth()*3/4,getWidth()*3/4);
canvas.drawArc(logOffRect,-75,330,false,logOffPaint);
}
计算出竖线的起点和终点坐标,分别为(getWidth()/2,(getWidth()-logOffLength)/4);(getWidth()/2,(getWidth()+logOffLength*3)/4),logOffLength为竖线的长度,调用drawLine()绘制竖线:
//绘制注销图片
private void drawLogOff(Canvas canvas){
logOffRect.set(getWidth()/4,getWidth()/4,getWidth()*3/4,getWidth()*3/4);
canvas.drawArc(logOffRect,-75,330,false,logOffPaint);
canvas.drawLine(getWidth()/2,(getWidth()-logOffLength)/4,getWidth()/2,(getWidth()+logOffLength*3)/4,logOffPaint);
}
二、绘制外部圆环
圆环的中心即View的中心,半径为View的半径减去圆环宽度的一半,调用drawCircle绘制:
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
drawLogOff(canvas);
canvas.drawCircle(getWidth()/2,getWidth()/2,getWidth()/2-circlePaint.getStrokeWidth()/2,circlePaint);
}
三、实现绿条加载动画
外圆环中的绿条实际上就是一个圆弧,我这里将它的圆弧的总角度设置为了90度,并且每次顺时针移动5度
首先初始化一系列属性:
private Paint loadArcPaint; //加载时的圆弧画笔
private RectF loadArcRect; //加载圆弧的外切矩形
private boolean isStarted=false,isLoadFinished=false; //是否开始加载;是否加载完毕
private int totolAngle=90,movingAngle=0,movePerAngle=5; //加载时圆弧总共的长度;加载时圆弧目前所在的角度;加载时圆弧每次移动的角度
private void init(){
loadArcRect=new RectF();
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//......
if(isStarted&&!isLoadFinished){
canvas.drawArc(loadArcRect,movingAngle,totolAngle,false,loadArcPaint);
//顺时针转动movePerAngle角度
movingAngle+=movePerAngle;
if(movingAngle>360)movingAngle=movePerAngle%360;
postInvalidateDelayed(5);
}
}
@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
super.onLayout(changed, left, top, right, bottom);
initStyle();
}
//设置控件属性
private void initStyle(){
loadArcPaint=setPaint(getResources().getColor(R.color.green),12, Paint.Style.STROKE,true);
float arcHalfWidth=loadArcPaint.getStrokeWidth()/2;
loadArcRect.set(arcHalfWidth,arcHalfWidth,getWidth()-arcHalfWidth,getWidth()-arcHalfWidth);
}
View要向外界提供start方法来控制View是否开始绘制动画:
//开始绘制动画
public void start(){
isStarted=true;
invalidate();
}
当外界数据加载完毕后,View需提供finish方法来绘制加载完成时的图案
//完成加载
public void finish(){
isLoadFinished=true;
logOffPaint.setColor(getResources().getColor(R.color.green));
circlePaint.setColor(getResources().getColor(R.color.green));
invalidate();
}
外界也可以中途停止加载,View还需提供stop方法:
//停止加载
public void stop(){
reset();
}
//重置View属性
private void reset(){
isStarted=false;
isLoadFinished=false;
logOffDrawScale=0;
hasScaleMax=false;
scaleFinished=false;
logOffPaint.setColor(Color.WHITE);
circlePaint.setColor(Color.WHITE);
invalidate();
}
四、实现注销图案的缩放动画
大家可能还发现,当点击View的时候,除了有绿条在旋转,注销图案也会有一个放大缩小的效果,这个效果其实挺好实现的
首先来思考一下,注销图案中的圆弧在缩放到时候,其实改变的是它的外切矩形,并且它的圆心位置是不变的,所以我们需要等长度改变矩形左上角的点和右下角的点。同时图案中的竖线的底部和圆心的距离也应该是不变的,我们缩放的时候只需要改变竖线顶部点的位置。
首先做初始化:
private int logOffDrawScale=0,maxScale=60,perScale=5; //注销图案的缩放像素值;最大缩放值,每次缩放值
private boolean hasScaleMax=false,scaleFinished=false; //是否缩放到最大;是否缩放完毕
当logOffDrawScale扩大到60的时候,我们设置hasScaleMax为true,并开始缩小logOffDrawScale
当logOffDrawScale缩小至0的时候,我们设置scaleFinished为true,表示整体缩放动画结束
我们修改一下绘制注销图案的方法,让它的外切矩阵随着logOffDrawScale的变化而变化:
//绘制注销图片
private void drawLogOff(Canvas canvas){
//如果没有缩放完毕,并且开始加载时,才可以改变缩放值
if(!scaleFinished&&isStarted){
if(!hasScaleMax)logOffDrawScale+=perScale;
else logOffDrawScale-=perScale;
}
if(logOffDrawScale>maxScale){
logOffDrawScale=maxScale;
hasScaleMax=true;
}else if(logOffDrawScale<0){
logOffDrawScale=0;
hasScaleMax=false;
scaleFinished=true;
}
logOffRect.set(getWidth()/4-logOffDrawScale,getWidth()/4-logOffDrawScale,getWidth()*3/4+logOffDrawScale,getWidth()*3/4+logOffDrawScale);
canvas.drawArc(logOffRect,-75,330,false,logOffPaint);
canvas.drawLine(getWidth()/2,(getWidth()-logOffLength)/4-logOffDrawScale,getWidth()/2,(getWidth()+logOffLength*3)/4,logOffPaint);
}
五、外界调用
Activity类中,我们设置对该View的监听,并用Timer延时调用的方法来模拟数据的加载:
public class MyLogOffLoadAct extends AppCompatActivity {
private MyLogOffLoadView logOffLoadView;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.act_logoff_load);
init();
}
private void init(){
logOffLoadView=findViewById(R.id.logoffview);
logOffLoadView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if(!logOffLoadView.hasStart()){
logOffLoadView.start();
loadTask=new LoadTask();
timer.schedule(loadTask,3000);
}
else{
logOffLoadView.stop();
loadTask.cancel();
}
}
});
}
private Timer timer=new Timer();
private LoadTask loadTask;
class LoadTask extends TimerTask{
@Override
public void run() {
runOnUiThread(new Runnable() {
@Override
public void run() {
Toast.makeText(getApplicationContext(),"加载完成!",Toast.LENGTH_LONG).show();
}
});
logOffLoadView.finish();
}
}
}
xml布局文件如下:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent"
android:background="@color/blue2">
<com.hualinfo.myviewtext.MyLogOffLoadView
android:id="@+id/logoffview"
android:layout_width="250dp"
android:layout_height="250dp"
android:layout_centerInParent="true"/>
</RelativeLayout>
下面是自定义View完整代码:
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;
import androidx.annotation.Nullable;
public class MyLogOffLoadView extends View {
private Paint logOffPaint; //注销图案的画笔
private Paint circlePaint; //外圆的画笔
private Paint loadArcPaint; //加载时的圆弧画笔
private RectF logOffRect,loadArcRect; //注销图案中圆弧的外切矩形;加载圆弧的外切矩形
private int logOffLength=50; //注销图案中竖线的长度
private boolean isStarted=false,isLoadFinished=false; //是否开始加载;是否加载完毕
private int totolAngle=90,movingAngle=0,movePerAngle=5; //加载时圆弧总共的长度;加载时圆弧目前所在的角度;加载时圆弧每次移动的角度
private int logOffDrawScale=0,maxScale=60,perScale=5; //注销图案的缩放像素值;最大缩放值,每次缩放值
private boolean hasScaleMax=false,scaleFinished=false; //是否缩放到最大;是否缩放完毕
public MyLogOffLoadView(Context context, @Nullable AttributeSet attrs){
super(context, attrs);
init();
}
private void init(){
logOffRect=new RectF();
loadArcRect=new RectF();
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
drawLogOff(canvas);
canvas.drawCircle(getWidth()/2,getWidth()/2,getWidth()/2-circlePaint.getStrokeWidth()/2,circlePaint);
if(isStarted&&!isLoadFinished){
canvas.drawArc(loadArcRect,movingAngle,totolAngle,false,loadArcPaint);
//顺时针转动movePerAngle角度
movingAngle+=movePerAngle;
if(movingAngle>360)movingAngle=movePerAngle%360;
postInvalidateDelayed(5);
}
}
//绘制注销图片
private void drawLogOff(Canvas canvas){
//如果没有缩放完毕,并且开始加载时,才可以改变缩放值
if(!scaleFinished&&isStarted){
if(!hasScaleMax)logOffDrawScale+=perScale;
else logOffDrawScale-=perScale;
}
if(logOffDrawScale>maxScale){
logOffDrawScale=maxScale;
hasScaleMax=true;
}else if(logOffDrawScale<0){
logOffDrawScale=0;
hasScaleMax=false;
scaleFinished=true;
}
logOffRect.set(getWidth()/4-logOffDrawScale,getWidth()/4-logOffDrawScale,getWidth()*3/4+logOffDrawScale,getWidth()*3/4+logOffDrawScale);
canvas.drawArc(logOffRect,-75,330,false,logOffPaint);
canvas.drawLine(getWidth()/2,(getWidth()-logOffLength)/4-logOffDrawScale,getWidth()/2,(getWidth()+logOffLength*3)/4,logOffPaint);
}
@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
super.onLayout(changed, left, top, right, bottom);
initStyle();
}
//设置控件属性
private void initStyle(){
logOffLength=getWidth()/4;
logOffPaint=setPaint(Color.WHITE,8, Paint.Style.STROKE,true);
circlePaint=setPaint(Color.WHITE,12, Paint.Style.STROKE,true);
loadArcPaint=setPaint(getResources().getColor(R.color.green),12, Paint.Style.STROKE,true);
float arcHalfWidth=loadArcPaint.getStrokeWidth()/2;
loadArcRect.set(arcHalfWidth,arcHalfWidth,getWidth()-arcHalfWidth,getWidth()-arcHalfWidth);
}
//设置画笔属性
private Paint setPaint(int color, int strokeWidth, Paint.Style style,boolean openAntiAlias){
Paint paint=new Paint();
paint.setColor(color);
paint.setStrokeWidth(strokeWidth+getWidth()/200);
paint.setStyle(style);
paint.setAntiAlias(openAntiAlias);
return paint;
}
//开始绘制动画
public void start(){
isStarted=true;
invalidate();
}
public boolean hasStart(){
return isStarted;
}
//停止加载
public void stop(){
reset();
}
//完成加载
public void finish(){
isLoadFinished=true;
logOffPaint.setColor(getResources().getColor(R.color.green));
circlePaint.setColor(getResources().getColor(R.color.green));
invalidate();
}
//重置View属性
private void reset(){
isStarted=false;
isLoadFinished=false;
logOffDrawScale=0;
hasScaleMax=false;
scaleFinished=false;
logOffPaint.setColor(Color.WHITE);
circlePaint.setColor(Color.WHITE);
invalidate();
}
}
本文地址:https://blog.csdn.net/zz51233273/article/details/108151287
上一篇: ps怎么快速设计灯泡logo? ps灯泡标志矢量图的做法
下一篇: C语言结构体的一些理解