Bagikan melalui


Grafis dan Animasi Android

Android menyediakan kerangka kerja yang sangat kaya dan beragam untuk mendukung grafis dan animasi 2D. Topik ini memperkenalkan kerangka kerja ini dan membahas cara membuat grafik dan animasi kustom untuk digunakan dalam aplikasi Xamarin.Android.

Gambaran Umum

Meskipun berjalan pada perangkat yang secara tradisional memiliki daya terbatas, aplikasi seluler berperingkat tertinggi sering memiliki Pengalaman Pengguna (UX) canggih, lengkap dengan grafis dan animasi berkualitas tinggi yang memberikan nuansa intuitif, responsif, dinamis. Ketika aplikasi seluler semakin canggih, pengguna telah mulai mengharapkan semakin banyak dari aplikasi.

Untungnya bagi kami, platform seluler modern memiliki kerangka kerja yang sangat kuat untuk membuat animasi canggih dan grafis kustom sambil mempertahankan kemudahan penggunaan. Hal ini memungkinkan pengembang untuk menambahkan interaktivitas yang kaya dengan sedikit usaha.

Kerangka kerja API UI di Android kira-kira dapat dibagi menjadi dua kategori: Grafis dan Animasi.

Grafik dibagi lebih lanjut menjadi pendekatan yang berbeda untuk melakukan grafik 2D dan 3D. Grafik 3D tersedia melalui sejumlah kerangka kerja bawaan seperti OpenGL ES (versi OpenGL khusus seluler), dan kerangka kerja pihak ketiga seperti MonoGame (toolkit lintas platform yang kompatibel dengan toolkit XNA). Meskipun grafik 3D tidak berada dalam cakupan artikel ini, kami akan memeriksa teknik menggambar 2D bawaan.

Android menyediakan dua API berbeda untuk membuat grafis 2D. Salah satunya adalah pendekatan deklaratif tingkat tinggi dan yang lain API tingkat rendah terprogram:

  • Sumber Daya yang Dapat Digambar - Ini digunakan untuk membuat grafik kustom baik secara terprogram atau (lebih biasanya) dengan menyematkan instruksi menggambar dalam file XML. Sumber daya yang dapat digambar biasanya didefinisikan sebagai file XML yang berisi instruksi atau tindakan bagi Android untuk merender grafik 2D.

  • Kanvas – ini adalah API tingkat rendah yang melibatkan gambar langsung pada bitmap yang mendasar. Ini memberikan kontrol yang sangat halus atas apa yang ditampilkan.

Selain teknik grafis 2D ini, Android juga menyediakan beberapa cara berbeda untuk membuat animasi:

  • Animasi yang Dapat Digambar – Android juga mendukung animasi frame-by-frame yang dikenal sebagai Drawable Animation. Ini adalah API animasi paling sederhana. Android secara berurutan memuat dan menampilkan sumber daya Drawable secara berurutan (seperti kartun).

  • Lihat AnimasiLihat Animasi adalah API animasi asli di Android dan tersedia di semua versi Android. API ini terbatas karena hanya akan berfungsi dengan Lihat objek dan hanya dapat melakukan transformasi sederhana pada Tampilan tersebut. Animasi tampilan biasanya didefinisikan dalam file XML yang ditemukan di /Resources/anim folder.

  • Animasi Properti – Android 3.0 memperkenalkan sekumpulan API animasi baru yang dikenal sebagai Animasi Properti. API baru ini memperkenalkan sistem yang dapat diperluas dan fleksibel yang dapat digunakan untuk menganimasikan properti objek apa pun, bukan hanya Melihat objek. Fleksibilitas ini memungkinkan animasi dienkapsulasi dalam kelas berbeda yang akan membuat berbagi kode lebih mudah.

Lihat Animasi lebih cocok untuk aplikasi yang harus mendukung API pra-Android 3.0 yang lebih lama (API level 11). Jika tidak, aplikasi harus menggunakan API Animasi Properti yang lebih baru karena alasan yang disebutkan di atas.

