美文网首页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