Silverlight ile bir EKG animasyonu

0 dakikada yazıldı

8738 defa okundu

Düzenle

Bu makalemizde Silverlight ile bir EKG animasyonu yapacağız. Önce EKG
çizimimizi Expression Design ile yapmalıyız. Bunun için 300*200px
yeni bir dosya yaratarak "Pen Tool" ile sahneye bir doğru çizelim.
Sonrasında çizdiğimiz doğruya "Add Anchor Point" aracını kullanarak
birkaç nokta ekleyelim. Son olarak bu eklediğimiz noktalardan
istediklerimizi "Direct Selection Tool" ile seçerek yukarı veya
aşağı sürükleyerek bir EKG çizimi yaratabiliriz.

Expression Design içerisinde EKG çizimimiz.
Expression Design içerisinde EKG çizimimiz.

Çizimimiz tamamlandığında göre sıra geldi bu çizimi vektörel olarak
Expression Blend tarafına almaya. File / Export menüsünden yola
çıkarak Silverlight Canvas seçeneği üzerinden bir XAML çıktısı alıyoruz.
XAML dosyası içerisindeki Layer1 adındaki Canvas elementini Blend
içerisine kopyalayacağız. Tabi bunun için önce Expression Blend 2
ile yeni bir Silverlight projesi yaratmamız gerekiyor.

Expression Design'dan aldığımız XAML kodunu Blend 2 içerisine
yapıştırdığımızda Silverlight uygulamamızın XAML kodu aşağıdaki şekilde
oluyor.

<Canvas

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

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

  Width="300"
Height
="200"

  Background="White"

  x:Name="Page"

  >

  <Canvas
x
:Name="Layer_1"
Width
="300" Height="200"
Canvas.Left
="0" Canvas.Top="0">

    <Path
Width
="300.488" Height="194.519"
Canvas.Left
="-0.594986" Canvas.Top="5.19727"
Stretch
="Fill" StrokeThickness="2"
StrokeLineJoin
="Round" Stroke="#FF000000"
Data
="F1 M 0.405014,137.11L
30.6097,137.11L 42.6763,76.7877L 53.0284,146.736L 59.0672,127.484L
67.733,137.11L 153.962,137.11L 181.568,6.19727L 203.997,198.717L
223.839,65.2365L 241.092,151.87L 248.857,137.11L
298.893,137.11"/>

  </Canvas>

</Canvas>

Kod içerisinde Path olarak gözüken kısım bizim çizimimiz ta kendisi.
Layer_1 adındaki Canvas da Expression Design tarafındaki
Layer'ımız. Şimdi sıra geldi ince ayarlar yapmaya. İlk olarak
Silverlight animasyonunun fonunu siyah yapalım, sonra da Path nesnemizin
Stroke rengini parlak yeşile çevirelim. Böylece koyu bir arkaplan
üzerinde yeşil kalp atışları gözükecek. Kalp atışlarının normal EKG gibi
gözükmesi için bir maske kullanacağız. Maske olarak kullanılmak üzere
sahnenin kenarına ekranın dışına bir dikdörtgen çizelim.

Maskemiz kenarda bizi bekliyor.
Maskemiz kenarda bizi bekliyor.

Maskemizi çizdiğimize göre sıra geldi onu gerçekten Path'imize maske
olarak atamaya. Bunun için Expression Blend 2 içerisinde "Objects and
Timeline
" panelinde hem Path'in içerisinde bulunduğu Canvas'ı hem de
dikdörtgenimizi seçerek sağ tuş ile tıklıyoruz. Gelen menüden "Path /
Make Clipping Path"
komutunu vererek dikdörtgenin bir maske haline
gelmesini sağlıyoryz.

"Make Clipping Path" ile maskeleme.
"Make Clipping Path" ile maskeleme.

Şimdi sora geldi gerekli animasyonu yaratmaya. Animasyonumuzda maske
olarak ayarladığımız dikdörgenin ekranın solundan sağına doğru dolaşması
gerekiyor. Bunun için yeni bir StoryBoard yaratalım. Sahne ilk
açıldığında animasyonun otomatik başlaması için "Create as a resource"
seçeneğini deaktif bırakalım.

Animasyonu maskemize vereceğimiz için bir şekilde maskemizi seçebiliyor
olmamız gerekir. Maskeleme yaptığınız herhangi bir nesneyi seçerek araç
çubuğundan "Direct Selection Tool"'u seçtiğinizde maskeye müdahale
edebildiğinizi göreceksiniz. Bu şekilde animasyonumuz içerisinde iki
farklı KeyFrame kaydederek maskeyi farklı konumlara getirebiliriz.

Artık animasyonumuz hazır. Son olarak StoryBoard'un RepeatBehavior
özelliğini de Forever yaparsanız sürekli tekrar edecektir.
Uygulamanın son haline ait XAML kodu aşağıdaki şekilde.

<Canvas

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

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

  Width="300"
Height
="200"

  Background="#FF000000"

  x:Name="Page"

  >

  <Canvas.Triggers>

    <EventTrigger
RoutedEvent
="Canvas.Loaded">

      <BeginStoryboard>

        <Storyboard
RepeatBehavior
="Forever"
x
:Name="Storyboard1">

          <PointAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName
="Layer_1"
Storyboard.TargetProperty
="(UIElement.Clip).(PathGeometry.Figures)[0].(PathFigure.StartPoint)">

            <SplinePointKeyFrame KeyTime="00:00:00"
Value
="-31.5,-28.5"/>

            <SplinePointKeyFrame KeyTime="00:00:02"
Value
="308,-29.5"/>

          </PointAnimationUsingKeyFrames>

          <PointAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName
="Layer_1"
Storyboard.TargetProperty
="(UIElement.Clip).(PathGeometry.Figures)[0].(PathFigure.Segments)[0].(LineSegment.Point)">

            <SplinePointKeyFrame KeyTime="00:00:00"
Value
="-9.5,-28.5"/>

            <SplinePointKeyFrame KeyTime="00:00:02"
Value
="330,-29.5"/>

          </PointAnimationUsingKeyFrames>

          <PointAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName
="Layer_1"
Storyboard.TargetProperty
="(UIElement.Clip).(PathGeometry.Figures)[0].(PathFigure.Segments)[1].(LineSegment.Point)">

            <SplinePointKeyFrame KeyTime="00:00:00"
Value
="-9.5,228.5"/>

            <SplinePointKeyFrame KeyTime="00:00:02"
Value
="330,227.5"/>

          </PointAnimationUsingKeyFrames>

          <PointAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName
="Layer_1"
Storyboard.TargetProperty
="(UIElement.Clip).(PathGeometry.Figures)[0].(PathFigure.Segments)[2].(LineSegment.Point)">

            <SplinePointKeyFrame KeyTime="00:00:00"
Value
="-31.5,228.5"/>

            <SplinePointKeyFrame KeyTime="00:00:02"
Value
="308,227.5"/>

          </PointAnimationUsingKeyFrames>

        </Storyboard>

      </BeginStoryboard>

    </EventTrigger>

  </Canvas.Triggers>

    <Canvas
x
:Name="Layer_1"
Width
="300" Height="200"
Canvas.Left
="0" Canvas.Top="0">

     
<
Canvas.Clip>

        <PathGeometry>

          <PathFigure
IsClosed
="True" StartPoint="-31.5,-28.5">

            <LineSegment
Point
="-9.5,-28.5"/>

            <LineSegment
Point
="-9.5,228.5"/>

            <LineSegment
Point
="-31.5,228.5"/>

          </PathFigure>

        </PathGeometry>

     
</
Canvas.Clip>

    <Path
Width
="300.488" Height="194.519"
Canvas.Left
="-0.594986" Canvas.Top="5.19727"
Stretch
="Fill" StrokeThickness="2"
StrokeLineJoin
="Round" Stroke="#FF23FF00"
Data
="F1 M 0.405014,137.11L
30.6097,137.11L 42.6763,76.7877L 53.0284,146.736L 59.0672,127.484L
67.733,137.11L 153.962,137.11L 181.568,6.19727L 203.997,198.717L
223.839,65.2365L 241.092,151.87L 248.857,137.11L
298.893,137.11"/>

  </Canvas>

</Canvas>

Hepinize kolay gelsin.