Dinamik Silverlight animasyonları yaratıyoruz.

0 dakikada yazıldı

7705 defa okundu

Düzenle

Silverlight uygulamalarında bazı durumlarda animasyonları dinamik olarak
yaratmak gerekebilir. Bu durum genelde söz konusu animasyonla ilgili
bazı değerlerin önceden bilinmemesinden kaynaklanır. Örneğin dinamik
olarak yarattığınız bir Silverlight nesnesine bağlı bir animasyon
hazırlamak isteyebilirsiniz, fakat hedef nesnenin özellikleri belli
olmadığı için animasyonu da yaratmanız mümkün olmayacaktır veya
animasyonla ilgili bazı değerleri AJAX ile sunucu tarafından alıyor
olabilirsiniz. Bu gibi durumlarda dinamik animasyon yaratabiliyor olmak
hayati öneme sahip.

Silverlight içerisinde dinamik nesneler yaratırken createFromXaml adında
bir metod kullanıyoruz, aynı şekilde dinamil animasyonlar (Storyboard)
yaratırken de yine createFromXaml metodunu kullanıyor olacağız.
createFromXaml metodu yapısı gereği tek bir parametre alıyor, söz konusu
parametre yaratılacak olan nesnenin veya animasyonun XAML kodu.
Animasyon tarafına tam olarak geçmeden önce gelin aşağıdaki şekilde bir
Silverlight projesi yaratalım.

<Canvas

  xmlns="http://schemas.microsoft.com/client/2007"

  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

  Width="300"
Height
="300"

  Background="White"

  x:Name="Page"

  MouseLeftButtonDown="Tiklandi"

  >

  <Ellipse
Width
="45" Height="45"
Fill
="#FFFF0000" Canvas.Left="22"
Canvas.Top
="27" x:Name="Top"
RenderTransformOrigin
="0.5,0.5">

    <Ellipse.RenderTransform>

      <TransformGroup>

        <ScaleTransform
ScaleX
="1" ScaleY="1"/>

        <SkewTransform
AngleX
="0" AngleY="0"/>

        <RotateTransform
Angle
="0"/>

        <TranslateTransform X="0" Y="0"/>

      </TransformGroup>

    </Ellipse.RenderTransform>

  </Ellipse>

</Canvas>

Yukarıdaki Silverlight uygulamamız içerisinde adını Top koyduğumuz
bir Ellipse nesnesi yer alıyor. Ayrıca Silverlight uygulamamızın ana
öğesi olan root Canvas'ın da MouseLeftButtonDown durumuna bir
event handler bağlamış durumdayız. Birazdan Tiklandi adındaki
JavaScript fonksiyonumuzu yazmaya başlayacağız.

Uygulamamızda amacımız Silverlight içerisinde kullanıcı her nereye
tıklarsa tıklasın topun hoş bir animasyon ile o noktaya gitmesini
sağlamak. Bunun için tabi ki her animasyon (StoryBoard) nesneleri
yaratmamız gerekecek fakat bu animasyonların özellikleri şu anda belli
değil çünkü kullanıcının sahnede nereye tıklayacağını bilmiyoruz. O
nedenle animasyonları dinamik olarak tıklama anında yaratarak
çalıştırmamız gerekecek. Yaratacağımız animasyonların şablonu aşağıdaki
gibi olmalı.

    <Storyboard
x
:Name="Storyboard1">

      <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName
="Top"
Storyboard.TargetProperty
="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">

        <SplineDoubleKeyFrame KeyTime="00:00:01"
Value
="185"/>

      </DoubleAnimationUsingKeyFrames>

      <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName
="Top"
Storyboard.TargetProperty
="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">

        <SplineDoubleKeyFrame KeyTime="00:00:01"
Value
="200"/>

      </DoubleAnimationUsingKeyFrames>

    </Storyboard>

Yukarıdaki kod içerisinde Top nesnemizin sahnedeki yerini
değiştiriyoruz. Bu animasyonu hızlı bir şekilde Blend ile yaratarak
örnek XAML kodunu kopyaladık. Animasyon içerisinde özellikle koyu
yazılan yerlerdeki Value değerlerine dikkat etmekte fayda var. Bu
değerlerin Top'un gideceği hedef X ve Y koordinatları. Şimdi geçip
yavaş yavaş Tiklandi JavaScript fonksiyonumuzu yazmaya başlayalım.

