Animasyonlu örnek bir Silverlight düğmesi hazırlıyoruz.

0 dakikada yazıldı

7010 defa okundu

Düzenle

Bu makalemizde hızlı bir şekilde örnek bir Silverlight düğmesi
tasarlayarak fare ile üzerine gelindiğinde parlamasını üzerinden
çekildiğinde de eski haline geri dönmesini sağlayacağız. İlk olarak
düğmemizi çizmek için Expression Blend 2 içerisinde yeni bir Silverlight
projesi yaratalım ve Rectangle çizim aracı ile bir dikdörtgen çizelim.
Dikdörtgeni çizdikten sonra Expression Blend 2 içerisinde "Properties"
tabından "Fill" kısmında SolidColor seçerek kırmızı tonlarından biri
seçebiliriz. Son olarak da dikdörtgenimizin kenarlarında aşağıdaki
fotoğraftaki gibi fare ile tutarak köşelerini yuvarlayalım.

Silverlight düğmemizi yaratıyoruz.
Silverlight düğmemizi yaratıyoruz.

Düğmemizi çizdiğimize göre parlama efekti için biraz değişiklik yapalım.
SolidColor yerine Gradient seçerek beyazdan kırmızıya bir geçiş
ayarlayarak Expression Blend 2 içerisinde sol araç çubuğundan "Brush
Transform" aracını kullanarak aşağıdaki şekilde bir parlama efekti
hazırlayalım.

Parlama efekti hazır.
Parlama efekti hazır.

Sıra geldi fare ile üzerine geldiğimizde çalışacak olan animasyonu
hazırlamaya. Yapacağımız şey birer saniye arayla BrushTranform aracı ile
parlama efektinin yani Gradient'ın yönünü değiştirmek. Animasyonumuzu
hazırladıktan sonra düğmenin üzerinden fare ile çekildiğimizde
çalıştırılmak üzere animasyonumuzun bir kopyasını yaratacağız.

Animasyonumuzun bir kopyasını alalım.
Animasyonumuzun bir kopyasını alalım.

Animasyonumuzun kopyasını aldıktan sonra "geri çekilme" animasyonunu
yaratmak için bir önceki animasyondan aldığımız kopyayı tersine
çevireceğiz. Bunun için yukarıdaki görselde de görebileceğiniz Blend
içerisinde animasyon menüsünden "Reverse" komutunu kullanacağız. Böylece
her iki animasyonumuz da hazır. Artık sıra geldi her iki animasyonun da
zamanında çalışmasını sağlayacak kodları yazmaya.

<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"

  >

  <Canvas.Resources>

   
<
Storyboard x:Name="Anim1">

      <PointAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName
="rectangle"
Storyboard.TargetProperty
="(Shape.Fill).(RadialGradientBrush.GradientOrigin)">

        <SplinePointKeyFrame KeyTime="00:00:00"
Value
="-0.071,-0.091"/>

        <SplinePointKeyFrame KeyTime="00:00:01"
Value
="1.008,-0.061"/>

      </PointAnimationUsingKeyFrames>

    </Storyboard>

   
<
Storyboard x:Name="Anim_Copy1">

      <PointAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName
="rectangle"
Storyboard.TargetProperty
="(Shape.Fill).(RadialGradientBrush.GradientOrigin)">

        <SplinePointKeyFrame KeyTime="00:00:00"
Value
="1.008,-0.061"/>

        <SplinePointKeyFrame KeyTime="00:00:01"
Value
="-0.071,-0.091"/>

      </PointAnimationUsingKeyFrames>

    </Storyboard>

  </Canvas.Resources>

  <Rectangle
MouseEnter
="Geldi" MouseLeave="Gitti"
Width
="127" Height="33"
Stroke
="#FF000000" Canvas.Left="62"
Canvas.Top
="163" RadiusY="10.5"
RadiusX
="10.5" RenderTransformOrigin="0.189,0.091"
x
:Name="rectangle">

    <Rectangle.Fill>

      <RadialGradientBrush GradientOrigin="1.008,-0.061">

        <GradientStop
Color
="#FFFFFFFF" Offset="0"/>

        <GradientStop
Color
="#FFFF0000" Offset="1"/>

      </RadialGradientBrush>

    </Rectangle.Fill>

  </Rectangle>

</Canvas>

Yukarıdaki XAML kodunda hazırladığımız tüm animasyonlar ve düğmemiz yer
alıyor. Düğmemizin MouseEnter ve MouseLeave durumları ayrı
JavaScript fonksiyonlarına bağlanmış durumda. Aşağıda söz konusu
JavaScript fonksiyonlarını da inceleyebilirsiniz.

function Gitti(sender)

{

  sender.findName("Anim1").Begin();

}

function Geldi(sender)

{

  sender.findName("Anim_Copy1").Begin();

}

Her bir fonksiyon kendisine gönderilen Sender parametresi üzerinden
düğmemizi yakalayarak, onun üzerinden de findName ile animasyonları
bulup çalıştırıyor.

Böylece üzerine gelince veya fare ile üzerinden ayrıldığımızda uygun
animasyonları çalıştıran bir düğmemiz oldu. Hepimize hayırlı olsun ;)