Animacións

De Manuais Informática - IES San Clemente.
Ir a la navegación Ir a la búsqueda

Introdución

  • Android ten 2 mecanismos para crear animacións
    • Animación de propiedades: Crea unha animación modificando os valores das propiedades dos obxectos por un período de tempo.
    • Animación de vistas: que se divide en dous tipos:
      • Animacións Tween /Animation': Crea unha animación de rotación, traslación, zoom, trasnparencia (alpha) sobre calquera vista.
      • Animación Frame /AnimationDrawable: crea unha animación amosando unha secuencia de imaxes. Crease un obxecto da clase: .


  • Usaremos estes dous últimos tipos.


Caso práctico

  • Comezamos creando unha actividade: U3_30_Animacion
  • A imaxe amosa as animacións que se crearán:

Android 2013 U3 30 Animacion 02.jpg

  • Ao iniciar a aplicación, o fondo é branco e no espazo de tempo vaise tornando en vermello.
  • A imaxe da terra xirando como secuencia das seguintes imaxes.
  • No seguinte ficheiro pódense descargara as imaxes e colocalas en /res/drawable do proxecto.

Media:Drawable_terra.zip

O XML do Layout

 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     xmlns:tools="http://schemas.android.com/tools"
 3     android:id="@+id/layout_terra"
 4     android:layout_width="match_parent"
 5     android:layout_height="match_parent"
 6     android:background="#F00"
 7     android:gravity="center"
 8     android:orientation="vertical" >
 9 
10     <TextView
11         android:layout_width="wrap_content"
12         android:layout_height="wrap_content"
13         android:text="Animación"
14         android:textColor="#FFF"
15         android:textSize="22sp" />
16 
17     <ImageView
18         android:id="@+id/imgvwTerra"
19         android:layout_width="wrap_content"
20         android:layout_height="wrap_content"
21         android:contentDescription="Animación da terra" />
22 
23     <Button
24         android:layout_width="wrap_content"
25         android:layout_height="wrap_content"
26         android:onClick="onPararIniciarClick"
27         android:text="Parar / Iniciar"
28         android:textColor="#FFF" />
29 
30 </LinearLayout>
  • Liñas 17-21: Vista onde se vai amosar a animación da terra


Animación Tween

  • Unha animación Tween define os seus efectos: transicións, rotacións, fading, movemento, zoom sobre un gráfico nun ficheiro XML
  • Localización do ficheiro: /res/anim/filename.xml
  • O nome do ficheiro será usado como ID do recurso.


  • Neste caso o recurso chámase:/res/anim/animacion_aparece_fundido.xml
 1 <?xml version="1.0" encoding="utf-8"?>
 2 <set xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:shareInterpolator="true"
 4      >
 5    <alpha 
 6        android:fromAlpha="0.0"
 7        android:toAlpha="1.0"
 8        android:duration="6000"
 9    />
10    
11 </set>
  • Elementos do ficheiro:
    • set: E un contedor para albergar outros elementos de animación (<alpha>, <scale>, <translate>, <rotate>)
    • alpha:Animación fade-in/fade-out (fundido). Usa a transparencia aplha para indicar dende que nivel de transparencia se parte e ata cal se chega e canto tempo debe durar o proceso.
    • No noso caso partimos dunha transparencia total (0.0) a unha opacidade total (1.0). O proceso de fundido dura 6 segundos.


  • Ao iniciar a aplicación o Layout aprece blanco (transparente) e vaise funndindo até chegar a vermello (Opaco) que é o color co que se definiu o Layout.
  • Logo no código aplicarase a animación e cargarase.

Para consultar máis elementos dunha animación Tween:

Animación frame

  • A animación defínese nun XML que amosa a secuencia de imaxes a amosar nunha orde (Como unha película)
  • Localización do ficheiro:/res/drawable/filename.xml'
  • O nome do ficheiro será usado como ID do recurso.


  • Neste caso o ID do recurso é: /res/drawable/animacion_terra.xml
 1 <?xml version="1.0" encoding="utf-8"?>
 2 <animation-list xmlns:android="http://schemas.android.com/apk/res/android" 
 3     android:oneshot="false"
 4     >
 5     <item android:drawable="@drawable/terra1" android:duration="250"/>
 6     <item android:drawable="@drawable/terra2" android:duration="250"/>
 7     <item android:drawable="@drawable/terra3" android:duration="250"/>
 8     <item android:drawable="@drawable/terra4" android:duration="250"/>
 9     <item android:drawable="@drawable/terra5" android:duration="250"/>
10     <item android:drawable="@drawable/terra6" android:duration="250"/>
11     <item android:drawable="@drawable/terra7" android:duration="250"/>
12     <item android:drawable="@drawable/terra8" android:duration="250"/>
13     <item android:drawable="@drawable/terra9" android:duration="250"/>
14     <item android:drawable="@drawable/terra10" android:duration="250"/>
15     <item android:drawable="@drawable/terra11" android:duration="250"/>
16     <item android:drawable="@drawable/terra12" android:duration="250"/>
17 </animation-list>
  • Elementos:
    • <animation-list>: é o elemento raíz e conten elementos <item>
      • android:oneshot: Booleano. "true" para realizar a animación unha soa vez; "false" para estar nun bucle infinito.
    • <item>: Indica a secuencia de imaxe a cargar e a duración en milisegundos.
  • A animación será cargada no código.

O código Java

 1 package com.example.u3_30_animacion;
 2 
 3 import android.app.Activity;
 4 import android.graphics.drawable.AnimationDrawable;
 5 import android.os.Bundle;
 6 import android.view.Menu;
 7 import android.view.View;
 8 import android.view.animation.Animation;
 9 import android.view.animation.AnimationUtils;
10 import android.widget.ImageView;
11 
12 public class U3_30_Animacion extends Activity {
13 	AnimationDrawable ad;
14 
15 	@Override
16 	protected void onCreate(Bundle savedInstanceState) {
17 		super.onCreate(savedInstanceState);
18 		setContentView(R.layout.activity_u3_30__animacion);
19 		cargarAnimacions();
20 	}
21 
22 	private void cargarAnimacions() {
23                 //Tweek
24 		View pai = (View) findViewById(R.id.layout_terra);
25 		Animation fundido = AnimationUtils.loadAnimation(this, R.anim.animacion_aparece_fundido);
26 		pai.startAnimation(fundido);
27 
28 
29                 //Frame
30 		ImageView img = (ImageView) findViewById(R.id.imgvwTerra);
31 		img.setBackgroundResource(R.drawable.animacion_terra);
32 
33 		ad = (AnimationDrawable) img.getBackground();
34 		ad.start();
35 
36 
37 	}
38 
39 	public void onPararIniciarClick(View v) {
40 		if (ad.isRunning())
41 			ad.stop();
42 		else
43 			ad.start();
44 	}
45 
46 	@Override
47 	public boolean onCreateOptionsMenu(Menu menu) {
48 		// Inflate the menu; this adds items to the action bar if it is present.
49 		getMenuInflater().inflate(R.menu.u3_30__animacion, menu);
50 		return true;
51 	}
52 
53 }
  • Liñas 23-26: Cargamos os efectos da animación e aplicamos ese efecto (fundido) ao Layout.
  • Liñas 29-34: Cargamos a animación na vista ImageView (img) da activity e iniciamos a animación
  • Liña 40:Controlar se a animación esta ou non en marcha.





-- Ángel D. Fernández González e Carlos Carrión Álvarez -- (2013).