Cómo agregar animaciones de transparencia y traducción a una imagen usando programación de Android

La función más poderosa de Drawable es: mostrar Animación. El SDK de Android presenta 2 tipos de animación: Animación interpolada (animación de degradado): los efectos de animación se generan realizando continuamente transformaciones de imágenes (traducción, escala, rotación) en los objetos de la escena. Animación de fotogramas (animación de fotogramas): reproducción de imágenes prefabricadas. secuencia, similar a reproducir una película

Antes de usar Animación, primero aprendemos cómo definir Animación, lo cual nos será de gran ayuda cuando usemos Animación. La animación se define en formato XML y los archivos XML definidos se almacenan en res/anim. Dado que las definiciones y usos de Tween Animation y Frame Animation son muy diferentes, las presentaremos por separado. En esta sección, presentaremos la definición y el uso de Tween Animation, y en las secciones siguientes, presentaremos Frame Animation en detalle. La animación interpolación se introduce de acuerdo con la estructura del nodo principal, el nodo secundario y los atributos del documento XML, que consta de 4 tipos: Alfa: efecto de animación de transparencia de degradado Escala: efecto de animación de expansión y contracción del tamaño del degradado Traducir: efecto de animación de movimiento de posición de transición de pantalla Girar: movimiento de posición de transición de pantalla Efectos de animación

Antes de presentar los cuatro tipos anteriores, primero introduzcamos los diferentes atributos de nodo de Tween Animation.

Tabla 1

Atributo [Tipo] Función

El atributo Duración[long] es la duración de la animación en milisegundos

fillAfter [booleano] Cuando se establece en verdadero, la transformación de la animación se aplica después de que finaliza la animación

fillBefore[boolean] Cuando se establece en verdadero, la transformación de la animación se aplica antes de que comience la animación

interpolador

Existen algunos interpoladores comunes para especificar una animación

accelerate_decelerate_interpolator

Interpolador de animación de aceleración-desaceleración

accelerate_interpolator

Acelerar - insertador de animación

decelerate_interpolator

Desacelerar - insertador de animación

Otros pertenecen a efectos de animación específicos

repeatCount[int] El número de repeticiones de la animación

repeatMode[String] define el comportamiento repetido 1: "reiniciar" 2: "reverse" por ejemplo: android:repeatMode="reverse"

startOffset[long] intervalo de tiempo entre animaciones, cuánto tiempo ha pasado desde que se detuvo la última animación para comenzar a ejecutar la siguiente animación

zAdjustment[int] define el cambio del Orden Z de la animación 0: Mantener el Orden Z sin cambios

zAjuste[int] p>

1: Mantener en el nivel superior

-1: Mantener en el nivel inferior

Después de leer los nodos anteriores, Todo el mundo quiere empezar a definir animaciones. A continuación, comenzaremos a presentar los elementos de nodo únicos de cada uno de los cuatro tipos con ejemplos específicos.

Tabla 2

Descripción de la función del nodo XML

efecto de animación de transparencia de gradiente alfa

android: fromAlpha=”0.1″

android:toAlpha=”1.0″

android:duration=”3000″ />

El atributo fromAlpha es la transparencia cuando el comienza la animación

0.0 significa completamente transparente

1.0 significa completamente opaco

Los valores anteriores son números de tipo de datos flotantes entre 0.0-1.0

El atributo toAlpha es la transparencia al final de la animación

Tabla 3

efecto de animación de escala de tamaño de gradiente

android:interpolator= “ @android:anim/accelerate_decelerate_interpolator”

android:fromXScale=”0.0″

android:toXScale=”1.4″

android:fromYScale=”0.0″

android:toYScale="1.4″

android:pivotX="50%"

android:pivotY="50% "

android:fillAfter=”false”

android:startOffset=”700”

android:duration=”700″

android:repeatCount=”10″ />

fromXScale[float] fromYScale[float] es cuando comienza la animación, el tamaño de escala en las coordenadas X e Y 0.0 significa reducir a ninguno

1.0 significa normal sin escala

Un valor menor que 1.0 significa contracción

Un valor mayor que 1.0 significa ampliación

aXScale [flotante]

toYScale[float] es cuando finaliza la animación, X, el tamaño de estiramiento en la coordenada Y

pivotX[float]

