Android - Animations

L'animation est le processus de création de mouvement et de changement de forme

L'animation sous Android est possible de plusieurs manières. Dans ce chapitre, nous aborderons une manière simple et largement utilisée de créer une animation appelée animation interpolée.

Animation Tween

Tween Animation prend certains paramètres tels que la valeur de début, la valeur de fin, la taille, la durée, l'angle de rotation, etc. et exécute l'animation requise sur cet objet. Il peut être appliqué à tout type d'objet. Donc, pour l'utiliser, android nous a fourni une classe appelée Animation.

Afin de réaliser des animations sous Android, nous allons appeler une fonction statique loadAnimation () de la classe AnimationUtils. Nous allons recevoir le résultat dans une instance de Animation Object. Sa syntaxe est la suivante -

Animation animation = AnimationUtils.loadAnimation(getApplicationContext(), 
   R.anim.myanimation);

Notez le deuxième paramètre. C'est le nom du fichier xml de notre animation. Vous devez créer un nouveau dossier appeléanim sous le répertoire res et créez un fichier xml sous le dossier anim.

Cette classe d'animation a de nombreuses fonctions utiles qui sont répertoriées ci-dessous -

Sr. Non	Méthode et description
1	start() Cette méthode démarre l'animation.
2	setDuration(long duration) Cette méthode définit la durée d'une animation.
3	getDuration() Cette méthode obtient la durée définie par la méthode ci-dessus
4	end() Cette méthode met fin à l'animation.
5	cancel() Cette méthode annule l'animation.

Afin d'appliquer cette animation à un objet, nous appellerons simplement la méthode startAnimation () de l'objet. Sa syntaxe est -

ImageView image1 = (ImageView)findViewById(R.id.imageView1);
image.startAnimation(animation);

Exemple

L'exemple suivant illustre l'utilisation d'Animation dans Android. Vous pourrez choisir un type d'animation différent dans le menu et l'animation sélectionnée sera appliquée sur une imageView à l'écran.

Pour expérimenter cet exemple, vous devez l'exécuter sur un émulateur ou un appareil réel.

Pas	La description
1	Vous utiliserez l'IDE du studio Android pour créer une application Android et la nommerez My Application sous un package com.example.sairamkrishna.myapplication.
2	Modifiez le fichier src / MainActivity.java pour ajouter du code d'animation
3	Modifiez le fichier XML de mise en page res / layout / activity_main.xml, ajoutez un composant GUI si nécessaire.
4	Créez un nouveau dossier sous le répertoire res et appelez-le anim. Confirmez-le en visitant res / anim
5	Faites un clic droit sur anim et cliquez sur nouveau et sélectionnez le fichier XML Android Vous devez créer différents fichiers répertoriés ci-dessous.
6	Créez des fichiers myanimation.xml, clockwise.xml, fade.xml, move.xml, blink.xml, slide.xml et ajoutez le code XML.
sept	Pas besoin de changer les constantes de chaîne par défaut. Le studio Android prend en charge les constantes par défaut à values ​​/ string.xml.
8	Exécutez l'application et choisissez un appareil Android en cours d'exécution, installez l'application dessus et vérifiez les résultats.

Voici le code modifié de MainActivity.java.

package com.example.sairamkrishna.myapplication;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;
import android.widget.Toast;

