Únete a ⁠ #Android11: The Beta Launch Show el 3 de junio.

Animación de vista

Puedes usar el sistema de animación de vista para realizar animaciones interpoladas en vistas. La animación de interpolación calcula la animación con datos como el punto de inicio, el punto de fin, el tamaño, la rotación y otros aspectos comunes de una animación.

Una animación de interpolación puede realizar una serie de transformaciones simples (de posición, tamaño, rotación y transparencia) en el contenido de un objeto de vista. Por lo tanto, si tienes un objeto TextView, puedes mover, girar, aumentar o encoger el texto. Si tiene una imagen de fondo, esta se transformará junto con el texto. El animation package proporciona todas las clases que se usan en una animación de interpolación.

Una secuencia de instrucciones de animación define la animación de interpolación, que se establece mediante código XML o de Android. Al igual que con la definición de un diseño, se recomienda un archivo XML porque es más fácil de leer, reutilizar e intercambiar que la animación hard-coded. En el siguiente ejemplo, utilizamos XML. (Para obtener más información sobre cómo definir una animación en el código de la aplicación, en lugar de XML, consulta la clase AnimationSet y otras subclases Animation).

Las instrucciones de animación definen las transformaciones que quieres que ocurran, cuándo se producirán y cuánto tiempo deberían tardar en aplicarse. Las transformaciones pueden ser secuenciales o simultáneas; por ejemplo, puedes hacer que el contenido de un TextView se mueva de izquierda a derecha y luego gire 180 grados, o puedes hacer que el texto se mueva y gire de forma simultánea. Cada transformación requiere un conjunto de parámetros específicos para esa transformación (tamaño inicial y final para el cambio de tamaño, ángulo inicial y final para la rotación, etc.) y también un conjunto de parámetros comunes (por ejemplo, tiempo de inicio y duración). Para que varias transformaciones ocurran de manera simultánea, define el mismo tiempo de inicio; para que sean secuenciales, calcula el tiempo de inicio más la duración de la transformación anterior.

El archivo XML de la animación debe encontrarse en el directorio res/anim/ de tu proyecto de Android. El archivo debe tener un elemento raíz único: será un elemento único <alpha>, <scale>, <translate>, <rotate>, interpolador o <set> que contenga grupos de estos elementos (que pueden incluir otro <set>). De forma predeterminada, todas las instrucciones de animación se aplican de manera simultánea. Para que se produzcan de forma secuencial, debes especificar el atributo startOffset, como se muestra en el siguiente ejemplo.

El siguiente XML de una de las demostraciones de API se usa para extender un objeto de vista y luego girarlo y hacerlo rotar de forma simultánea.

    <set android:shareInterpolator="false">
        <scale
            android:interpolator="@android:anim/accelerate_decelerate_interpolator"
            android:fromXScale="1.0"
            android:toXScale="1.4"
            android:fromYScale="1.0"
            android:toYScale="0.6"
            android:pivotX="50%"
            android:pivotY="50%"
            android:fillAfter="false"
            android:duration="700" />
        <set android:interpolator="@android:anim/decelerate_interpolator">
            <scale
               android:fromXScale="1.4"
               android:toXScale="0.0"
               android:fromYScale="0.6"
               android:toYScale="0.0"
               android:pivotX="50%"
               android:pivotY="50%"
               android:startOffset="700"
               android:duration="400"
               android:fillBefore="false" />
            <rotate
               android:fromDegrees="0"
               android:toDegrees="-45"
               android:toYScale="0.0"
               android:pivotX="50%"
               android:pivotY="50%"
               android:startOffset="700"
               android:duration="400" />
        </set>
    </set>
    

Las coordenadas de la pantalla (que no se usan en este ejemplo) son (0.0) en la esquina superior izquierda y aumentan a medida que avanzas hacia abajo y hacia la derecha.

Algunos valores, como pivotX, se pueden especificar en relación con el objeto en sí o con el objeto principal. Asegúrate de usar el formato adecuado para lo que quieres ("50" para 50% en relación con el objeto principal o "50%" para 50% en relación con el objeto en sí).

Puedes determinar cómo se aplica una transformación a lo largo del tiempo si asignas un Interpolator. Android incluye varias subclases Interpolator que especifican diferentes curvas de velocidad; por ejemplo, AccelerateInterpolator le indica a una transformación que comience lentamente y acelere después. Cada una tiene un valor de atributo que se puede aplicar en el XML.

Con este XML guardado como hyperspace_jump.xml en el directorio res/anim/ del proyecto, el siguiente código hará referencia a él y lo aplicará a un objeto ImageView desde el diseño.

Kotlin

    AnimationUtils.loadAnimation(this, R.anim.hyperspace_jump).also { hyperspaceJumpAnimation ->
        findViewById<ImageView>(R.id.spaceshipImage).startAnimation(hyperspaceJumpAnimation)
    }
    

Java

    ImageView spaceshipImage = (ImageView) findViewById(R.id.spaceshipImage);
    Animation hyperspaceJumpAnimation = AnimationUtils.loadAnimation(this, R.anim.hyperspace_jump);
    spaceshipImage.startAnimation(hyperspaceJumpAnimation);
    

Como alternativa a startAnimation(), puedes definir un tiempo de inicio para la animación con Animation.setStartTime() y luego asignar la animación a la vista con View.setAnimation().

Para obtener más información sobre la sintaxis XML y las etiquetas y los atributos disponibles, consulta Recursos de animación.

Nota: Independientemente de cómo se pueda mover o cambiar el tamaño de la animación, los límites de la vista que contiene tu animación no se ajustarán automáticamente para adaptarse a ella. Aun así, se dibujará la animación más allá de los límites de su vista y no se recortará. Sin embargo, se producirá un recorte si la animación excede los límites de la vista principal.