Pull to refresh

Silverlight & псевдо-анимированные изображения.

Reading time 3 min
Views 1.4K

С места, в карьер.


Начал разбираться с технологией Silverlight 2.0 и столкнулся с неприятностья, что нет встроенной поддержки анимированных изображений *.gif.

Зато есть возможность воспроизводить видео :). Да и вообще Silverlight на первый взгляд выглядит довольно «неказисто», на фоне старшего брата WPF. Но я придерживаюсь мнения, что если что-то не получается сделать с использованием «вот этого», то либо мы плохо знаем «вот это самое», либо проблема в чём-то ещё и только в последнюю очередь стоит «катить бочки» на «вот это самое».
Остановимся на том, что Silverlight умеет выводить изображения и умеет выводить часть изображения, чтож это уже довольно не плохо и виден свет в конце тоннеля. Осталось только вспомнить, как до эры 3D делались игры и в этих играх выводились спрайты.
Возьмём любую игру(которая находится под рукой), и «выдерем» оттуда спрайты. В моём случае это оказалась Ultima 8. Затем воспользуемся графическим редактором и подготовим наше изображение, понятно что нужно иметь прозрачный фон, но Silverlilght поддерживает прозрачность только у изображений png(32bits), неизвестно с чем это связано, но на меньшее он не согласен. Получилось примерно следующее.

image

Итого у нас на руках имеется «покадровая анимация». Теперь создадим пустой проект Silverlight и произведём изменения в «отображении» страницы Page.xaml.

  1. <Canvas x:Name="LayoutRoot" Background="Yellow">
  2.   <Image Source="Images/ultima.png" Name="testImage" Height="50" Width="405"
  3.    Canvas.Left="0" Canvas.Top="30">
  4.    <Image.Clip>
  5.      <RectangleGeometry Rect="0,0,45,50" x:Name="tempRectangle">
  6.      </RectangleGeometry>
  7.    </Image.Clip>
  8.   </Image>
  9. </Canvas>
* This source code was highlighted with Source Code Highlighter.


Ну и конечно добавим получившееся у нас изображение в проект.
И так, что мы сделали?
1. Добавили изображение, назвав testImage, и задали его размеры.
2. Сделали «вырезку» части этого изображения прикрепив к прямоугольнику (tempRectangle), имеющего размеры 45х50.
Что осталось?
Осталось «активировать» анимацию. Для этого идём на страницу с кодом и производим нехитрые манипуляции:
1. Добавляем таймер и индекс.

  1. private Timer t;
  2. private Int32 i = 0;
* This source code was highlighted with Source Code Highlighter.


2. Инициализируем таймер, он нужен для обновления анимации.
3. Делаем обработчик события для таймера.

Итого получаем примерно такой код:

  1. namespace SilverLightDrawing
  2. {
  3.   public partial class Page : UserControl
  4.   {
  5.     private Timer t;
  6.     private Int32 i = 0;
  7.  
  8.     public Page()
  9.     {
  10.       InitializeComponent();
  11.  
  12.       t = new Timer(ShowAnimation, null, 3000, 100);
  13.     }
  14.  
  15.     private void ShowAnimation(object state)
  16.     {
  17.       i += 45;
  18.  
  19.       if (i > 400)
  20.       {
  21.         i = 0;
  22.       }
  23.  
  24.       LayoutRoot.Dispatcher.BeginInvoke(delegate()
  25.       {
  26.         Canvas.SetLeft(testImage, -i);
  27.         tempRectangle.Rect = new Rect(i, 0, 45, 50);
  28.       });
  29.     }
  30.   }
  31. }
* This source code was highlighted with Source Code Highlighter.


Как видно из кода, мы «двигаем» прямоугольник и двигаем само изображение, тем самым создавая анимацию.

В следующей части статьи, будет спроектирован полноценный класс для вывода анимации и возможно его расширение.
Tags:
Hubs:
+12
Comments 17
Comments Comments 17

Articles