Semua kerangka kerja ini adalah opsi yang layak, namun jika memungkinkan, preferensi harus diberikan kepada Animasi Properti, karena ini adalah API yang lebih fleksibel untuk dikerjakan. Animasi Properti memungkinkan logika animasi dienkapsulasi dalam kelas berbeda yang membuat berbagi kode lebih mudah dan menyederhanakan pemeliharaan kode.

Aksesibilitas

Grafis dan animasi membantu membuat aplikasi Android menarik dan menyenangkan untuk digunakan; namun, penting untuk diingat bahwa beberapa interaksi terjadi melalui screenreader, perangkat input alternatif, atau dengan zoom yang dibantu. Selain itu, beberapa interaksi dapat terjadi tanpa kemampuan audio.

Aplikasi lebih dapat digunakan dalam situasi ini jika telah dirancang dengan mempertimbangkan aksesibilitas: memberikan petunjuk dan bantuan navigasi di antarmuka pengguna, dan memastikan ada konten teks atau deskripsi untuk elemen gambar dari UI.

Lihat Panduan Aksesibilitas Google untuk informasi selengkapnya tentang cara menggunakan API aksesibilitas Android.

Grafik 2D

Drawable Resources adalah teknik populer dalam aplikasi Android. Seperti halnya sumber daya lain, Sumber Daya yang Dapat Digambar bersifat deklaratif – sumber daya tersebut didefinisikan dalam file XML. Pendekatan ini memungkinkan pemisahan kode yang bersih dari sumber daya. Ini dapat menyederhanakan pengembangan dan pemeliharaan karena tidak perlu mengubah kode untuk memperbarui atau mengubah grafik dalam aplikasi Android. Namun, sementara Sumber Daya yang Dapat Digambar berguna untuk banyak persyaratan grafis sederhana dan umum, mereka tidak memiliki kekuatan dan kontrol Canvas API.

Teknik lain, menggunakan objek Canvas , sangat mirip dengan kerangka kerja API tradisional lainnya seperti System.Drawing atau Core Drawing iOS. Menggunakan objek Canvas memberikan kontrol paling besar tentang bagaimana grafik 2D dibuat. Ini sesuai untuk situasi di mana Sumber Daya yang Dapat Digambar tidak akan berfungsi atau akan sulit untuk dikerjakan. Misalnya, mungkin perlu untuk menggambar kontrol pengguncur kustom yang tampilannya akan berubah berdasarkan perhitungan yang terkait dengan nilai slider.

Mari kita periksa Sumber Daya yang Dapat Digambar terlebih dahulu. Ini lebih sederhana dan mencakup kasus gambar kustom yang paling umum.

Sumber Daya yang Dapat Digambar

Sumber Daya yang Dapat Digambar didefinisikan dalam file XML di direktori /Resources/drawable. Tidak seperti menyematkan PNG atau JPEG, tidak perlu menyediakan versi khusus kepadatan Dari Sumber Daya yang Dapat Digambar. Pada runtime, aplikasi Android akan memuat sumber daya ini dan menggunakan instruksi yang terkandung dalam file XML ini untuk membuat grafik 2D. Android mendefinisikan beberapa jenis Sumber Daya yang Dapat Digambar:

  • ShapeDrawable – Ini adalah objek Drawable yang menggambar bentuk geometris primitif dan menerapkan serangkaian efek grafis terbatas pada bentuk tersebut. Ini sangat berguna untuk hal-hal seperti menyesuaikan Tombol atau mengatur latar belakang TextViews. Kita akan melihat contoh cara menggunakan ShapeDrawable nanti di artikel ini.

  • StateListDrawable – Ini adalah Sumber Daya yang Dapat Digambar yang akan mengubah tampilan berdasarkan status widget/kontrol. Misalnya, tombol dapat mengubah tampilannya tergantung pada apakah tombol ditekan atau tidak.

  • LayerDrawable – Sumber Daya Yang Dapat Digambar ini yang akan menumpuk beberapa drawable lainnya satu di atas yang lain. Contoh LayerDrawable diperlihatkan dalam cuplikan layar berikut:

    Contoh LayerDrawable

  • TransionDrawable – Ini adalah LayerDrawable tetapi dengan satu perbedaan. TransisiDrawable mampu menganimasikan satu lapisan yang muncul di atas yang lain.

  • LevelListDrawable – Ini sangat mirip dengan StateListDrawable karena akan menampilkan gambar berdasarkan kondisi tertentu. Namun, tidak seperti StateListDrawable, LevelListDrawable menampilkan gambar berdasarkan nilai bilangan bulat. Contoh LevelListDrawable adalah menampilkan kekuatan sinyal WiFi. Ketika kekuatan sinyal WiFi berubah, drawable yang ditampilkan akan berubah sesuai.

  • ScaleDrawable/ClipDrawable – Sesuai namanya, Drawables ini menyediakan fungsionalitas penskalaan dan kliping. ScaleDrawable akan menskalakan Drawable lainnya, sementara ClipDrawable akan mengklip Drawable lainnya.

  • InsetDrawable – Drawable ini akan menerapkan inset di sisi sumber daya Drawable lainnya. Ini digunakan saat Tampilan membutuhkan latar belakang yang lebih kecil dari batas Tampilan yang sebenarnya.

  • XML BitmapDrawable – File ini adalah serangkaian instruksi, dalam XML, yang akan dilakukan pada bitmap aktual. Beberapa tindakan yang dapat dilakukan Android adalah ubin, dithering, dan anti-aliasing. Salah satu kegunaan yang sangat umum dari ini adalah untuk memiringkan bitmap di latar belakang tata letak.

