Silverlight ile Animasyon Mantığı

      Silverlight a giriş bölümümüzde, temel olarak animasyon mantığına değinmiştik. Silverlight öncesi animasyon tarafına baktığımızda web in tek hâkimi olarak Flash ı gösterebiliriz. Gerek web sitelerinin header kısmını oluşturan bannerlar gerekse de web sitelerinin tamamında Flash kullanılıyordu.   Silverlight ile beraber animasyon mantığı kapsamında birtakım değişiklikler olduğunu söyleyebiliriz. Flash’ın kare bazlı animasyonlar için kullanıldığından bahsetmiştik. Bu aşamada daha çok uygulamaya yönelik animasyon konusunda sıkıntılar yaşanmaktaydı. Silverlight ın animasyon tarafındaki en önemli özelliği de burada devreye girdiğini söyleyebiliriz.

     Özellikle saniye bazlı animasyon geliştirmek hem iş yükü açısından hem de donanımsal olarak büyük kolaylık sağlamaktadır.Örneğin Flash da 1.karede aşağıda 10.karede yukarıda ol derken saniye başına düşen kare sayısını hesaplamak zorunda kalırız.Sonuç olarak tasarımcı olarak bir animasyon hazırlıyor isek animasyonumuzun ne kadar sürede bitmesine de biz karar veririz.Bu aşamada belirlediğimiz kareler arasında ki saniyeyi hesaplamak ve animasyonlarımızın kare üzerinden gerçekleşmesi ile  donanımsal olarak sıkıntı yaşar ve animasyon oynatma sürecinde sorunlarla karşılaşırız.Silverlight da ise animasyonlar saniye bazında oluşturulduğu için istenilen saniyede istenilen yerde animasyon oluşturabiliyoruz.Genel olarak bakıldığında ise Kare ve Saniye bazlı animasyonların yerine göre kullanıldığını görürüz.Şimdi tasarımcı olarak Expression Blend arayüzünü kullanıp nasıl animasyon oluşturacağımıza bakalım.

Expression Blend ile Animasyon Oluşturma

Animasyon mantığına kısaca değindikten sonra tasarımcı gözüyle animasyon oluşturmak için Expression Blend ara yüzünü kullanacağız. Silverlight ile animasyon oluşturmadan önce Expression Blend tarafında animasyon özellikleri ve tollarını inceleyelim.

•Expression Blend ‘i ilk açtığımızda yukarıdaki gibi bir ekran gelmeyecektir. Default olarak Blend Design modunda açılır.Ancak animasyon modu için Window-WorkSpaces-Animations menusu kullanılabilir.Design modu ile Animasyon modu arasında geçiş yapmak için ise F6 tuşunu kullanabiliriz.

     Expression Blend tarafında animasyon ekranlarını kavradıktan sonra artık Silverlight ile animasyon oluşturma sürecine geçebiliriz. Örnek olarak yukarıdaki şekildeki dairemizi yukarı çıkaran ve kaybolmasını sağlayan bir animasyon gerçekleştirelim.

•Blend ile yeni bir animasyon oluşturmak için arayüz de bulunan   d

•Daha sonra sahnedeki daireyi 0 – 2 saniye arasında yukarı çıkarıp kaybolmasını sağlayalım.

 
•Basitçe Blend arayüzünü kullanarak animasyonumuzu oluşturduk. Şimdi ise animasyonumuzun Xaml çıktısına göz atalım.

Etiketler: silverlight, eğitim, animasyon.expression blend, silverlight ile animasyon