自定义控件——通过持续绘制实现简单动画——自定义饼图动画

一时失言乱红尘 2023-09-28 23:01 14阅读 0赞

**自定义饼图动画**

自定义饼图动画的具体实现步骤说明如下：

(1)在Java代码的widget目录下创建PieAnimation.java，该类继承了视图基类View，并重写onDraw方法，在onDraw方法中使用画笔对象绘制指定角度的扇形。

(2)在PieAnimation内部定义一个视图刷新任务，每次刷新操作都增大一点绘图角度，然后调用invalidate方法刷新视图界面。

(3)给PieAnimation补充一个start方法，用于控制饼图动画的播放操作。

![8a39dc4fed70cdbb61805292542980ba.png][]

===============================================================================================================

布局：

![c6fd076986164d8d21c7cca331694e40.png][]

主代码：

package com.example.myapplication;
    
    import androidx.appcompat.app.AppCompatActivity;
    import android.os.Bundle;
    import android.view.View;
    import com.example.myapplication.widget.PieAnimation;
    
    public class MainActivity extends AppCompatActivity implements View.OnClickListener
    {
        private PieAnimation pa_circle; // 声明一个饼图动画对象
    
        @Override
        protected void onCreate(Bundle savedInstanceState)
        {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
    
            // 从布局文件中获取名叫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(); // 不在播放，则开始播放饼图动画
                }
            }
        }
    }

![898ab4c67c4386431c101f2f5cdfd734.png][]

PieAnimation

package com.example.myapplication.widget;
    
    import android.annotation.SuppressLint;
    import android.content.Context;
    import android.graphics.Canvas;
    import android.graphics.Color;
    import android.graphics.Paint;
    import android.graphics.RectF;
    import android.os.Handler;
    import android.os.Looper;
    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(Looper.myLooper()); // 声明一个处理器对象
    
        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);
            }
        }
    
    }

![c373f4243e5cf4a59c8054651f745af2.png][]

![bbadca3d31b42055de8c47ef7a2a6827.png][]

![2b9fdf05a1bb43a0665270f4d5cf7f31.png][]

![2599d4d6e74118d84c5f5af0d2c75e5e.png][]

![9ca56daa54703ff5dbd0e4150090005a.png][]

![6f776bcf9a68c8ea83b3b5371872da5a.png][]

![06e2a05cf8f171b522a2398be7e94d4d.png][]

[8a39dc4fed70cdbb61805292542980ba.png]: https://img-blog.csdnimg.cn/img_convert/8a39dc4fed70cdbb61805292542980ba.png
[c6fd076986164d8d21c7cca331694e40.png]: https://img-blog.csdnimg.cn/img_convert/c6fd076986164d8d21c7cca331694e40.png
[898ab4c67c4386431c101f2f5cdfd734.png]: https://img-blog.csdnimg.cn/img_convert/898ab4c67c4386431c101f2f5cdfd734.png
[c373f4243e5cf4a59c8054651f745af2.png]: https://img-blog.csdnimg.cn/img_convert/c373f4243e5cf4a59c8054651f745af2.png
[bbadca3d31b42055de8c47ef7a2a6827.png]: https://img-blog.csdnimg.cn/img_convert/bbadca3d31b42055de8c47ef7a2a6827.png
[2b9fdf05a1bb43a0665270f4d5cf7f31.png]: https://img-blog.csdnimg.cn/img_convert/2b9fdf05a1bb43a0665270f4d5cf7f31.png
[2599d4d6e74118d84c5f5af0d2c75e5e.png]: https://img-blog.csdnimg.cn/img_convert/2599d4d6e74118d84c5f5af0d2c75e5e.png
[9ca56daa54703ff5dbd0e4150090005a.png]: https://img-blog.csdnimg.cn/img_convert/9ca56daa54703ff5dbd0e4150090005a.png
[6f776bcf9a68c8ea83b3b5371872da5a.png]: https://img-blog.csdnimg.cn/img_convert/6f776bcf9a68c8ea83b3b5371872da5a.png
[06e2a05cf8f171b522a2398be7e94d4d.png]: https://img-blog.csdnimg.cn/img_convert/06e2a05cf8f171b522a2398be7e94d4d.png