Contoh yang Dapat Digambar

Mari kita lihat contoh cepat cara membuat grafik 2D menggunakan ShapeDrawable. dapat ShapeDrawable menentukan salah satu dari empat bentuk dasar: persegi panjang, oval, garis, dan cincin. Dimungkinkan juga untuk menerapkan efek dasar, seperti gradien, warna, dan ukuran. XML berikut adalah ShapeDrawable yang mungkin ditemukan di proyek pendamping AnimationsDemo (dalam file Resources/drawable/shape_rounded_blue_rect.xml). Ini mendefinisikan persegi panjang dengan latar belakang gradien ungu dan sudut bulat:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<!-- Specify a gradient for the background -->
<gradient android:angle="45"
          android:startColor="#55000066"
          android:centerColor="#00000000"
          android:endColor="#00000000"
          android:centerX="0.75" />

<padding android:left="5dp"
          android:right="5dp"
          android:top="5dp"
          android:bottom="5dp" />

<corners android:topLeftRadius="10dp"
          android:topRightRadius="10dp"
          android:bottomLeftRadius="10dp"
          android:bottomRightRadius="10dp" />
</shape>

Kita dapat mereferensikan Sumber Daya Yang Dapat Digambar ini secara deklaratif dalam Tata Letak atau Drawable lainnya seperti yang ditunjukkan dalam XML berikut:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#33000000">
    <TextView android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_centerInParent="true"
              android:background="@drawable/shape_rounded_blue_rect"
              android:text="@string/message_shapedrawable" />
</RelativeLayout>

Sumber Daya yang Dapat Digambar juga dapat diterapkan secara terprogram. Cuplikan kode berikut menunjukkan cara mengatur latar belakang TextView secara terprogram:

TextView tv = FindViewById<TextView>(Resource.Id.shapeDrawableTextView);
tv.SetBackgroundResource(Resource.Drawable.shape_rounded_blue_rect);

Untuk melihat seperti apa tampilannya, jalankan proyek AnimationsDemo dan pilih item Shape Drawable dari menu utama. Kita akan melihat sesuatu yang mirip dengan cuplikan layar berikut:

Gambaran teks dengan latar belakang kustom, dapat digambar dengan sudut gradien dan bulat

Untuk detail selengkapnya tentang elemen XML dan sintaksIs Sumber Daya yang Dapat Digambar, lihat dokumentasi Google.

Menggunakan API Gambar Kanvas

Drawables kuat tetapi memiliki batasannya. Hal-hal tertentu tidak mungkin atau sangat kompleks (misalnya: menerapkan filter ke gambar yang diambil oleh kamera pada perangkat). Akan sangat sulit untuk menerapkan pengurangan mata merah dengan menggunakan Sumber Daya yang Dapat Digambar. Sebaliknya, Canvas API memungkinkan aplikasi untuk memiliki kontrol yang sangat halus untuk secara selektif mengubah warna di bagian tertentu dari gambar.

