美文网首页Android UI特效实现Android 自定义viewAndroid开发
Android 仿支付宝记账本动画ZFBCashBookView

Android 仿支付宝记账本动画ZFBCashBookView

作者: 超神的菠萝 | 来源:发表于2017-05-05 11:50 被阅读295次

效果图

ScreenGif.gif

github源码 小小记录一下。。

第一种方式实现会卡顿

ScreenGif.gif
    private Paint arcPaint;
    private int arcWidth = 100;
    private int width;

    private int[] arcs = {0, 130, 100, 70, 30, 30};
    private int[] colors = {0x44ff0000, 0x4400ff00, 0x440000ff, 0x440f000f, 0x44000f00};

    private int[] beginArray = new int[5];
    private int[] endArray = new int[5];
    private void init() {

        arcPaint = new Paint();
        arcPaint.setDither(true);
        arcPaint.setAntiAlias(true);
        arcPaint.setStyle(Paint.Style.STROKE);
        arcPaint.setStrokeWidth(arcWidth);

        startArcRange = new ArcRange(0f, 0f);

        for (int i = 0; i < arcs.length - 1; i++) {

            int beginAngel = 0, sweepAngel;

            for (int j = 0; j <= i; j++) {
                beginAngel += arcs[j];
            }

            sweepAngel = arcs[i + 1];
//采用了2个valueAnimator同时启动,不断更新起始点和sweep点,但是只在开始或者sweep点刷新 
            ValueAnimator valueAnimatorBegin = ValueAnimator.ofInt(0, beginAngel);
            ValueAnimator valueAnimatorEnd = ValueAnimator.ofInt(0, sweepAngel);

            final int finalI1 = i;

            valueAnimatorBegin.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator valueAnimator) {

                    begin = (int) valueAnimator.getAnimatedValue();

                    beginArray[finalI1] = begin;

                    invalidate();
                }
            });

            valueAnimatorEnd.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator valueAnimator) {
                    end = (int) valueAnimator.getAnimatedValue();

                    endArray[finalI1] = end;
                }
            });

            AnimatorSet animatorSet = new AnimatorSet();
            animatorSet.playTogether(valueAnimatorBegin, valueAnimatorEnd);
            animatorSet.setDuration(2000);
            animatorSet.setInterpolator(new DecelerateInterpolator());
            animatorSet.start();
        }

    }
    @Override
    protected void onDraw(final Canvas canvas) {
        super.onDraw(canvas);

        canvas.translate(width / 2, width / 2);

        for (int i = 0; i < arcs.length - 1; i++) {

            arcPaint.setColor(colors[i]);

            arcRangeList.get(i).getSweep(), false, arcPaint);

            canvas.drawArc(new RectF(-width / 2 + arcWidth / 2, -width / 2 + arcWidth / 2,
                    width / 2 - arcWidth / 2, width / 2 - arcWidth / 2), beginArray[i], endArray[i], false, arcPaint);

        }
    }

我觉得这种方式造成的卡顿可能是因为起始点和sweep点不同步造成的。。。因此换了ofObject的方式

后记

没有做到很标准很完美,点击和动画效果有所欠缺,时间不是很够,如果后期需要的话可能会一边学习一边完善。

相关文章

网友评论

    本文标题:Android 仿支付宝记账本动画ZFBCashBookView

    本文链接:https://www.haomeiwen.com/subject/fgvrtxtx.html