pivotY[float] es la posición inicial de la animación relativa a las coordenadas X e Y del objeto Descripción del valor de propiedad: de 0%-100 %, 50% es la posición del punto medio en las coordenadas X o Y del objeto

Tabla 4

traducir efecto de animación de movimiento de posición de transición de pantalla

android:fromXDelta=”30″

android:toXDelta=”-80″

android:fromYDelta=”30″

android:toYDelta=”300″

android:duration=”2000″ />

fromXDelta

toXDelta es la coordenada X al inicio y al final de la animación. La posición en

fromYDelta

toYDelta es la posición en la coordenada Y al principio. de la animación y finalizar

Tabla 5

girar transferencia de pantalla Efecto de animación de rotación

android:interpolator=”@android :anim/accelerate_decelerate_interpolator”

android:fromDegrees=”0″

android:to

Grados=”+350″

android:pivotX=”50%”

android:pivotY=”50%”

android:duration=”3000″ />

fromDegrees es la descripción del ángulo del objeto al comienzo de la animación

Cuando el ángulo es un número negativo, significa rotación en sentido antihorario

Cuando el ángulo es un número positivo: indica rotación en el sentido de las agujas del reloj

(Negativo de——a número positivo: rotación en el sentido de las agujas del reloj)

(Negativo de——a número negativo: rotación en sentido antihorario)

(número positivo de——al número positivo: rotación en el sentido de las agujas del reloj)

(número positivo de——al número negativo: rotación en el sentido contrario a las agujas del reloj)

El atributo toDegrees es el rotación del objeto cuando finaliza la animación El ángulo puede ser mayor a 360 grados

pivotX

pivotY es la posición inicial de las coordenadas X e Y de la animación con respecto al objeto. Nota: Los dos valores de atributos anteriores oscilan entre 0% y 100%.

50% es la posición del punto medio del objeto en las coordenadas de dirección X o Y

Después de aprender. Definición de Tween Animation de acuerdo con la descripción anterior, tendrá una comprensión detallada de Tween Animation. Aprendamos sobre el paquete de animación del SDK de Android (android.view.animation), que proporciona todas las clases para operar Tween Animation.

El SDK de Android proporciona una clase base: Animación, que contiene una gran cantidad de funciones set/getXXXX() para configurar y leer las propiedades de Animación, que son las diversas propiedades que se muestran en la Tabla 1 anterior. Tween Animation consta de 4 tipos: alfa, escala, traducción y rotación. Las clases correspondientes se proporcionan en el SDK de Android. La clase Animation deriva AlphaAnimation, ScaleAnimation, TranslateAnimation y RotateAnimation para implementar animaciones como traducción, rotación y cambio de valores Alpha. respectivamente.Cada subclase agrega sus propios atributos únicos a la clase principal. Echemos un vistazo a los constructores de estas clases para ver si son exactamente iguales a los atributos que definimos en las Tablas 2, 3, 4 y 5.

Después de comprender la definición de Tween Animation y tener algunos conocimientos básicos de android.view.animation, comenzaremos a presentar cómo usar Tween Animation. El SDK de Android proporciona 2 métodos: 1. Leer animación directamente desde recursos XML 2. Utilizar el constructor de la subclase Animación para inicializar el objeto Animación.

Para el segundo método, sabrá cómo usarlo después de leer las descripciones de cada clase en el SDK de Android. La siguiente es una breve descripción de la lectura de animación de recursos XML. Según el proceso de desarrollo de la aplicación, se presenta todo el proceso de uso. , de la siguiente manera:

1. Cree un proyecto de Android;

2. Importe un recurso de imagen;

3. main.xml;

4. Cree una nueva carpeta en res y asígnele el nombre: anim, y defina el archivo XML de animación en esta carpeta.

5. ) para mostrar recursos de animación;

El código clave se analiza de la siguiente manera:

//ImageView en main.xml

ImageView spaceshipImage = (ImageView) findViewById( R.id.spaceshipImage );

//Cargar animación

Animación hyperspaceJumpAnimation =

AnimationUtils.loadAnimation(this, R.anim.hyperspace_jump);

//Utilice ImageView para mostrar animación

spaceshipImage.startAnimation(hyperspaceJumpAnimation);

Un breve análisis aquí es el siguiente: AnimationUtils proporciona funciones para cargar animaciones. a la función loadAnimation(), los demás van a Android. Aprendamos más sobre esto en el SDK. La llamada animación es una transformación gráfica del contenido de la vista;

