Question

我正在尝试修改此库：https://github.com/Shinelw/ColorArcProgressBar

这就是我到目前为止所做的，没有紫色圆圈指示： arc progress bar

我的问题是：如何使紫色圆圈与进度一起制作动画（如图所示）？

在扩展View的ColorArcProgressBar类中，在onDraw方法中，这是绘制进度的方式：canvas.drawArc(bgRect, startAngle, currentAngle, false, progressPaint);

，动画

private void setAnimation(float last, float current, int length) {
    progressAnimator = ValueAnimator.ofFloat(last, current);
    progressAnimator.setDuration(length);
    progressAnimator.setTarget(currentAngle);
    progressAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            currentAngle = (float) animation.getAnimatedValue();
            curValues = currentAngle / k;
        }
    });
    progressAnimator.start();

}

我设法将紫色bitmat放在进度的开头，如下所示：

canvas.drawBitmap(mIcon,bgRect.left+mIcon.getWidth()/2 +30, bgRect.bottom - 40 +mIcon.getHeight()/2 , null);

现在，我如何像进步那样沿弧线设置动画？

Answer 1

没试过，如果不对，那就近了......

    // since currentAngle is a "sweep" angle, the 
    // final angle should be current + start
    float thetaD = startAngle + currentAngle;
    if (thetaD > 360F) {
        thetaD -= 360F;
    }

    // convert degrees to radians
    float theta = (float) Math.toRadians(thetaD);

    // polar to Cartesian coordinates
    float x = (float) (Math.cos(theta) * bgRect.width() / 2) + bgRect.centerX();
    float y = (float) (Math.sin(theta) * bgRect.height() / 2) + bgRect.centerY();

    canvas.drawBitmap(mIcon, x - mIcon.getWidth()/2, y - mIcon.getHeight()/2 , null);

这有助于你的位图是圆形的，所以我们不必旋转它......

如何与Circle ProgressBar一起旋转位图？

1 个答案: