Android Studio App开发之绘制简单的动画图像（附源码，简单易懂）

深藏阁楼爱情的钟 2023-09-30 16:41 15阅读 0赞

> **运行有问题或需要源码请点赞关注收藏后评论区留言~~~**

## 一、重新绘制视图界面 ##

控件的内容一旦变化，就得通知界面刷新它的外观，例如文本视图修改了文字，图像视图更换了图片等等。一般通过invalidate犯法和postInvalidate方法来刷新界面，它们的主要区别有以下两点

> 1：invalidate不是线程安全的，它只保证在主线程中能够正常刷新视图，，而postInvalidate是线程安全的，即使在分线程中调用也能正常刷新视图
> 
> 2：invalidate只能立即刷新视图，而post方法还能允许延迟一段时间后再刷新视图

下面通过一个实例讲解，每次刷新视图都将绘制更大角度的扇形 效果如下

![cad7f50571644751a83c22017b33e021.png][]

![c7f15d3997ad490ca45189886e0136fd.png][]

![06732df9cfc7494bb2e149dfb292be79.png][]

![95038bbb94564bec98057a714d8ef0a3.png][]

代码如下

### Java类代码 ###

package com.example.chapter10;
    
    import androidx.appcompat.app.AppCompatActivity;
    
    import android.os.Bundle;
    import android.view.View;
    import android.widget.AdapterView;
    import android.widget.AdapterView.OnItemSelectedListener;
    import android.widget.ArrayAdapter;
    import android.widget.Spinner;
    
    import com.example.chapter10.widget.OvalView;
    
    public class ViewInvalidateActivity extends AppCompatActivity {
        private OvalView ov_validate; // 声明一个椭圆视图对象
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_view_invalidate);
            ov_validate = findViewById(R.id.ov_validate);
            initRefreshSpinner(); // 初始化刷新方式的下拉框
        }
    
        // 初始化刷新方式的下拉框
        private void initRefreshSpinner() {
            ArrayAdapter<String> refreshAdapter = new ArrayAdapter<String>(this,
                    R.layout.item_select, refreshArray);
            Spinner sp_refresh = findViewById(R.id.sp_refresh);
            sp_refresh.setPrompt("请选择刷新方式"); // 设置下拉框的标题
            sp_refresh.setAdapter(refreshAdapter); // 设置下拉框的数组适配器
            sp_refresh.setSelection(0); // 设置下拉框默认显示第一项
            // 给下拉框设置选择监听器，一旦用户选中某一项，就触发监听器的onItemSelected方法
            sp_refresh.setOnItemSelectedListener(new RefreshSelectedListener());
        }
    
        private String[] refreshArray = {
                "主线程调用invalidate",
                "主线程调用postInvalidate",
                "延迟3秒后刷新",
                "分线程调用invalidate",
                "分线程调用postInvalidate"
        };
        class RefreshSelectedListener implements OnItemSelectedListener {
            public void onItemSelected(AdapterView<?> arg0, View arg1, int arg2, long arg3) {
                if (arg2 == 0) {  // 主线程调用invalidate
                    ov_validate.invalidate(); // 刷新视图（用于主线程）
                } else if (arg2 == 1) {  // 主线程调用postInvalidate
                    ov_validate.postInvalidate(); // 刷新视图（主线程和分线程均可使用）
                } else if (arg2 == 2) {  // 延迟3秒后刷新
                    ov_validate.postInvalidateDelayed(3000); // 延迟若干时间后再刷新视图
                } else if (arg2 == 3) {  // 分线程调用invalidate
                    // invalidate不是线程安全的，虽然下面代码在分线程中调用invalidate方法也没报错，但在复杂场合可能出错
                    new Thread(new Runnable() {
                        @Override
                        public void run() {
                            ov_validate.invalidate(); // 刷新视图（用于主线程）
                        }
                    }).start();
                } else if (arg2 == 4) {  // 分线程调用postInvalidate
                    // postInvalidate是线程安全的，分线程中建议调用postInvalidate方法来刷新视图
                    new Thread(new Runnable() {
                        @Override
                        public void run() {
                            ov_validate.postInvalidate(); // 刷新视图（主线程和分线程均可使用）
                        }
                    }).start();
                }
            }
    
            public void onNothingSelected(AdapterView<?> arg0) {}
        }
    
    }

### XML文件 ###

## 二、自定义饼图动画 ##

掌握了Handler的延迟机制加上视图对象的刷新方法，就能间隔固定时间不断渲染控件界面，从而实现简单的动画效果，接下来通过饼图动画的绘制来展示 具体实现步骤如下

> 1：在java代码的widget包下创建PieAnimation类 重写onDraw方法 使用画笔对象绘制指定角度的扇形
> 
> 2：在它内部定义一个视图刷新任务，然后调用invalidate方法刷新视图界面，如果动画尚未播放完毕，就调用处理器对象的postDelayer方法，间隔一段时间后重新执行刷新任务
> 
> 3：给PieAnimation方法补充一个start方法，用于控制饼图动画的播放操作