public class MainActivity extends Activity {
   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
   }
   
   public void clockwise(View view){
      ImageView image = (ImageView)findViewById(R.id.imageView);
      Animation animation = AnimationUtils.loadAnimation(getApplicationContext(), 
         R.anim.myanimation);
      image.startAnimation(animation);
   }
   
   public void zoom(View view){
      ImageView image = (ImageView)findViewById(R.id.imageView);
      Animation animation1 = AnimationUtils.loadAnimation(getApplicationContext(), 
         R.anim.clockwise);
      image.startAnimation(animation1);
   }
   
   public void fade(View view){
      ImageView image = (ImageView)findViewById(R.id.imageView);
      Animation animation1 = 
         AnimationUtils.loadAnimation(getApplicationContext(), 
            R.anim.fade);
      image.startAnimation(animation1);
   }
   
   public void blink(View view){
      ImageView image = (ImageView)findViewById(R.id.imageView);
      Animation animation1 = 
         AnimationUtils.loadAnimation(getApplicationContext(), 
            R.anim.blink);
      image.startAnimation(animation1);
   }
   
   public void move(View view){
      ImageView image = (ImageView)findViewById(R.id.imageView);
      Animation animation1 = 
         AnimationUtils.loadAnimation(getApplicationContext(), R.anim.move);
      image.startAnimation(animation1);
   }
   
   public void slide(View view){
      ImageView image = (ImageView)findViewById(R.id.imageView);
      Animation animation1 = 
         AnimationUtils.loadAnimation(getApplicationContext(), R.anim.slide);
      image.startAnimation(animation1);
   }
}

Voici le code modifié de res/layout/activity_main.xml.

Ici abc indique le logo de tutorialspoint

<RelativeLayout 
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools" 
   android:layout_width="match_parent"
   android:layout_height="match_parent" 
   android:paddingLeft="@dimen/activity_horizontal_margin"
   android:paddingRight="@dimen/activity_horizontal_margin"
   android:paddingTop="@dimen/activity_vertical_margin"
   android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">
   
   <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Alert Dialog"
      android:id="@+id/textView"
      android:textSize="35dp"
      android:layout_alignParentTop="true"
      android:layout_centerHorizontal="true" />
      
   <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Tutorialspoint"
      android:id="@+id/textView2"
      android:textColor="#ff3eff0f"
      android:textSize="35dp"
      android:layout_below="@+id/textView"
      android:layout_centerHorizontal="true" />
      
   <ImageView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:id="@+id/imageView"
      android:src="@drawable/abc"
      android:layout_below="@+id/textView2"
      android:layout_alignRight="@+id/textView2"
      android:layout_alignEnd="@+id/textView2"
      android:layout_alignLeft="@+id/textView"
      android:layout_alignStart="@+id/textView"/>
      
   <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="zoom"
      android:id="@+id/button"
      android:layout_below="@+id/imageView"
      android:layout_alignParentLeft="true"
      android:layout_alignParentStart="true"
      android:layout_marginTop="40dp"
      android:onClick="clockwise"/>
      
   <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="clockwise"
      android:id="@+id/button2"
      android:layout_alignTop="@+id/button"
      android:layout_centerHorizontal="true"
      android:onClick="zoom"/>
      
   <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="fade"
      android:id="@+id/button3"
      android:layout_alignTop="@+id/button2"
      android:layout_alignParentRight="true"
      android:layout_alignParentEnd="true"
      android:onClick="fade"/>
      
   <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="blink"
      android:onClick="blink"
      android:id="@+id/button4"
      android:layout_below="@+id/button"
      android:layout_alignParentLeft="true"
      android:layout_alignParentStart="true" />
      
   <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="move"
      android:onClick="move"
      android:id="@+id/button5"
      android:layout_below="@+id/button2"
      android:layout_alignRight="@+id/button2"
      android:layout_alignEnd="@+id/button2"
      android:layout_alignLeft="@+id/button2"
      android:layout_alignStart="@+id/button2" />
      
   <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="slide"
      android:onClick="slide"
      android:id="@+id/button6"
      android:layout_below="@+id/button3"
      android:layout_toRightOf="@+id/textView"
      android:layout_toEndOf="@+id/textView" />
      
</RelativeLayout>

