Android - Animationen

Animation ist der Prozess der Erzeugung von Bewegung und Formänderung

Animation in Android ist auf viele Arten möglich. In diesem Kapitel werden wir eine einfache und weit verbreitete Methode zum Erstellen von Animationen diskutieren, die als Tweened-Animation bezeichnet wird.

Tween-Animation

Tween-Animation verwendet einige Parameter wie Startwert, Endwert, Größe, Zeitdauer, Drehwinkel usw. und führt die erforderliche Animation für dieses Objekt aus. Es kann auf jeden Objekttyp angewendet werden. Um dies zu nutzen, hat uns Android eine Klasse namens Animation zur Verfügung gestellt.

Um eine Animation in Android durchzuführen, rufen wir eine statische Funktion loadAnimation () der Klasse AnimationUtils auf. Wir werden das Ergebnis in einer Instanz von Animation Object erhalten. Die Syntax lautet wie folgt:

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

Beachten Sie den zweiten Parameter. Dies ist der Name unserer XML-Animationsdatei. Sie müssen einen neuen Ordner namens erstellenanim Klicken Sie im Verzeichnis res auf eine XML-Datei im Ordner anim.

Diese Animationsklasse hat viele nützliche Funktionen, die unten aufgeführt sind -

Sr.Nr.	Methode & Beschreibung
1	start() Diese Methode startet die Animation.
2	setDuration(long duration) Diese Methode legt die Dauer einer Animation fest.
3	getDuration() Diese Methode erhält die Dauer, die mit der obigen Methode festgelegt wurde
4	end() Diese Methode beendet die Animation.
5	cancel() Diese Methode bricht die Animation ab.

Um diese Animation auf ein Objekt anzuwenden, rufen wir einfach die startAnimation () -Methode des Objekts auf. Seine Syntax ist -

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

Beispiel

Das folgende Beispiel zeigt die Verwendung von Animation in Android. Sie können im Menü einen anderen Animationstyp auswählen, und die ausgewählte Animation wird auf eine Bildansicht auf dem Bildschirm angewendet.

Um mit diesem Beispiel zu experimentieren, müssen Sie dies auf einem Emulator oder einem tatsächlichen Gerät ausführen.

Schritte	Beschreibung
1	Mit der Android Studio-IDE erstellen Sie eine Android-Anwendung und benennen sie unter dem Paket com.example.sairamkrishna.myapplication als Meine Anwendung.
2	Ändern Sie die Datei src / MainActivity.java, um Animationscode hinzuzufügen
3	Ändern Sie die Layout-XML-Datei res / layout / activity_main.xml und fügen Sie bei Bedarf eine beliebige GUI-Komponente hinzu.
4	Erstellen Sie einen neuen Ordner im Verzeichnis res und nennen Sie ihn anim. Bestätigen Sie es mit res / anim
5	Klicken Sie mit der rechten Maustaste auf anim und klicken Sie auf new und wählen Sie Android XML file. Sie müssen verschiedene Dateien erstellen, die unten aufgeführt sind.
6	Erstellen Sie die Dateien myanimation.xml, clockwise.xml, fade.xml, move.xml, blink.xml, slide.xml und fügen Sie den XML-Code hinzu.
7	Die Standardzeichenfolgenkonstanten müssen nicht geändert werden. Android Studio kümmert sich um die Standardkonstanten unter values ​​/ string.xml.
8	Führen Sie die Anwendung aus und wählen Sie ein laufendes Android-Gerät aus. Installieren Sie die Anwendung darauf und überprüfen Sie die Ergebnisse.

Hier ist der geänderte Code von 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);
   }
}

Hier ist der geänderte Code von res/layout/activity_main.xml.

Hier zeigt abc über das Logo des Tutorialspoints an

<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>

Hier ist der Code von 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>

Hier ist der Code von 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>

Hier ist der Code von 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>

Hier ist der Code von 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>

Hier ist der Code von 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>

Hier ist der Code von 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>

Hier ist der geänderte Code von res/values/string.xml.

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

Hier ist der Standardcode von 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>

Versuchen wir, Ihre Anwendung auszuführen. Ich gehe davon aus, dass Sie Ihr aktuelles Android Mobile-Gerät mit Ihrem Computer verbunden haben. Um die App von Android Studio aus auszuführen, öffnen Sie eine der Aktivitätsdateien Ihres Projekts und klicken Sie in

der Symbolleiste auf das Symbol Ausführen . Android Studio zeigt folgende Bilder an

Wählen Sie die Zoom-Taste. Der folgende Bildschirm wird angezeigt:

Wählen Sie nun die Schiebetaste. Der folgende Bildschirm wird angezeigt

Wählen Sie nun die Schaltfläche Verschieben. Der folgende Bildschirm wird angezeigt

Mit der Taste im Uhrzeigersinn wird der folgende Bildschirm angezeigt

Mit der Schaltfläche Fade wird nun der folgende Bildschirm angezeigt

Hinweis - Wenn Sie es im Emulator ausführen, tritt möglicherweise kein reibungsloser Animationseffekt auf. Sie müssen es in Ihrem Android-Handy ausführen, um die reibungslose Animation zu erleben.