Salah satu kelas yang biasa digunakan dengan Kanvas adalah kelas Paint . Kelas ini menyimpan informasi warna dan gaya tentang cara menggambar. Ini digunakan untuk memberikan hal-hal seperti warna dan transparansi.

Canvas API menggunakan model pelukis untuk menggambar grafik 2D. Operasi diterapkan dalam lapisan berturut-turut di atas satu sama lain. Setiap operasi akan mencakup beberapa area bitmap yang mendasar. Ketika area tumpang tindih dengan area yang dicat sebelumnya, cat baru akan sebagian atau benar-benar mengaburkan yang lama. Ini adalah cara yang sama seperti banyak API gambar lainnya seperti System.Drawing dan Core Graphics iOS berfungsi.

Ada dua cara untuk mendapatkan Canvas objek. Cara pertama melibatkan pendefinisian objek Bitmap , lalu membuat instans Canvas objek dengan objek tersebut. Misalnya, cuplikan kode berikut membuat kanvas baru dengan bitmap yang mendasar:

Bitmap bitmap = Bitmap.CreateBitmap(100, 100, Bitmap.Config.Argb8888);
Canvas canvas = new Canvas(b);

Cara lain untuk mendapatkan Canvas objek adalah dengan metode panggilan balik OnDraw yang disediakan kelas Lihat dasar. Android memanggil metode ini ketika memutuskan Tampilan perlu menggambar dirinya sendiri dan meneruskan Canvas objek agar Tampilan berfungsi.

Kelas Kanvas mengekspos metode untuk secara terprogram memberikan instruksi gambar. Contohnya:

  • Canvas.DrawPaint – Mengisi seluruh bitmap kanvas dengan cat yang ditentukan.

  • Canvas.DrawPath – Menggambar bentuk geometris yang ditentukan menggunakan cat yang ditentukan.

  • Canvas.DrawText – Menggambar teks di kanvas dengan warna yang ditentukan. Teks digambar di lokasi x,y .

Menggambar dengan Canvas API

Berikut adalah contoh Canvas API yang sedang beraksi. Cuplikan kode berikut menunjukkan cara menggambar tampilan:

public class MyView : View
{
    protected override void OnDraw(Canvas canvas)
    {
        base.OnDraw(canvas);
        Paint green = new Paint {
            AntiAlias = true,
            Color = Color.Rgb(0x99, 0xcc, 0),
        };
        green.SetStyle(Paint.Style.FillAndStroke);

        Paint red = new Paint {
            AntiAlias = true,
            Color = Color.Rgb(0xff, 0x44, 0x44)
        };
        red.SetStyle(Paint.Style.FillAndStroke);

        float middle = canvas.Width * 0.25f;
        canvas.DrawPaint(red);
        canvas.DrawRect(0, 0, middle, canvas.Height, green);
    }
}

Kode di atas pertama-tama membuat cat merah dan objek cat hijau. Ini mengisi konten kanvas dengan merah, dan kemudian menginstruksikan kanvas untuk menggambar persegi panjang hijau yang 25% dari lebar kanvas. Contoh ini dapat dilihat oleh dalam AnimationsDemo proyek yang disertakan dengan kode sumber untuk artikel ini. Dengan memulai aplikasi dan memilih item Gambar dari menu utama, kita harus layar yang mirip dengan yang berikut ini:

Layar dengan cat merah dan objek cat hijau

Animasi

Pengguna menyukai hal-hal yang bergerak di aplikasi mereka. Animasi adalah cara yang bagus untuk meningkatkan pengalaman pengguna aplikasi dan membantunya menonjol. Animasi terbaik adalah animasi yang tidak diperhatikan pengguna karena mereka merasa alami. Android menyediakan tiga API berikut untuk animasi:

  • Lihat Animasi – Ini adalah API asli. Animasi ini terkait dengan Tampilan tertentu dan dapat melakukan transformasi sederhana pada konten Tampilan. Karena kesederhanaannya, API ini masih berguna untuk hal-hal seperti animasi alfa, rotasi, dan sebagainya.

  • Animasi Properti – Animasi properti diperkenalkan di Android 3.0. Mereka memungkinkan aplikasi untuk menganimasikan hampir semua hal. Animasi properti dapat digunakan untuk mengubah properti apa pun dari objek apa pun, bahkan jika objek tersebut tidak terlihat di layar.

  • Animasi yang Dapat Digambar - Ini adalah sumber daya Drawable khusus yang digunakan untuk menerapkan efek animasi yang sangat sederhana ke tata letak.

