2012-04-12 9 views
5

Objetivo Me gustaría implementar un temporizador de cuenta atrás que simplemente desplaza los números (no gráficos) de izquierda a derecha.¿Cómo se implementa un temporizador de cuenta regresiva de desplazamiento horizontal?

Efecto El efecto se vería como el número se acerca por la izquierda, se ralentiza hacia el centro, y luego se acerca a la derecha.

Notas Desde ya estoy usando un TimerTask para ejecutar código cada segundo, podría utilizar eso para desencadenar el siguiente número para desplazarse a través de la Vista de Texto horizontal de desplazamiento.

¿Podría esto solo implementarse como una vista de texto dentro de una vista de desplazamiento? Buscando una muestra de código para comenzar con ....

Respuesta

9

Usar animaciones sería la solución más simple. Puede crear uno propio o tratar de combinar múltiples TranslateAnimations y ScaleAnimations.

Esto significaría poner cada número en su propio TextView en lugar de usar una vista de desplazamiento.

Luego puede controlar la aceleración en el medio con Interpolator. Los interpoladores son la forma en que Android maneja la aceleración. Es probable que desee el AccelerateDecelerateInterpolator para el efecto de aceleración/ralentización.

Puede usar AnimationSet para aplicar múltiples animaciones a la misma Vista. Averiguar cómo armar un buen AnimationSet será la parte más desafiante del proyecto. Asegúrese de prestar atención a la propiedad "llenar". De hecho, después de jugar un poco, creo que una animación personalizada es más simple que usar las ya hechas.

Puede tenedor my GitHub project que implementa una versión muy simple de esto. 17 de abril y antes utilicé varias animaciones pre hechas. Si miras la versión más reciente, verás la animación personalizada.

El tiempo para cada animación se ocupa de sí mismo después de establecer la duración de una animación. A Handler llama al siguiente número después de que termine el anterior. Creo que es un poco más ordenado que tener que llamar a una función cada X segundos para actualizar todo.

El contorno de la funcionalidad:

  • una actividad (CountDownActivity.java) sobre todo lo ve.
    • La disposición de la actividad XML tiene un botón que se utiliza para iniciar la cuenta regresiva.
    • Una vez que se inicia la cuenta regresiva, el botón desaparece. Vuelve a aparecer cuando finaliza la cuenta regresiva.
  • La actividad contiene una Handler (MotionHandler.java). El Handler controla el movimiento y el tiempo de los números.
    • El Handler utiliza un AnimationSet para mover los números
      • El AnimationSet es una aprobada en dependencia
        • Esto es para flexibilidad. Basta con pasar en un AnimationSet diferente para cambiar cómo los números se mueven
        • El AnimationSet está hecho de cuatro animaciones una animación personalizada (véase más adelante)
    • El AnimationSet utiliza un compartida AccelerateDecelerateInterpolator, que parece funcionar decentemente. Hay otras opciones, incluida la suya.
    • El controlador utiliza un delayed message para iniciar el siguiente número
    • El controlador notifica a la actividad cuando la cuenta atrás se realiza mediante una escucha personalizado (MotionHandler >> CountdownListener)
  • girar el dispositivo reiniciará la cuenta atrás.

Nota - previamente estaba usando cuatro animaciones ya hechas en un conjunto de animación, he editado para incluir una sola animación personalizada ... Puede ajustar su algoritmo a su gusto.

Esta animación personalizada utiliza Cycloid para que los números parezcan más grandes y más pequeños.

/** 
* 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); 
    } 
} 
+0

Peter, ¡gracias por tomarse el tiempo para responder mi pregunta! –

+0

@SomeoneSomewhere - fue divertido. ¡Espero eso ayude! –

0

Easing le ayudará a controlar la velocidad.

Cuestiones relacionadas