点击开始后会自动绘制到四分之三个圆然后停止，点击屏幕则会重新绘制

**完整视频已上传到我的主页 有需要可自行观看**

![adf401612b4142808e7b21ce71bd19e1.png][]

![9417a76c31fa42988f4f95a6a344d4c9.png][]

代码如下

### Java类 ###

package com.example.chapter10;
    
    import android.os.Bundle;
    import android.view.View;
    import android.view.View.OnClickListener;
    
    import androidx.appcompat.app.AppCompatActivity;
    
    import com.example.chapter10.widget.PieAnimation;
    
    public class PieAnimationActivity extends AppCompatActivity implements View.OnClickListener {
        private PieAnimation pa_circle; // 声明一个饼图动画对象
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_pie_animation);
            // 从布局文件中获取名叫pa_circle的饼图动画
            pa_circle = findViewById(R.id.pa_circle);
            pa_circle.setOnClickListener(this); // 设置饼图动画的点击监听器
            pa_circle.start(); // 开始播放饼图动画
        }
    
        @Override
        public void onClick(View v) {
            if (v.getId() == R.id.pa_circle) {
                if (!pa_circle.isRunning()) { // 判断饼图动画是否正在播放
                    pa_circle.start(); // 不在播放，则开始播放饼图动画
                }
            }
        }
    
    }

### 工具类如下 ###

package com.example.chapter10.widget;
    
    import android.annotation.SuppressLint;
    import android.content.Context;
    import android.graphics.Canvas;
    import android.graphics.Color;
    import android.graphics.Paint;
    import android.graphics.Paint.Style;
    import android.graphics.RectF;
    import android.os.Handler;
    import android.util.AttributeSet;
    import android.view.View;
    
    @SuppressLint("DrawAllocation")
    public class PieAnimation extends View {
        private Paint mPaint = new Paint(); // 创建一个画笔对象
        private int mDrawingAngle = 0; // 当前绘制的角度
        private Handler mHandler = new Handler(); // 声明一个处理器对象
        private boolean isRunning = false; // 是否正在播放动画
    
        public PieAnimation(Context context) {
            this(context, null);
        }
    
        public PieAnimation(Context context, AttributeSet attrs) {
            super(context, attrs);
            mPaint.setColor(Color.GREEN); // 设置画笔的颜色
        }
    
        // 开始播放动画
        public void start() {
            mDrawingAngle = 0; // 绘制角度清零
            isRunning = true;
            mHandler.post(mRefresh); // 立即启动绘图刷新任务
        }
    
        // 是否正在播放
        public boolean isRunning() {
            return isRunning;
        }
    
        // 定义一个绘图刷新任务
        private Runnable mRefresh = new Runnable() {
            @Override
            public void run() {
                mDrawingAngle += 3; // 每次绘制时角度增加三度
                if (mDrawingAngle <= 270) { // 未绘制完成，最大绘制到270度
                    invalidate(); // 立即刷新视图
                    mHandler.postDelayed(this, 70); // 延迟若干时间后再次启动刷新任务
                } else { // 已绘制完成
                    isRunning = false;
                }
            }
        };
    
        @Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            if (isRunning) { // 正在播放饼图动画
                int width = getMeasuredWidth(); // 获得已测量的宽度
                int height = getMeasuredHeight(); // 获得已测量的高度
                int diameter = Math.min(width, height); // 视图的宽高取较小的那个作为扇形的直径
                // 创建扇形的矩形边界
                RectF rectf = new RectF((width - diameter) / 2, (height - diameter) / 2,
                        (width + diameter) / 2, (height + diameter) / 2);
                // 在画布上绘制指定角度的图形。第四个参数为true绘制扇形，为false绘制圆弧
                canvas.drawArc(rectf, 0, mDrawingAngle, true, mPaint);
            }
        }
    
    }

### XML文件 ###

**创作不易 觉得有帮助请点赞关注收藏~~~**

[cad7f50571644751a83c22017b33e021.png]: https://img-blog.csdnimg.cn/cad7f50571644751a83c22017b33e021.png
[c7f15d3997ad490ca45189886e0136fd.png]: https://img-blog.csdnimg.cn/c7f15d3997ad490ca45189886e0136fd.png
[06732df9cfc7494bb2e149dfb292be79.png]: https://img-blog.csdnimg.cn/06732df9cfc7494bb2e149dfb292be79.png
[95038bbb94564bec98057a714d8ef0a3.png]: https://img-blog.csdnimg.cn/95038bbb94564bec98057a714d8ef0a3.png
[adf401612b4142808e7b21ce71bd19e1.png]: https://img-blog.csdnimg.cn/adf401612b4142808e7b21ce71bd19e1.png
[9417a76c31fa42988f4f95a6a344d4c9.png]: https://img-blog.csdnimg.cn/9417a76c31fa42988f4f95a6a344d4c9.png