@agatestudio

Tweening in Android

Neneng

Knight

Agate Studio

Tweening in Android~ MAKE YOUR ANDROID’S APPS MORE “WOW” IN ANDROID “NATIVE” CODES ~

Apa itu (motion) tween?◦ Membuat objek yang dituju berubah dengan

animasi

◦ Bentuk perubahan yang umum dipakai :◦ Posisi (moving/translating)

◦ Nilai transparan (opacity/alpha)

◦ Ukuran (scaling)

◦ Arah rotasi (rotating)

◦ Bisa juga menerapkan perubahan lainnya, sesuai dengan parameter objek umumnya

Macam tween (kuantitas)◦ Single tween

◦ Multiple tween◦ Animasi secara berurutan

◦ Animasi secara bersamaan

Macam tween (target/objek)◦ Property animation

◦ Objek bisa berupa apa saja (co : layout, button, shape)

◦ Parameter mengikuti parameter yang berlaku pada objek tersebut

◦ View animation◦ Objek berupa view (co : ImageView, TextView)

◦ Parameter umum

Parameter Animation (Part 1)• Cocok untuk mengubah parameter objek yang

lebih spesifik• Co : ubah width objek saja, ubah warna

foreground/background objek

• Bisa menentukan pada frame berapa, nilai objek berubah menjadi berapa• Dengan interpolasi/efek transisi atau mengatur nilai

frame manual• Nilai frame dinyatakan antara 0 sampai 1• Nilai persen dari total durasi. Co : frame 0.2 = 20% *

totalDurasi

Parameter Animation (Part 2)• Untuk beberapa jenis objek, harus membuat

class mencakup getter-setter untuk beberapa parameter• Co : untuk mengubah warna shape, fungsi asli

shape.getPaint().setColor(Value) dibuat menjadi variabel getter-setter color()

• Method yang dipakai bergantung pada jenis nilai parameter (ofInt() = integer, ofFloat() = float, ofObject())

• Kurang cocok untuk membuat tween karena akan membuat banyak line/kode yang panjang, hampir sama dan berulang

Parameter Animation (Part 3)Contoh kode pakai :

//draw objek bulat; Shape berupa class berisi objek drawable

Shape circle = new Shape (circleDraw);/* ubah warna dari merah ke hijau dalam durasi 1 detik;warna RED dan GREEN sudah dideklarasi di value sheet. Pakai “.ofInt”

karena berupa integer’parameter “color” dibuat dengan getter-setter untuk mengubah warna

shape;deklarasi : new ObjectAnimator.ofInt(namaObjek, namaParameter,

nilaiAwal, nilaiAkhir) */

ValueAnimator changeColor = new ObjectAnimator.ofInt(circleDraw, “color”, R.color.RED, R.color.Green);

changeColor.setDuration(1000); //1 detik dalam ms

changeColor.start(); //mulai animasi

View Animation (Part 1)• Cocok untuk mengubah parameter objek yang

berpasangan• Co : mengubah posisi (x,y), ukuran (scaleX, scaleY)

• Cocok untuk tween karena sudah tersedia class jenis tween yang umum dipakai => line kode lebih pendek dan efisien• TranslateAnimation => moving• AlphaAnimation => alpha/opacity• ScaleAnimation => scaling• RotateAnimation => rotating

View Animation (Part 2)• Hanya bisa dipakai pada objek turunan dari

View (TextView, ImageView, dsb)

• Tidak bisa mengatur waktu antar frame secara langsung/manual. Hanya bisa memakai efek translasi yang sudah ada (namun bisa membuat efek translasi sendiri)

View Animation (Part 3)Contoh kode pakai :

/* buat objek image; sudah dideklarasi lebih dulu di layout, anggap posisi ada di pojok atas kiri */

ImageView pic = (ImageView) findViewById(R.id.my_image);

/* posAwal = (postX-10px, postY+20px) //geser posisi awal dulu sebelum animasi, int

posAkhir = (postX+50px, postY+200px) //posisi akhir berdasarkan posisi sekarang, int

deklarasi : new TranslateAnimation(difPosAwalX, difPosAkhirX, difPosAwalY, difPosAkhirY); */

TranslateAnimation moving = new TranslateAnimation(-10, 50, 20, 200);

moving.setDuration(1000); //1 detik dalam ms

pic. startAnimation(moving); //tempel + mulai animasi

Multiple Tween• Memakai class AnimationSet (untuk View Animation) dan AnimatorSet (untuk Parameter Animation) untuk membungkus banyak single tween

• AnimationSet dan AnimatorSet punya cara berbeda untuk mengatur jalan animasi

Multiple Tween (Sequential)•AnimationSet• Tidak ada parameter khusus untuk mengatur

behaviour animasi

• Bisa diakali dengan men-delay waktu mulai setiap single tween dengan startOffset()

• AnimatorSet• Ada parameter khusus untuk mengatur behaviour

animasi

• Diatur secara berurutan mulai dari animasi pertama, diikuti dengan method before() dan atau after()

• Contoh : animSet.play(anim1).before(anim2).before(anim3)

Multiple Tween (Simultaneous)• AnimationSet• Cukup dengan menambahkan animasi, saat start

akan mulai bersamaan• Contoh :

animSet.addAnimation(anim1);animSet.addAnimation(anim2);

• AnimatorSet• Ada parameter khusus untuk mengatur behaviour

animasi• Diatur mulai dari animasi pertama, diikuti dengan

method with()• Contoh : animSet.play(anim1).with(anim2).with(anim3)

Terima Kasih