Secara umum, animasi properti adalah sistem pilihan untuk digunakan karena lebih fleksibel dan menawarkan lebih banyak fitur.

Tampilkan Animasi

Animasi tampilan terbatas pada Tampilan dan hanya dapat melakukan animasi pada nilai seperti titik awal dan akhir, ukuran, rotasi, dan transparansi. Jenis animasi ini biasanya disebut sebagai animasi dua belas. Lihat animasi dapat didefinisikan dua cara - secara terprogram dalam kode atau dengan menggunakan file XML. File XML adalah cara yang disukai untuk mendeklarasikan animasi tampilan, karena lebih mudah dibaca dan lebih mudah dipertahankan.

File XML animasi akan disimpan di /Resources/anim direktori proyek Xamarin.Android. File ini harus memiliki salah satu elemen berikut sebagai elemen akar :

  • alpha – Animasi memudar atau memudar.

  • rotate – Animasi rotasi.

  • scale – Animasi mengubah ukuran.

  • translate – Gerakan horizontal dan/atau vertikal.

  • set – Kontainer yang mungkin menyimpan satu atau beberapa elemen animasi lainnya.

Secara default, semua animasi dalam file XML akan diterapkan secara bersamaan. Untuk membuat animasi terjadi secara berurutan, atur android:startOffset atribut pada salah satu elemen yang ditentukan di atas.

Dimungkinkan untuk mempengaruhi tingkat perubahan dalam animasi dengan menggunakan interpolator. Interpolator memungkinkan efek animasi dipercepat, diulang, atau diperdeelerasi. Kerangka kerja Android menyediakan beberapa interpolator di luar kotak, seperti (tetapi tidak terbatas pada):

  • AccelerateInterpolator / DecelerateInterpolator – interpolator ini meningkatkan atau mengurangi tingkat perubahan dalam animasi.

  • BounceInterpolator – perubahan memantul di akhir.

  • LinearInterpolator – tingkat perubahan konstan.

XML berikut ini memperlihatkan contoh file animasi yang menggabungkan beberapa elemen ini:

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

    <scale android:interpolator="@android:anim/accelerate_decelerate_interpolator"
           android:fromXScale="1.0"
           android:toXScale="1.4"
           android:fromYScale="1.0"
           android:toYScale="0.6"
           android:pivotX="50%"
           android:pivotY="50%"
           android:fillEnabled="true"
           android:fillAfter="false"
           android:duration="700" />

    <set android:interpolator="@android:anim/accelerate_interpolator">
        <scale android:fromXScale="1.4"
               android:toXScale="0.0"
               android:fromYScale="0.6"
               android:toYScale="0.0"
               android:pivotX="50%"
               android:pivotY="50%"
               android:fillEnabled="true"
               android:fillBefore="false"
               android:fillAfter="true"
               android:startOffset="700"
               android:duration="400" />

        <rotate android:fromDegrees="0"
                android:toDegrees="-45"
                android:toYScale="0.0"
                android:pivotX="50%"
                android:pivotY="50%"
                android:fillEnabled="true"
                android:fillBefore="false"
                android:fillAfter="true"
                android:startOffset="700"
                android:duration="400" />
    </set>
</set>

Animasi ini akan melakukan semua animasi secara bersamaan. Animasi skala pertama akan membentangkan gambar secara horizontal dan menyusutkannya secara vertikal, dan kemudian gambar akan diputar secara bersamaan 45 derajat berlawanan searah jarum jam dan menyusut, menghilang dari layar.

