Android - Animazioni

L'animazione è il processo di creazione del movimento e del cambiamento di forma

L'animazione in Android è possibile in molti modi. In questo capitolo discuteremo un modo semplice e ampiamente utilizzato per creare animazioni, chiamato animazione interpolata.

Tween Animation

Tween Animation prende alcuni parametri come il valore iniziale, il valore finale, le dimensioni, la durata, l'angolo di rotazione ecc. Ed esegue l'animazione richiesta su quell'oggetto. Può essere applicato a qualsiasi tipo di oggetto. Quindi, per poterlo utilizzare, Android ci ha fornito una classe chiamata Animazione.

Per eseguire l'animazione in Android, chiameremo una funzione statica loadAnimation () della classe AnimationUtils. Stiamo per ricevere il risultato in un'istanza di Animation Object. La sua sintassi è la seguente:

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

Nota il secondo parametro. È il nome del nostro file xml di animazione. Devi creare una nuova cartella chiamataanim nella directory res e crea un file xml nella cartella anim.

Questa classe di animazione ha molte funzioni utili che sono elencate di seguito:

Suor n	Metodo e descrizione
1	start() Questo metodo avvia l'animazione.
2	setDuration(long duration) Questo metodo imposta la durata di un'animazione.
3	getDuration() Questo metodo ottiene la durata impostata dal metodo precedente
4	end() Questo metodo termina l'animazione.
5	cancel() Questo metodo annulla l'animazione.

Per applicare questa animazione a un oggetto, chiameremo semplicemente il metodo startAnimation () dell'oggetto. La sua sintassi è:

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

Esempio

L'esempio seguente mostra l'uso dell'animazione in Android. Sarai in grado di scegliere diversi tipi di animazione dal menu e l'animazione selezionata verrà applicata a un'immagine ImageView sullo schermo.

Per sperimentare questo esempio, è necessario eseguirlo su un emulatore o un dispositivo reale.

Passi	Descrizione
1	Utilizzerai l'IDE di Android Studio per creare un'applicazione Android e denominarla come My Application in un pacchetto com.example.sairamkrishna.myapplication.
2	Modifica il file src / MainActivity.java per aggiungere il codice di animazione
3	Modificare il file XML di layout res / layout / activity_main.xml aggiungere qualsiasi componente della GUI, se necessario.
4	Crea una nuova cartella nella directory res e chiamala anim. Confermalo visitando res / anim
5	Fare clic con il tasto destro su anim e fare clic su nuovo e selezionare File XML Android. Devi creare diversi file elencati di seguito.
6	Crea file myanimation.xml, clockwise.xml, fade.xml, move.xml, blink.xml, slide.xml e aggiungi il codice XML.
7	Non è necessario modificare le costanti di stringa predefinite. Android Studio si occupa delle costanti predefinite in values ​​/ string.xml.
8	Esegui l'applicazione e scegli un dispositivo Android in esecuzione, installa l'applicazione su di esso e verifica i risultati.

Ecco il codice modificato di 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);
   }
}

Ecco il codice modificato di res/layout/activity_main.xml.

Qui abc indica il logo di 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>

Ecco il codice di 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>

Ecco il codice di 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>

Ecco il codice di 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>

Ecco il codice di 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>

Ecco il codice di 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>

Ecco il codice di 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>

Ecco il codice modificato di res/values/string.xml.

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

Ecco il codice predefinito di 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>

Proviamo a eseguire la tua applicazione. Presumo che tu abbia collegato il tuo attuale dispositivo mobile Android al tuo computer. Per eseguire l'app da Android Studio, apri uno dei file di attività del tuo progetto e fai clic sull'icona Esegui dalla barra degli strumenti. Studio Android mostrerà le seguenti immagini

Seleziona il pulsante dello zoom, verrà visualizzata la seguente schermata:

Ora seleziona il pulsante di scorrimento, verrà visualizzata la seguente schermata

Ora seleziona il pulsante di spostamento, verrà visualizzata la seguente schermata

Ora il pulsante in senso orario, mostrerà la seguente schermata

Ora il pulsante Fade, mostrerà la seguente schermata

Nota: se lo esegui in emulatore, potresti non ottenere un effetto di animazione fluido. Devi eseguirlo sul tuo cellulare Android per sperimentare l'animazione fluida.