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

Question

目标 我想实现一个从左到右滚动数字（不是图形）的倒数计时器。

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

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

难道这只是作为一个textview内滚动视图实现？寻找一个代码示例，以开始....

Answer 1

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

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

然后你可以控制加速到中间与Interpolator。插值器是Android如何处理缓动。您可能会想要加速/减速效果的AccelerateDecelerateInterpolator。

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

你可以叉my GitHub project它实现了一个非常简单的版本。 4月17日和之前我使用了多个预制动画。如果你看最新的版本，你会看到自定义动画。

设置一个动画的持续时间后，每个动画的时间将自行处理。 A Handler在前一个完成后调用下一个数字。我认为这比每隔X秒调用一个函数来更新所有内容稍微简单一些。

的功能概述：在

• 一个活动（CountDownActivity.java）看到的一切。
  
  • Activitiy的布局XML有一个用于开始倒计时的按钮。
  • 倒计时开始后，按钮消失。倒数完成后会再次出现。
• 该活动包含Handler（MotionHandler.java）。控制数字的移动和时间。
  • 该处理器采用了AnimationSet移动数字
    • 的AnimationSet是传递依赖
      • 这是灵活性。简单地传递在不同AnimationSet来改变电话号码如何移动
      • 的AnimationSet由 4动画 自定义动画的（见下文）
  • 的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); 
    } 
} 

Answer 2

Easing将帮助您控制速度。