Aplicación de animación en Android (2; )

La esencia de Tween Animation Resumen: Tween Animation logra efectos de animación al completar una serie de transformaciones gráficas (que incluyen traducción, escala, rotación y cambio de transparencia) en el contenido de la Vista. Específicamente, está predefinido un conjunto de instrucciones que especifican el tipo, el tiempo de activación y la duración de la transformación de gráficos. Estas instrucciones se pueden definir en archivos XML o código fuente. El programa ejecuta estas instrucciones a lo largo de la línea de tiempo para lograr efectos de animación.

Aquí debemos realizar un análisis en profundidad de dos preguntas: ¿Cómo controlar el tiempo de ejecución de la animación? El modo de ejecución de la animación.

¿Cómo controlar el funcionamiento de la animación?

Esta pregunta se refiere a la animación Tween mencionada en el artículo anterior. Supongo que todos todavía están confundidos acerca de qué es un interpolador y qué hace. Aquí hay una explicación detallada. Según la descripción del interpolador en el SDK de Android: el interpolador define la tasa de cambio de una animación (la tasa de cambio). Esto permite acelerar, desacelerar, repetir, etc. los efectos de animación básicos (alfa, escalar, trasladar, rotar).

En términos simples, el progreso de la animación está controlado por Interpolator. El interpolador define la velocidad de cambio de la animación, que puede lograr una velocidad uniforme, aceleración positiva, aceleración negativa, aceleración irregular, etc.

Interpolator es una clase base que encapsula los métodos únicos de todos los interpoladores. Tiene un solo método, getInterpolation (entrada flotante), que asigna un punto en la línea de tiempo a un multiplicador que se aplicará a las transformaciones de una animación. Android proporciona varias subclases de Interpolator que implementan diferentes curvas de velocidad, de la siguiente manera:

AccelerateDecelerateInterpolator cambia lentamente al comienzo y la introducción de la animación, y se acelera en el medio

AccelerateInterpolator La velocidad cambia lentamente al comienzo de la animación y luego comienza a acelerar

CycleInterpolator La animación se repite un número específico de veces y la velocidad cambia a lo largo de la curva sinusoidal

DecelerateInterpolator La velocidad cambia a el comienzo de la animación es más lento y luego comienza a disminuir

LinearInterpolator cambia a una velocidad uniforme durante la animación

Para LinearInterpolator, la tasa de cambio es una constante, es decir, f ( x) = x.

public float getInterpolation(float input) {

return input;

}

Varias otras subclases de Interpolator También se siguen algoritmos específicos sobre la tasa de cambio. También puede definir su propia subclase de Interpolador para lograr efectos físicos como parábola y caída libre.

Modos de ejecución de animación

Hay dos modos de ejecución de animación: Modo exclusivo, es decir, el hilo principal del programa entra en un bucle y actualiza continuamente la pantalla de acuerdo con las instrucciones de la animación hasta la animación finaliza; modo de interrupción, es decir, un solo hilo cuenta el tiempo y envía notificaciones al hilo principal a ciertos intervalos, y el hilo principal actualiza la pantalla después de recibir la notificación;

Explicación adicional: Transformación clase

La transformación registra la matriz afín Matriz. Cada vez que se activa la animación, se realizará una operación en la matriz original. El mapa de bits de la Vista se puede multiplicar por esta matriz para implementar la operación correspondiente (rotación). , traducción, escalado, etc.). La clase Transformación encapsula la matriz y el valor alfa. Tiene dos miembros importantes, uno es mMatrix y el otro es mAlpha. El diagrama de clases de Transformación es el siguiente:

Descripción resumida

La transformación gráfica se implementa mediante matrices afines. La transformación gráfica es un conocimiento básico en gráficos. En pocas palabras, cada transformación es una operación matricial. En Android, la clase Canvas contiene la matriz actual. Cuando se llama a Canvas.drawBitmap (bmp, x, y, Paint) para dibujar, Android primero realizará una operación matricial en bmp y luego mostrará el resultado de la operación en Canvas. De esta manera, los programadores solo necesitan modificar constantemente la matriz Canvas y actualizar la pantalla, y los objetos en la Vista continuarán sufriendo transformaciones gráficas, formando así animación.

