Android - Animasi

Animasi adalah proses menciptakan gerakan dan perubahan bentuk

Animasi di android dimungkinkan dari banyak cara. Pada bab ini kita akan membahas salah satu cara pembuatan animasi yang mudah dan banyak digunakan yaitu animasi tweened.

Tween Animation

Tween Animation mengambil beberapa parameter seperti nilai awal, nilai akhir, ukuran, durasi waktu, sudut rotasi, dll dan melakukan animasi yang diperlukan pada objek itu. Ini dapat diterapkan ke semua jenis objek. Jadi untuk menggunakan ini, android telah memberi kita kelas yang disebut Animasi.

Untuk melakukan animasi di android, kita akan memanggil fungsi statis loadAnimation () dari kelas AnimationUtils. Kami akan menerima hasilnya dalam contoh Objek Animasi. Sintaksnya adalah sebagai berikut -

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

Perhatikan parameter kedua. Ini adalah nama file xml animasi kami. Anda harus membuat folder baru bernamaanim di bawah direktori res dan buat file xml di bawah folder anim.

Kelas animasi ini memiliki banyak fungsi berguna yang tercantum di bawah ini -

Sr Tidak	Metode & Deskripsi
1	start() Metode ini memulai animasi.
2	setDuration(long duration) Metode ini menyetel durasi animasi.
3	getDuration() Metode ini mendapatkan durasi yang ditentukan dengan metode di atas
4	end() Metode ini mengakhiri animasi.
5	cancel() Metode ini membatalkan animasi.

Untuk menerapkan animasi ini ke sebuah objek, kami hanya akan memanggil metode startAnimation () dari objek tersebut. Sintaksnya adalah -

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

Contoh

Contoh berikut menunjukkan penggunaan Animation di android. Anda dapat memilih jenis animasi yang berbeda dari menu dan animasi yang dipilih akan diterapkan pada imageView di layar.

Untuk bereksperimen dengan contoh ini, Anda perlu menjalankannya di emulator atau perangkat sebenarnya.

Langkah	Deskripsi
1	Anda akan menggunakan IDE studio Android untuk membuat aplikasi Android dan menamainya sebagai Aplikasi Saya di bawah paket com.example.sairamkrishna.myapplication.
2	Ubah file src / MainActivity.java untuk menambahkan kode animasi
3	Ubah layout file XML res / layout / activity_main.xml tambahkan komponen GUI apa pun jika diperlukan.
4	Buat folder baru di bawah direktori res dan beri nama anim. Konfirmasikan dengan mengunjungi res / anim
5	Klik kanan pada anim dan klik baru dan pilih file XML Android Anda harus membuat file berbeda yang tercantum di bawah ini.
6	Buat file myanimation.xml, clockwise.xml, fade.xml, move.xml, blink.xml, slide.xml dan tambahkan kode XML.
7	Tidak perlu mengubah konstanta string default. Android studio menangani konstanta default di values ​​/ string.xml.
8	Jalankan aplikasi dan pilih perangkat android yang sedang berjalan dan instal aplikasi di atasnya dan verifikasi hasilnya.

Berikut adalah kode yang dimodifikasi dari 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);
   }
}

Berikut adalah kode yang dimodifikasi dari res/layout/activity_main.xml.

Berikut abc menunjukkan tentang logo 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>

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

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

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

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

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

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

Berikut adalah kode yang dimodifikasi dari res/values/string.xml.

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

Berikut adalah kode default 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>

Mari coba jalankan aplikasi Anda. Saya berasumsi bahwa Anda telah menghubungkan perangkat Seluler Android Anda yang sebenarnya dengan komputer Anda. Untuk menjalankan aplikasi dari Android studio, buka salah satu file aktivitas proyek Anda dan klik

ikon Run dari toolbar. Android studio akan menampilkan gambar berikut

Pilih tombol zoom, itu akan menampilkan layar berikut -

Sekarang pilih tombol geser, itu akan menampilkan layar berikut

Sekarang pilih tombol pindah, itu akan menampilkan layar berikut

Sekarang tombol searah jarum jam, itu akan menampilkan layar berikut

Sekarang tombol Fade, itu akan menampilkan layar berikut

Catatan - Jika Anda menjalankannya di emulator, Anda mungkin tidak mengalami efek animasi yang mulus. Anda harus menjalankannya di ponsel android Anda untuk merasakan animasi yang mulus.