tween animation by neneng
Post on 14-May-2015
242 Views
Preview:
TRANSCRIPT
@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
top related