自定义带有出场动画的饼状图

本文介绍如何创建带有出场动画的饼状图。通过三个步骤实现:绘制饼图文字和横线、处理扇形点击变换、动画效果。使用两个paint绘制扇形和文字,通过角度计算处理点击和变换,并通过自定义Animation实现动画效果。
摘要由CSDN通过智能技术生成

饼状图作为自定义view的入门,的确是很值得研究的。首先看一下效果:

效果图
饼状图

总体上概况思路,就是三个部分:

1.绘制饼图文字提示和横线

2.点击扇形变换大小的处理

3.扇形一定情况下连贯生成的动画。

总体上的解决方案就是:

1.用两个paint,一个用来绘制扇形,一个用来绘制文字和横线,这儿绘制扇形用到了两个外接矩形,一个是未点击的,一个是点击后的。

2.变换大小在这里面挺复杂的,首先要转换点击点的原点参照系为扇形图的原点,其次要通过点所处的象限,利用反正切三角函数计算出这个点对应的角度。最后通过角度加上二分查找,找到这个角度在起始角数组里面所处的位置,然后用大外接矩形绘制。

3.连贯动画通过自定义一个Animation,重写applyTransformation(float interpolatedTime,Transformation t)方法来实现,interpolatedTime代表动画执行的过度时间,也就是一种时间单位。在这个变化中通过它来慢慢的改变每个扇形的弧度,来实现渐变动画。超过了这个时间单位,则直接设置对应的弧度为其静止状态下的正常值。

下面,是这个饼图自定义view的代码,注释说的很想走心

//步骤分解:
//1,最内侧的扇形组成的圆形区域的绘制
//2,中间的短线段的绘制
//3,最外侧的文本的绘制
public class Pie extends View {

    private List<PieEntity> entities;
    private int width;
    private int height;
    private int radius;
    //这个画笔用于绘制弧形
    private Path path;
    private Paint paint;
    //这个画笔用于绘制横线和文字
    private Paint linePaint;

    private float totalValue;
    private float[] startAngles;
    //被点击的扇形的位置
    private int position = -1;

    public Pie(Context context) {
        this(context, null);
    }

    public Pie(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public Pie(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    //定义扇形的外接矩形
    private RectF rectF;
    private RectF touchRectF;

    private void init() {
        mAnimation = new PieChartAnimation();
        mAnimation.setDuration(ANIMATION_DURATION);
 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值