Page Transitions di Windows Phone

Hai all, kali ini mau berbagi tentang membuat animasi pada perpindah halaman di Windows Phone atau yang biasa disebut dengan page transisiton. Jika kita melihat aplikasi bawaan pada Windows Phone, ada animasi smooth pada perpindahan pagenya, ini tentunya meningkatkan nilai User Experiencenya.

Page Transitions di Windows Phone

Tapi, jika kita memulai project pada Visual Studio dan Blend, kita tidak akan bisa menemukan fitur animasi perpindahan page ini, karena ini tidak dibuild secara default. Oleh karena itu kita akan membutuhkan new reference kedalam project yang bernama:

Microsoft.Phone.Controls.Toolkit.dll

Kita bisa mendapatkan melalui Nuget atau menambahkan referencenya secara manual kedalam project. Setelah reference ditambahakan, kita bisa menggunakan fitur transisi dibawah ini pada page xaml yang ingin kita bikin animasi:

Pertama deklarasikan dulu reference yang telah kita tambahkan tadi, seperti berikut:

Setelah dideklarasikan, kita baru bisa menambahkan source transisi dibawah ini:

 

Setelah itu jangan lupa untuk mengganti fungsi dibawah ini pada App.xaml.cs project kita agar fitur transisi berjalan otomatis, dari :

    RootFrame = new PhoneApplicationFrame();

Menjadi:

   RootFrame = new TransitionFrame();

Setelah selesai, project sudah bisa didebug untuk melihat fitur transisi berfungsi. Harusnya berhasil :D, kalau ada kendala boleh komen dibawah.


 

Ada banyak animasi transisi yang ada pada toolkit ini, berikut listnya:

Turnstile Transition

Transisi ini mirip dengan mengubah halaman dari salah satu sudut. Sebuah transisi yang paling sederhana dan paling umum dan digunakan. Ia memiliki empat mode BackwardIn, ForwardIn, BackwardOut dan ForwardOut. Berikut sourcenya:

 

Swivel Transition

Transisi ini adalah transisi putar, persis mirip dengan transisi pintu putar. Berikut sourcenya:

 

Slide Transition

Slide Transition membuat halaman menghilang atau muncul dalam mode arah yang ditentukan. Transisi ini memiliki banyak mode, sehingga kompleks untuk digunakan. Modus yang berbeda adalah sebagai berikut:

  • SlideUpFadeIn
  • SlideUpFadeOut
  • SlideDownFadeIn
  • SlideDownFadeOut
  • SlideLeftFadeIn
  • SlideLeftFadeOut
  • SlideRightFadeIn

Berikut salah satu sample sourcenya:

 

Rotate Transition

Transisi Rotate menghasilkan efek yang bagus yang dapat Anda kontrol dengan sangat mudah menggunakan mode yang diberikan. Seperti transisi Slide, Transisi Putar juga memiliki berbagai mode:

  • In90Clockwise
  • In90Counterclockwise
  • In180Clockwise
  • In180Counterclockwise
  • Out90Clockwise
  • Out90Counterclockwise
  • Out180Clockwise
  • Out180Counterclockwise

Berikut salah satu sample sourcenya:

Ada banyak efek lain dan animasi yang bisa diterapkan secara langsung maupun tidak langsung dalam platform Windows Phone. Semoga bermanfaat.. 😀

Iklan

Good People write good comments ..

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s