На данный момент существует огромное количество статей, которые рассказывают, как создавать анимацию с помощью XAML в Blend, так что я не планирую рассказывать что-то в этом направлении. Люди недоумевают - "Silverlight - копия Flash, только от Microsoft, нет никакой разницы". Если вы следуете данному принципу - это бессмысленно.

Мы должны сделать что-нибудь, чтобы показать весь потенциал Silverlight в области игр. Так что в своем учебном пособии, я буду использовать максимально по возможности C#, а не XAML. Он более гибок в архитектуре игр, нежели Flash и наконец, главной целью всех статей на данную тему будет создание игрового движка, я хочу показать моё виденье реализации данного вопроса.

Давайте вернемся к заголовку статьи - "Как создать анимацию для объекта?"

В Silverlight существуют 3 метода создания анимации.

Способ анимации №1. Раскадровка (Storyboard)

Данный метод рекомендуется Microsoft, так что представлю его первым.

Сейчас я сделаю демо, чтобы показать, как использовать раскадровку в C#.

Вначале, создайте Silverlight проект, откройте MainPage.xaml и измените xaml файл, как показано ниже:

<UserControl x:Class="SilverlightTutorialApplication.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    >

    <Canvas x:Name="Carrier" Width="800" Height="600" Background="Silver" MouseLeftButtonDown="Carrier_MouseLeftButtonDown" />
</UserControl>

В данном куске кода, я создаю холст с именем Carrier и устанавливаю размер 800 x 600. Задаю задний фон серебряным, ни в коем случае не убирайте задний фон, иначе на пустом холсте не будет обрабатываться событие MouseLeftButtonDown.

Почему я использую Canvas, как контейнер? Потому что могу задать абсолютное позиционирование, что способствует удобному управлению перемещением объекта.

Далее, создаем динамический объект в code-behind файле MainPage.xaml:

private Rectangle rect;
public MainPage()
{
    InitializeComponent();
    rect = new Rectangle()
    {
        Fill = new SolidColorBrush(Colors.Red),
        Width = 50,
        Height = 50,
        RadiusX = 5,
        RadiusY = 5
    };
    Carrier.Children.Add(rect);
    Canvas.SetLeft(rect, 0);
    Canvas.SetTop(rect, 0);
}

Я создаю квадрат размером 50х50 пикселей с углом сглаживания 5x5 и добавляю его в Carrier, как дочерний элемент. Я использую Canvas.SetLeft и Canvas.SetTop для инициализации положения квадрата внутри Carrier.

Теперь, я создаю анимацию по событию MouseLeftButtonDown, квадрат будет перемещаться в точку, которую мы задаем мышкой по щелчку:

private void Carrier_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    //получаю координаты 
    Point p = e.GetPosition(Carrier);
    //создаю раскадровку
    Storyboard storyboard = new Storyboard();
    //создаю анимацию по оси X
    DoubleAnimation doubleAnimation = new DoubleAnimation()
    {
        From = Canvas.GetLeft(rect),
        To = p.X,
        Duration = new Duration(TimeSpan.FromMilliseconds(500))
    };
    Storyboard.SetTarget(doubleAnimation, rect);
    Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath(@"(Canvas.Left)"));
    storyboard.Children.Add(doubleAnimation);

    //создаю анимацию по оси Y
    doubleAnimation = new DoubleAnimation()
    {
        From = Canvas.GetTop(rect),
        To = p.Y,
        Duration = new Duration(TimeSpan.FromMilliseconds(500))
    };
    Storyboard.SetTarget(doubleAnimation, rect);
    Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath("(Canvas.Top)"));
    storyboard.Children.Add(doubleAnimation);
    //запускаю анимацию
    storyboard.Begin();
}

С приведенного выше кода, я получаю координаты клика мышки по Carrier и присваиваю их переменной p. Далее создаю раскадровку и два объекта DoubleAnimation, первый - анимация по оси X, второй - анимация по оси Y. Добавляю эти два объекта DoubleAnimation в раскадровку. И наконец, я использую метод раскадровки Begin для перемещения квадрата с начального месторасположения до переданных координат мышки.

Нажмите Ctrl+F5 для запуска проекта, кликайте мышкой в любом месте окна и наслаждайтесь движением квадрата.

Итого

Раскадровка является основой векторной анимации на временной шкале, она отличается от традиционной анимации, которая меняет изображения. Принцип ее работы основывается на постоянном изменении свойств объекта.

Следующая глава расскажет о втором методе создания анимации. Следите за новостями.

Демо к данной главе можно загрузить тут

Источник - Jianqiang Bao