Cara menggunakan Universal TweenEngine pada aplikasi android dengan LibGDX

Hey Gwener's, What's Up!
Melihat suatu navigasi yang smooth atau halus mungkin memiliki daya tarik tersendiri bagi setiap orang. Pergerakan atau transisi suatu objek dan perpindahan frame tentu akan menarik perhatian orang lain untuk menikmati. Inilah salah satu bentuk animasi. Sobat pastilah sering menonton film atau mungkin membuat bahan presentasi. Jika kalian perhatikan perubahan frame atau scene dari satu ke yang lainnya terlihat sangat smooth sehingga hal itu seperti terjadi pergerakan yang nyata.

Nah, bisakah kita menerapkan transisi atau pergerakan yang halus ini pada aplikasi android untuk setiap perubahan layar yang ada? tentu saja bisa. Universal Tweenengin adalah salah satu solusinya. TweenEngine ini juga bisa digunakan pada framework libGDX. TweenEngin ini akan membuat tampilan aplikasi yang dibuat menjadi lebih smooth dan menarik untuk digunakan.

Universal Tween Engine

Cara menggunakan Universal Tweenengine

Pada contoh ini kita akan mencoba membuat transisi pada sebuah tampilan logo aplikasi, biasanya diletakkan pada splash screen yakni layar awal yang berisi informasi pengembang aplikasi atau tentang aplikasi secara umum.

Membuat TweenAcessor

Tahap awal membuat sebuah tween untuk sebuah objek. TweenAcessor adalah suatu metoda untuk berkomunikasi dengan tweenengine, kita kita ingin melakukan perubahan pada objek tersebut kita bisa menggunakan tweenacessor. Contoh ini kita gunakan untuk menerapkan pada Sprite yang terdapat pada LibGDX. Berikut selengkapnya

import com.badlogic.gdx.graphics.g2d.Sprite;
import aurelienribon.tweenengine.TweenAccessor;

public class SpriteAccessor implements TweenAccessor {

 public static final int ALPHA = 1;

 @Override
 public int getValues(Sprite target, int tweenType, float[] returnValues) {
  switch (tweenType) {
  case ALPHA:
   returnValues[0] = target.getColor().a;
   return 1;
  default:
   return 0;
  }
 }

 @Override
 public void setValues(Sprite target, int tweenType, float[] newValues) {
  switch (tweenType) {
  case ALPHA:
   target.setColor(1, 1, 1, newValues[0]);
   break;
  }
 }

}

Pada contoh ini kita akan memanipulasi warna sebuah sprite. Pada TweenAccessor diatas untuk berkomunikasi pada objek kita memerlukan tweenType parameter ini bisa bervariatif sesuai kebutuhan saja. Setiap tweenType yang diberikan akan memberikan efek tertentu pada objek tersebut. Inilah cara kerja dari tweenengine.

Setup Tween

Selanjutnya adalah melakukan setup tween tersebut menggunakna Universal TweenEngine.

Tween.registerAccessor(Sprite.class, new SpriteAccessor());
  manager = new TweenManager();

  TweenCallback cb = new TweenCallback() {
   @Override
   public void onEvent(int type, BaseTween source) {
    // DO NEXT WHAT YOU WANT
   }
  };
  
  
  Tween.to(sprite, SpriteAccessor.ALPHA, .8f)
   .target(1)
   .ease(TweenEquations.easeInOutQuad)
   .repeatYoyo(1, .4f)
   .setCallback(cb).setCallbackTriggers(TweenCallback.COMPLETE)
   .start(manager);

Jika memperhatikan code diatas, tahap pertama adalah mendaftarkan tweenaccessor yang telah kita buat untuk objet sprite. Selangjutnya kita membutuhkan TweenCallback. Yakni sebuah Callback yang akan dieksekusi ketika tween/transisi objek tersebut berhasil dilakukan. Selanjutnya menjalankan tween pada objek yang diinginkan dengan tween type yang telah kita tentukan sebelumnya

Oke, sekarang sobat bisa mencoba sendiri untuk membuat tween engine ini. Jangan lupa untuk membaca juga Cara membuat PagedScrollPane pada aplikasi Android menggunakan LibGDX