Animasi dapat diterapkan secara terprogram ke Tampilan dengan menggelembungkan animasi lalu menerapkannya ke Tampilan. Android menyediakan kelas Android.Views.Animations.AnimationUtils pembantu Android.Views.Animations.Animationyang akan mengembang sumber daya animasi dan mengembalikan instans . Objek ini diterapkan ke Tampilan dengan memanggil StartAnimation dan meneruskan Animation objek. Cuplikan kode berikut menunjukkan contoh ini:

Animation myAnimation = AnimationUtils.LoadAnimation(Resource.Animation.MyAnimation);
ImageView myImage = FindViewById<ImageView>(Resource.Id.imageView1);
myImage.StartAnimation(myAnimation);

Sekarang setelah kita memiliki pemahaman mendasar tentang cara kerja Tampilan Animasi, mari kita pindah ke Animasi Properti.

Animasi Properti

Animator properti adalah API baru yang diperkenalkan di Android 3.0. Mereka menyediakan API yang lebih luas yang dapat digunakan untuk menganimasikan properti apa pun pada objek apa pun.

Semua animasi properti dibuat oleh instans subkelas Animator . Aplikasi tidak secara langsung menggunakan kelas ini, sebaliknya mereka menggunakan salah satu subkelasnya:

  • ValueAnimator – Kelas ini adalah kelas terpenting di seluruh API animasi properti. Ini menghitung nilai properti yang perlu diubah. ViewAnimator tidak secara langsung memperbarui nilai-nilai tersebut; sebaliknya, ini menimbulkan peristiwa yang dapat digunakan untuk memperbarui objek animasi.

  • ObjectAnimator – Kelas ini adalah subkelas dari ValueAnimator . Ini dimaksudkan untuk menyederhanakan proses animasi objek dengan menerima objek target dan properti untuk diperbarui.

  • AnimationSet – Kelas ini bertanggung jawab untuk mengatur bagaimana animasi berjalan terkait satu sama lain. Animasi dapat berjalan secara bersamaan, berurutan, atau dengan penundaan yang ditentukan di antaranya.

Evaluator adalah kelas khusus yang digunakan oleh animator untuk menghitung nilai baru selama animasi. Di luar kotak, Android menyediakan evaluator berikut:

Jika properti yang sedang dianimasikan bukan floatwarna , int atau , aplikasi dapat membuat evaluator mereka sendiri dengan menerapkan ITypeEvaluator antarmuka. (Menerapkan evaluator kustom berada di luar cakupan topik ini.)

Menggunakan ValueAnimator

Ada dua bagian untuk animasi apa pun: menghitung nilai animasi lalu mengatur nilai tersebut pada properti pada beberapa objek. ValueAnimator hanya akan menghitung nilai, tetapi tidak akan beroperasi pada objek secara langsung. Sebagai gantinya, objek akan diperbarui di dalam penanganan aktivitas yang akan dipanggil selama masa pakai animasi. Desain ini memungkinkan beberapa properti diperbarui dari satu nilai animasi.

Anda mendapatkan instans ValueAnimator dengan memanggil salah satu metode pabrik berikut:

  • ValueAnimator.OfInt
  • ValueAnimator.OfFloat
  • ValueAnimator.OfObject

Setelah selesai, ValueAnimator instans harus memiliki durasi yang ditetapkan, dan kemudian dapat dimulai. Contoh berikut menunjukkan cara menganimasikan nilai dari 0 hingga 1 selama rentang 1000 milidetik:

ValueAnimator animator = ValueAnimator.OfInt(0, 100);
animator.SetDuration(1000);
animator.Start();

Tetapi itu sendiri, cuplikan kode di atas tidak terlalu berguna - animator akan berjalan tetapi tidak ada target untuk nilai yang diperbarui. Kelas Animator akan menaikkan peristiwa Pembaruan ketika memutuskan bahwa perlu untuk memberi tahu pendengar tentang nilai baru. Aplikasi dapat menyediakan penanganan aktivitas untuk menanggapi peristiwa ini seperti yang ditunjukkan dalam cuplikan kode berikut:

MyCustomObject myObj = new MyCustomObject();
myObj.SomeIntegerValue = -1;

animator.Update += (object sender, ValueAnimator.AnimatorUpdateEventArgs e) =>
{
    int newValue = (int) e.Animation.AnimatedValue;
    // Apply this new value to the object being animated.
    myObj.SomeIntegerValue = newValue;
};