Voici le code de res/anim/myanimation.xml.

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

   <scale xmlns:android="http://schemas.android.com/apk/res/android"
      android:fromXScale="0.5"
      android:toXScale="3.0"
      android:fromYScale="0.5"
      android:toYScale="3.0"
      android:duration="5000"
      android:pivotX="50%"
      android:pivotY="50%" >
   </scale>
   
   <scale xmlns:android="http://schemas.android.com/apk/res/android"
      android:startOffset="5000"
      android:fromXScale="3.0"
      android:toXScale="0.5"
      android:fromYScale="3.0"
      android:toYScale="0.5"
      android:duration="5000"
      android:pivotX="50%"
      android:pivotY="50%" >
   </scale>
   
</set>

Voici le code de res/anim/clockwise.xml.

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

   <rotate xmlns:android="http://schemas.android.com/apk/res/android"
      android:fromDegrees="0"
      android:toDegrees="360"
      android:pivotX="50%"
      android:pivotY="50%"
      android:duration="5000" >
   </rotate>
   
   <rotate xmlns:android="http://schemas.android.com/apk/res/android"
      android:startOffset="5000"
      android:fromDegrees="360"
      android:toDegrees="0"
      android:pivotX="50%"
      android:pivotY="50%"
      android:duration="5000" >
   </rotate>
   
</set>

Voici le code de res/anim/fade.xml.

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
   android:interpolator="@android:anim/accelerate_interpolator" >
   
   <alpha
      android:fromAlpha="0"
      android:toAlpha="1" 
      android:duration="2000" >
   </alpha>
   
   <alpha
      android:startOffset="2000"
      android:fromAlpha="1"
      android:toAlpha="0" 
      android:duration="2000" >
   </alpha>   

</set>

Voici le code de res/anim/blink.xml.

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
   <alpha android:fromAlpha="0.0"
      android:toAlpha="1.0"
      android:interpolator="@android:anim/accelerate_interpolator"
      android:duration="600"
      android:repeatMode="reverse"
      android:repeatCount="infinite"/>
</set>

Voici le code de res/anim/move.xml.

<?xml version="1.0" encoding="utf-8"?>
<set
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:interpolator="@android:anim/linear_interpolator"
   android:fillAfter="true">
   
   <translate
      android:fromXDelta="0%p"
      android:toXDelta="75%p"
      android:duration="800" />
</set>

Voici le code de res/anim/slide.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
   android:fillAfter="true" >
   
   <scale
      android:duration="500"
      android:fromXScale="1.0"
      android:fromYScale="1.0"
      android:interpolator="@android:anim/linear_interpolator"
      android:toXScale="1.0"
      android:toYScale="0.0" />
</set>

Voici le code modifié de res/values/string.xml.

<resources>
   <string name="app_name">My Application</string>
</resources>

Voici le code par défaut de AndroidManifest.xml.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
   package="com.example.sairamkrishna.myapplication" >

   <application
      android:allowBackup="true"
      android:icon="@drawable/ic_launcher"
      android:label="@string/app_name"
      android:theme="@style/AppTheme" >
      
      <activity
         android:name="com.example.animation.MainActivity"
         android:label="@string/app_name" >
      
         <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
         </intent-filter>
      
      </activity>
    
   </application>
</manifest>

Essayons d'exécuter votre application. Je suppose que vous avez connecté votre appareil mobile Android à votre ordinateur. Pour exécuter l'application à partir du studio Android, ouvrez l'un des fichiers d'activité de votre projet et cliquez sur l' icône Exécuter dans la barre d'outils. Le studio Android affichera les images suivantes

Sélectionnez le bouton de zoom, il affichera l'écran suivant -

Maintenant, sélectionnez le bouton coulissant, il affichera l'écran suivant

Maintenant, sélectionnez le bouton de déplacement, il affichera l'écran suivant

Maintenant, le bouton dans le sens des aiguilles d'une montre, il affichera l'écran suivant

Maintenant le bouton Fade, il affichera l'écran suivant

Remarque - Si vous l'exécutez dans l'émulateur, vous risquez de ne pas ressentir un effet d'animation fluide. Vous devez l'exécuter sur votre mobile Android afin de profiter d'une animation fluide.