IndeterminateProgressbar解析-Part 4

IndeterminateProgressbar解析-Part 4

IndeterminateProgressBar 能在用户进行某项不定时长的耗时操作时提供绝佳的用户体验,之前我有教过大家怎么创建水平的 IndeterminateProgressBar,今天我就来教大家实现圆形的 IndeterminateProgressBar,这个控件将支持 API 11(Honeycomb)以上的设备。

在上一篇博文中,我们创建了一个自定义 Drawable - 它能绘制一段圆弧,并且能设置圆弧的起点和终点,以及完成圆弧的旋转。接下来我们要为该 Drawable 添加 ObjectAnimator,使得这些值能够随时间改变,以完成我们期望的动画。

在看代码之前,我需要指出的是:我并不喜欢创建一个工具类,然后在里面放一大堆静态方法 - 因为它们不代表具体的对象,那么在面向对象编程中也就不能拥有清晰的职责。但在这里我还是创建了一个工具类,将 Animator 的构建过程从 Drawable 中剥离,使代码更可读。

final class IndeterminateAnimatorFactory {
    private static final String START_ANGLE = "startAngle";
    private static final String END_ANGLE = "endAngle";
    private static final String ROTATION = "rotation";

    private static final int SWEEP_DURATION = 1333;
    private static final int ROTATION_DURATION = 6665;
    private static final float END_ANGLE_MAX = 360;
    private static final float START_ANGLE_MAX = END_ANGLE_MAX - 1;
    private static final int ROTATION_END_ANGLE = 719;

    private IndeterminateAnimatorFactory() {
        // NO-OP
    }

    public static Animator createIndeterminateDrawableAnimator(IndeterminateDrawable drawable) {
        AnimatorSet animatorSet = new AnimatorSet();
        Animator startAngleAnimator = createStartAngleAnimator(drawable);
        Animator sweepAngleAnimator = createSweepAngleAnimator(drawable);
        Animator rotationAnimator = createAnimationAnimator(drawable);
        animatorSet.playTogether(startAngleAnimator, sweepAngleAnimator, rotationAnimator);
        return animatorSet;
    }
    .
    .
    .
}

类的实现非常简单,就是创建三个 Animator,并把它们添加到 AnimatorSet 中,然后同时播放。

final class IndeterminateAnimatorFactory {
    .
    .
    .
    private static Animator createStartAngleAnimator(IndeterminateDrawable drawable) {
        ObjectAnimator animator = ObjectAnimator.ofFloat(drawable, START_ANGLE, 0f, START_ANGLE_MAX);
        animator.setDuration(SWEEP_DURATION);
        animator.setRepeatCount(ValueAnimator.INFINITE);
        animator.setRepeatMode(ValueAnimator.RESTART);
        animator.setInterpolator(createStartInterpolator());
        return animator;
    }

    private static Interpolator createStartInterpolator() {
        return new LinearInterpolator();
    }

    private static Animator createSweepAngleAnimator(IndeterminateDrawable drawable) {
        ObjectAnimator animator = ObjectAnimator.ofFloat(drawable, END_ANGLE, 0f, END_ANGLE_MAX);
        animator.setDuration(SWEEP_DURATION);
        animator.setRepeatCount(ValueAnimator.INFINITE);
        animator.setRepeatMode(ValueAnimator.RESTART);
        animator.setInterpolator(createEndInterpolator());
        return animator;
    }

    private static Interpolator createEndInterpolator() {
        return new LinearInterpolator();
    }
    .
    .
    .
}

这两个 Animator 会控制圆弧的起点和终点,SWEEP_DURATION 是从 AOSP 实现的代码中直接拷过来的。创建插值器的方法会在后面实现一些有趣的效果。

然后是展示旋转动画的 Animator:

final class IndeterminateAnimatorFactory {
    .
    .
    .
    private static Animator createAnimationAnimator(IndeterminateDrawable drawable) {
        ObjectAnimator rotateAnimator = ObjectAnimator.ofFloat(drawable, ROTATION, 0, ROTATION_END_ANGLE);
        rotateAnimator.setDuration(ROTATION_DURATION);
        rotateAnimator.setRepeatMode(ValueAnimator.RESTART);
        rotateAnimator.setRepeatCount(ValueAnimator.INFINITE);
        rotateAnimator.setInterpolator(new LinearInterpolator());
        return rotateAnimator;
    }
    .
    .
    .
}

ROTATION_DURATION 也是从 AOSP 实现中拷贝的,在这里我们使用了线性插值器,因为我们需要规则的旋转。

现在需要更新 IndeterminateDrawable 中的 createAnimator() 方法,用上这些 Animator:

public class IndeterminateDrawable extends Drawable implements Animatable {
    .
    .
    .
    private void createAnimator() {
        animator = IndeterminateAnimatorFactory.createIndeterminateDrawableAnimator(this);
    }
    .
    .
    .
}

运行的话就会看到一条旋转的线:

video

因为起点和终点使用相同的线性插值器,所以他们移动的步调一致。又由于方形覆盖块的起点和终点使用相同的值,所以终点会稍微绘制地比圆弧的长度要早一些。

这一点可以通过使用不同的插值器优化:

final class IndeterminateAnimatorFactory {
    .
    .
    .
    private static Interpolator createStartInterpolator() {
        return new DecelerateInterpolator();
    }
    .
    .
    .
    private static Interpolator createEndInterpolator() {
        return new AccelerateInterpolator();
    }
    .
    .
    .
}

现在起点会很快达到终点的位置,然后慢慢恢复,而终点则会慢慢开始,然后逐渐加速,直到到达终点,具体效果看视频:

video

看起来很像了,但我们还能优化!

如果我们把旋转动画去掉的话,能更好地感受刚刚的代码实现的效果,以及了解旋转动画的效果:

video

在这系列的最后一篇博文中我会使用更多的插值器,让大家了解插值器的魔力。

源码可以在这里下载


所属标签

无标签