@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 (...
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 mengi...
Parameter Animation (Part
1)
• Cocok untuk mengubah parameter objek yang
lebih spesifik
• Co : ubah width objek saja, ubah...
Parameter Animation (Part
2)
• Untuk beberapa jenis objek, harus membuat
class mencakup getter-setter untuk beberapa
param...
Parameter Animation (Part
3)
Contoh kode pakai :
//draw objek bulat; Shape berupa class berisi objek drawable
Shape circle...
View Animation (Part 1)
•Cocok untuk mengubah parameter objek yang
berpasangan
• Co : mengubah posisi (x,y), ukuran (scale...
View Animation (Part 2)
•Hanya bisa dipakai pada objek turunan dari
View (TextView, ImageView, dsb)
•Tidak bisa mengatur w...
View Animation (Part 3)
Contoh kode pakai :
/* buat objek image; sudah dideklarasi lebih dulu di layout, anggap posisi
ada...
Multiple Tween
•Memakai class AnimationSet (untuk View
Animation) dan AnimatorSet (untuk
Parameter Animation) untuk membun...
Multiple Tween (Sequential)
•AnimationSet
• Tidak ada parameter khusus untuk mengatur
behaviour animasi
• Bisa diakali den...
Multiple Tween
(Simultaneous)
•AnimationSet
• Cukup dengan menambahkan animasi, saat start
akan mulai bersamaan
• Contoh :...
Terima
Kasih 
Upcoming SlideShare
Loading in …5
×

Tween Animation by Neneng

489 views

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
489
On SlideShare
0
From Embeds
0
Number of Embeds
80
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Tween Animation by Neneng

  1. 1. @agatestudio Tweening in Android Neneng Knight Agate Studio
  2. 2. Tweening in Android ~ MAKE YOUR ANDROID’S APPS MORE “WOW” IN ANDROID “NATIVE” CODES ~
  3. 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. 4. Macam tween (kuantitas) ◦Single tween ◦Multiple tween ◦ Animasi secara berurutan ◦ Animasi secara bersamaan
  5. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 15. Terima Kasih 

×