Sekarang setelah kita memiliki pemahaman tentang ValueAnimator, mari kita pelajari lebih lanjut ObjectAnimatortentang .

Menggunakan ObjectAnimator

ObjectAnimator adalah subkelas ViewAnimator yang menggabungkan mesin waktu dan komputasi ValueAnimator nilai dengan logika yang diperlukan untuk menghubungkan penanganan aktivitas. Mengharuskan ValueAnimator aplikasi untuk secara eksplisit menghubungkan penanganan aktivitas - ObjectAnimator akan mengurus langkah ini bagi kami.

API untuk ObjectAnimator sangat mirip dengan API untuk ViewAnimator, tetapi mengharuskan Anda memberikan objek dan nama properti untuk diperbarui. Contoh berikut menunjukkan contoh penggunaan ObjectAnimator:

MyCustomObject myObj = new MyCustomObject();
myObj.SomeIntegerValue = -1;

ObjectAnimator animator = ObjectAnimator.OfFloat(myObj, "SomeIntegerValue", 0, 100);
animator.SetDuration(1000);
animator.Start();

Seperti yang Anda lihat dari cuplikan kode sebelumnya, ObjectAnimator dapat mengurangi dan menyederhanakan kode yang diperlukan untuk menganimasikan objek.

Animasi yang Dapat Digambar

API animasi akhir adalah API Animasi yang Dapat Digambar. Animasi yang dapat digambar memuat serangkaian sumber daya Drawable satu demi satu dan menampilkannya secara berurutan, mirip dengan kartun flip-it.

Sumber daya yang dapat digambar didefinisikan dalam file XML yang memiliki <animation-list> elemen sebagai elemen akar dan serangkaian <item> elemen yang menentukan setiap bingkai dalam animasi. File XML ini disimpan dalam /Resource/drawable folder aplikasi. XML berikut adalah contoh animasi yang dapat digambar:

<animation-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:drawable="@drawable/asteroid01" android:duration="100" />
  <item android:drawable="@drawable/asteroid02" android:duration="100" />
  <item android:drawable="@drawable/asteroid03" android:duration="100" />
  <item android:drawable="@drawable/asteroid04" android:duration="100" />
  <item android:drawable="@drawable/asteroid05" android:duration="100" />
  <item android:drawable="@drawable/asteroid06" android:duration="100" />
</animation-list>

Animasi ini akan berjalan melalui enam bingkai. Atribut android:duration menyatakan berapa lama setiap bingkai akan ditampilkan. Cuplikan kode berikutnya menunjukkan contoh pembuatan animasi Drawable dan memulainya saat pengguna mengklik tombol di layar:

AnimationDrawable _asteroidDrawable;

protected override void OnCreate(Bundle bundle)
{
    base.OnCreate(bundle);
    SetContentView(Resource.Layout.Main);

    _asteroidDrawable = (Android.Graphics.Drawables.AnimationDrawable)
    Resources.GetDrawable(Resource.Drawable.spinning_asteroid);

    ImageView asteroidImage = FindViewById<ImageView>(Resource.Id.imageView2);
    asteroidImage.SetImageDrawable((Android.Graphics.Drawables.Drawable) _asteroidDrawable);

    Button asteroidButton = FindViewById<Button>(Resource.Id.spinAsteroid);
    asteroidButton.Click += (sender, e) =>
    {
        _asteroidDrawable.Start();
    };
}

Pada titik ini kami telah membahas fondasi API animasi yang tersedia dalam aplikasi Android.

Ringkasan

Artikel ini memperkenalkan banyak konsep dan API baru untuk membantu menambahkan beberapa grafis ke aplikasi Android. Pertama membahas berbagai API grafis 2D dan menunjukkan bagaimana Android memungkinkan aplikasi untuk menggambar langsung ke layar menggunakan objek Canvas. Kami juga melihat beberapa teknik alternatif yang memungkinkan grafik dibuat secara deklaratif menggunakan file XML. Kemudian kami melanjutkan untuk membahas API lama dan baru untuk membuat animasi di Android.