example - layout animation android

Cómo animar la traducción de una vista

Question

Al primer clic de un botón, quiero deslizar una View largo del eje x (digamos 200 píxeles a la derecha). Y en la segunda pulsación del botón, quiero deslizar la View hacia atrás a lo largo del eje x a su posición original.

El View.setTranslationX(float) salta la vista a las ubicaciones horizontales de destino con llamadas myView.setTranslationX(200); y myView.setTranslationX(0); respectivamente. ¿Alguien sabe cómo puedo deslizar la View a las ubicaciones horizontales de destino?

Nota 1: una TranslateAnimation no es buena, ya que en realidad no mueve la View pero solo presenta la ilusión de que se mueve.

Nota 2: En el momento de formular la pregunta, no me di cuenta de que los setTranslationX(float) y setTranslationY(float) se introdujeron a partir del nivel 11 de API. Si está apuntando a Honeycomb (nivel 11 de API) hacia arriba, entonces Gautam La respuesta de K será suficiente. De lo contrario, vea mi respuesta para una solución sugerida.

Answer 1

Este me ha dejado perplejo durante algunos días (trabajando antes del Ice Cream Sandwich), ¡pero creo que finalmente llegué allí! (gracias a Gautam K y Mike Israel por los contactos) Lo que hice al final fue extender mi View (un FrameLayout ) para comenzar a traducir las animaciones derecha / izquierda según sea necesario y escuchar el final de las animaciones para reubicarme mi FrameLayout derecha / izquierda según corresponda, de la siguiente manera:

public class SlidingFrameLayout extends FrameLayout
{
  private final int durationMilliseconds = 1000;
  private final int displacementPixels = 200;

  private boolean isInOriginalPosition = true;
  private boolean isSliding = false;

  public SlidingFrameLayout(Context context)
  {
    super(context);
  }

  public SlidingFrameLayout(Context context, AttributeSet attrs)
  {
    super(context, attrs);
  }

  public SlidingFrameLayout(Context context, AttributeSet attrs, int defStyle)
  {
    super(context, attrs, defStyle);
  }

  @Override
  protected void onAnimationEnd()
  {
    super.onAnimationEnd();

    if (isInOriginalPosition)
      offsetLeftAndRight(displacementPixels);
    else
      offsetLeftAndRight(-displacementPixels);

    isSliding = false;
    isInOriginalPosition = !isInOriginalPosition;
  }

  @Override
  protected void onLayout(boolean changed, int left, int top, int right, int bottom)
  {
    super.onLayout(changed, left, top, right, bottom);

    // need this since otherwise this View jumps back to its original position
    // ignoring its displacement
    // when (re-)doing layout, e.g. when a fragment transaction is committed
    if (changed && !isInOriginalPosition)
      offsetLeftAndRight(displacementPixels);
  }

  public void toggleSlide()
  {
    // check whether frame layout is already sliding
    if (isSliding)
      return; // ignore request to slide

    if (isInOriginalPosition)
      startAnimation(new SlideRightAnimation());
    else
      startAnimation(new SlideLeftAnimation());

    isSliding = true;
  }

  private class SlideRightAnimation extends TranslateAnimation
  {
    public SlideRightAnimation()
    {
      super(
          Animation.ABSOLUTE, 0,
          Animation.ABSOLUTE, displacementPixels,
          Animation.ABSOLUTE, 0,
          Animation.ABSOLUTE, 0);

      setDuration(durationMilliseconds);
      setFillAfter(false);
    }
  }

  private class SlideLeftAnimation extends TranslateAnimation
  {
    public SlideLeftAnimation()
    {
      super(
          Animation.ABSOLUTE, 0,
          Animation.ABSOLUTE, -displacementPixels,
          Animation.ABSOLUTE, 0,
          Animation.ABSOLUTE, 0);

      setDuration(durationMilliseconds);
      setFillAfter(false);
    }
  }
}

Y, por último, para deslizar el SlidingFrameLayout derecha / izquierda, todo lo que tienes que hacer es llamar al método SlidingFrameLayout.toggleSlide() . Por supuesto, puedes ajustar este SlidingFrameLayout para tus propósitos para deslizar un mayor número de píxeles, para deslizar por más tiempo, etc., pero esto debería ser suficiente para que comiences :)

Answer 2

Intente buscar en ObjectAnimator y su súper clase Value Animator

puede hacer algo como este ObjectAnimator anim = ObjectAnimator.ofFloat(this, "translationX", 0,200); y luego anim.start();

Use un valor boolean y alterne con 200,0 en el animador de objetos para retroceder

PD: puede usar el método setDuration para establecer cuánto tiempo debe durar la animación para completar

Editar:

Intente buscar en la biblioteca de soporte que proporciona compatibilidad con versiones anteriores.

Editar

Como @AdilHussain señaló, hay una biblioteca llamada nineoldandroids que se puede usar para el mismo propósito en los androides más antiguos.

Answer 3

Tuve un problema similar, TranslateAnimation realmente mueve la vista si llamas a setFillAfter ahora ( error de Android ). Tenía que hacer algo similar, así que dije: hey, utilicemos un oyente de animación y luego movamos todo a la ubicación correcta. Desafortunadamente, también hay un error en los oyentes de animación ( solución ). Así que creé mi propia clase de diseño de acuerdo con la solución en la solución y estaba listo para comenzar :)