如何实现水平滚动倒数计时器?

时间:2012-04-12 21:01:22

标签: android

目标 我想实现倒数计时器,它只是从左到右滚动数字(不是图形)。

效果 效果看起来像数字从左边放大,慢慢向中间放大,然后向右缩放。

备注 由于我已经使用TimerTask每秒执行代码,我可以用它来触发下一个数字来滚动水平滚动的textview。

这可以在scrollview中实现为textview吗?寻找代码示例以....开头。

2 个答案:

答案 0 :(得分:9)

使用动画将是最简单的解决方案。您可以自行创建或尝试合并多个 TranslateAnimations ScaleAnimations

这意味着将每个数字放入自己的TextView中,而不是使用滚动视图。

然后您可以使用 Interpolator 将加速度控制到中间位置。插值器是Android处理缓和的方式。你可能想要 AccelerateDecelerateInterpolator 来加速/减慢效果。

您可以使用 AnimationSet 将多个动画应用于同一个视图。弄清楚如何组合一个好的AnimationSet将是该项目中最具挑战性的部分。一定要注意“填充”属性。事实上,在玩了一下之后,我认为自定义动画比使用现成动画更简单。

你可以派出 my GitHub project 来实现一个非常简单的版本。 4月17日之前,我使用了多个预先制作的动画。如果您查看最新版本,您将看到自定义动画。

在为一个动画设置持续时间后,每个动画的时间都会自行处理。 Handler 会在上一个号码完成后调用下一个号码。我认为这比每隔X秒调用一次函数来更新所有内容要小一些。

功能概要:

  • 活动( CountDownActivity.java )会看到所有内容
    • Activitiy的布局XML有一个用于开始倒计时的按钮。
    • 倒计时开始后,按钮消失。倒计时结束后再次出现。
  • 活动包含 Handler MotionHandler.java )。 Handler 控制数字的移动和时间。
    • 处理程序使用 AnimationSet 来移动数字
      • AnimationSet是传入的依赖项
        • 这是为了灵活性。只需传入一个不同的AnimationSet来改变数字的移动方式
        • AnimationSet由四个动画组成一个自定义动画(见下文)
    • 动画集使用共享的 AccelerateDecelerateInterpolator ,这看起来效果不错。还有其他选择,包括自己编写。
    • 处理程序使用 delayed message 来启动下一个数字
    • 使用自定义收听者( MotionHandler >> CountdownListener)完成倒计时时,处理程序会通知活动
  • 旋转设备将重新开始倒计时。

注意 - 以前我在一个AnimationSet中使用了四个现成的动画,我编辑过只包含一个自定义动画......你可以根据自己的喜好调整它的算法。

此自定义动画使用 Cycloid 使数字显得越来越小。

/**
 * A custom animation to move and scale the numbers.
 * 
 */
public class NumberAnimation extends Animation
{
    final public static float MINIMUM = 3;
    private int mHorizontal;
    private int mScaling;

    public NumberAnimation(int horizontalMovement, int scaling)
    {
        mHorizontal = horizontalMovement;
        mScaling = scaling;
    }

    @Override
    protected void applyTransformation(float interpolatedTime, Transformation t)
    {
        // Cycloid repeats every 2pi - scale interpolatedTime to that
        double time = 2 * Math.PI * interpolatedTime;
        // Cycloid function
        float currentScale = (float) (mScaling * (1 - Math.cos(time))) + MINIMUM;
        Matrix matrix = t.getMatrix();
        matrix.preScale(currentScale, currentScale);
        matrix.postTranslate(mHorizontal * interpolatedTime, 0);
    }
}

答案 1 :(得分:0)

Easing可以帮助您控制速度。