Tween Animation by Neneng

  • View
    238

  • Download
    3

Embed Size (px)

Text of Tween Animation by Neneng

  • 1.@agatestudio Tweening in Android Neneng Knight Agate Studio

2. Tweening in Android ~ MAKE YOUR ANDROIDS 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