Aplicación de animación en Android (3)

Presentamos Tween Animamation en detalle antes. En esta sección presentaré otra animación Frame Animation. Como se mencionó anteriormente, Frame Animation reproduce secuencialmente imágenes prediseñadas, similar a las películas.

A diferencia del paquete de animación, el SDK de Android proporciona otra clase AnimationDrawable para definir y usar Frame Animation.

La animación de cuadros se puede definir en un recurso XML (o almacenarse en la carpeta res/anim), o se puede definir usando la API en AnimationDrawable. Dado que Tween Animation es muy diferente de Frame Animation, el formato de la definición XML también es completamente diferente. El formato es: primero, el nodo raíz de la lista de animación El nodo raíz de la lista de animación contiene varios subnodos de elementos. El nodo define un cuadro de animación: el recurso dibujable del cuadro actual y la duración del cuadro actual. Los elementos del nodo se describen a continuación:

Descripción del atributo XML

drawable El recurso dibujable al que hace referencia el fotograma actual

duración El tiempo (en milisegundos) que se muestra el fotograma actual)

oneshot Si es verdadero, significa que la animación solo se reproducirá una vez y se detendrá en el último fotograma. Si se establece en falso, significa que la animación se reproducirá en. un bucle.

variablePadding Si es verdadero, permite que el relleno del elemento de diseño cambie según el estado actual seleccionado.

visible especifica la visibilidad inicial del elemento de diseño; el valor predeterminado es flase; >

El siguiente es un ejemplo XML específico para definir una animación cuadro por cuadro:

android:oneshot=”true”>

El XML anterior define una animación de cuadro, que contiene 3 cuadros de animación. Tres imágenes en el dibujable se aplican a los 3 cuadros de animación: rocket_thrust1, rocket_thrust2, rocket_thrust3, cada cuadro. La animación dura 200 milisegundos.

Luego guardamos el XML anterior en la carpeta res/anim/, le asignamos el nombre rocket_thrust.xml y mostramos el código de animación de la siguiente manera: Agrega el siguiente código a OnCreate():

ImageView rocketImage = (ImageView) findViewById(R.id.rocket_image);

rocketImage.setBackgroundResource(R.anim.rocket_thrust);

rocketAnimation = (AnimationDrawable) rocketImage.getBackground ( );

Finalmente, necesitas agregar el código para iniciar la animación:

public boolean onTouchEvent(MotionEvent event) {

if (event.getAction () == MotionEvent .ACTION_DOWN) {

rocketAnimation.start();

devuelve verdadero;

}

devuelve super. onTouchEvent(event);

}

Probablemente todos deberían conocer el resultado de ejecutar el código (se reproducen tres imágenes una vez en orden), pero hay que enfatizar una cosa: el código. que inicia la animación Frame Animation rocketAnimation.start(); no se puede usar en OnCreate(), porque AnimationDrawable no está completamente vinculado a ImageView en OnCreate(). Cuando inicias la animación en OnCreate(), solo puedes ver el. primera imagen.

A continuación, lea la introducción a AnimationDrawable en el SDK de Android para obtener una comprensión sencilla:

AnimationDrawable

Obtener y configurar propiedades de animación

int getDuration() Obtiene la duración de la animación

int getNumberOfFrames() Obtiene el número de fotogramas de la animación

boolean isOneShot()

Void setOneShot(boolean oneshot)

Obtener atributos de un solo disparo

Establecer atributos de un solo disparo

void inflate(Resurce r,XmlPullParser p,

AttributeSet attrs)

Agregar y obtener animación de cuadro

Drawable getFrame(int index) Obtener el recurso Drawable de un determinado cuadro

void addFrame(Drawable frame,int length) Agregar cuadro ( recurso) a la animación actual, duración)

Control de animación

void start() inicia la animación

void run() no se puede llamar directamente desde el exterior world, use start() en su lugar

p>

boolean isRunning() Si la animación actual se está ejecutando

void stop() Detiene la animación actual

Descripción resumida

Definición y uso de animación de cuadros. Es relativamente simple y se presenta en detalle aquí. Para un estudio más profundo, es mejor ir al SDK de Android para obtener más información. El SDK de Android también contiene muchos programas de ejemplo en este ámbito.

Nota: El atributo interpolador no está definido en el archivo XML de Frame Animation porque definirlo no tiene sentido.