1. @agatestudio
Tweening in
Android
Neneng
Knight
Agate Studio

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

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

4. Macam tween (kuantitas)
◦Single tween
◦Multiple tween
◦ Animasi secara berurutan
◦ Animasi secara bersamaan

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

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

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

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

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

10. 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)

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

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

13. 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 :

14. 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)

15. Terima
Kasih 