function Tiklandi(sender, args)

{

    var TiklananYer =
args.getPosition(null);

    var AnimXAML = '<Storyboard
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Name="Storyboard'
+ TiklananYer.X.toString() +
TiklananYer.Y.toString() + '"><DoubleAnimationUsingKeyFrames
BeginTime="00:00:00" Storyboard.TargetName="Top"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)"><SplineDoubleKeyFrame
KeyTime="00:00:01" Value="'
+ (TiklananYer.X -
sender.findName("Top").width) +
'"/></DoubleAnimationUsingKeyFrames><DoubleAnimationUsingKeyFrames
BeginTime="00:00:00" Storyboard.TargetName="Top"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)"><SplineDoubleKeyFrame
KeyTime="00:00:01" Value="'
+ (TiklananYer.Y -
sender.findName("Top").height) +
'"/></DoubleAnimationUsingKeyFrames></Storyboard>';

    var Anim =
sender.getHost().content.createFromXaml(AnimXAML);

    sender.resources.Add(Anim);

    Anim.Begin();

}

Yukarıdaki fonksiyon istediğimiz işlemi tamamlamamız için yeterli. Gelin
bu fonksiyon içerisinde neler yaptığımıza bir bakalım. Birinci satırda
hemen TiklananYer adındaki bir değişkene fare ile tıklanan noktanın
koordinatlarını kaydediyoruz. Bunun için Tiklandi fonksiyonumuza
gelen ikinci parametre olan args üzerinden getPosition metodunu
kullanıyoruz. Bir sonraki adımda sıra geldi yaratacağımız animasyonun
XAML kodunu hazırlamaya.

AnimXAML adında bir değişkene Blend içerisinde hazırladığımız XAML
metnini aktarıyoruz. Fakat bunu yaparken metin içerisindeki bazı şeyleri
de JavaScript ile atamamız gerekiyor. Örneğin hem X hem de Y yönünde
gidilmesi hedeflenen noktanın koordinatlarını TiklananYer
değişkenimizden alarak XAML içerisine yerleştiriyoruz. Top nesnemizin
tam olarak tıklanan noktayı ortalayabilmesi için fareden gelen
koordinatların topun yüksekliğini veya genişliğini çıkartmayı da
unutmamamız gerek. XAML kodu içerisinde değiştirdiğimiz bir diğer
özellik de StoryBoard nesnesinin adı. Her tıklama işleminde yeni bir
StoryBoard yaratıp Silverlight animasyonumuza ekleyeceğimiz için
farklı isimler vermemiz gerekecek. Aynı isimde birden çok StoryBoard
ekleyemeyiz. Bunun için biz örneğimizde X ve Y koordinatlarını metin
olarak StoryBoard adının sonuna ekledik. Kullanıcının aynı noktaya
tıklamayacağını ümit ediyoruz :) İsterseniz siz söz konusu animasyonun
var olup olmadığını kontrol ederek daha sağlıklı bir işleyiş de
sağlayabilirsiniz. Animasyon varsa yaratmadan doğrudan
çalıştırabilirsiniz.

createFromXaml metodu ile hazırlamış olduğumuz XAML kodundan
StoryBoard nesnemizi yarattırarak Anim adında bir değişkene
aktarıyoruz. Artık sıra geldi bu animasyonu Silverlight sayfamızın
kaynaklarına (resource) eklemek. O işlemi de tamamladıktan sonra
artık animasyonumuzu çalıştırabiliriz.

Uygulamayı çalıştırdığınızda Silverlight içerisinde nereye tıklarsanız
tıklayın topun son tıklanan yere doğru hareket ettiğini göreceksiniz.
Eğer top tıkladığınız noktaya ulaşmadan başka bir yere tıklarsanız
yönünü değiştirerek oraya doğru geldiğini de görebilirsiniz. Bunun
nedeni böyle bir durumda iki farklı animasyonun yaratılarak
çalıştırılıyor olması. Son biten animasyon son başlatılan olacağı için
top en sonunda kendisini son tıklanan noktada bulacaktır.

Hepinize kolay gelsin.