Анимация, наверно, это самое интересное, что присутствует в подобных технологиях. Анимация позволяет нам создавать очень красивые и яркие эффекты. Также делает наше приложение живым. Это существенно отличает его от обычного веб приложения. Причем мы можем применять ее абсолютно везде, где мы захотим. Таким образом, создавая отклик на любое действие пользователя. Ну естественно Silverlight позволяет нам это делать причем очень удобно и эффективно.
И так приступим. Конечно же, как всегда начну с азов. Чтобы было понятней как что и почему.
Что у нас из себя представляет анимация? Это последовательность быстро сменяющихся статичных картинок, которые в совокупности дают нам эффект движения. Наш глаз сам собирает из в движение. Мы просто строим эту последовательность. Естественно современные средства создания анимации, давно уже прошли тот этап, когда нам надо формировать каждый кадр (вспомните блокноты, в которых рисовали птичек и т.п. вещи). Теперь у нас есть возможность это все обойти. Нам нужно задавать только начальное и конечное положение объекта в пространстве, а Silverlight сделает остальное за нас.
Например, у нас есть прямоугольник, мы хотим, чтобы у нас он сместился по горизонтали на 200 пикселей. Начальная точка нам известна, мы уже находимся в ней. Задаем конечную точку, и прямоугольник смещается на 200 пикселей. Это теория, теперь практика.
Анимации бывают двух типов:
- Анимации по значениям
- Анимация на основе ключевых точек
Анимация по значениям – это как раз случай указанный выше. Когда мы указываем, от какого, до какого значения будет изменяться свойство нашего объекта.
Анимация на основе ключевых точек – это случай когда мы указываем ключевые точки в которых происходит изменение свойств объекта, этих точек может быть множество. Например, когда мы указываем движения по треугольнику, где ключевые точки это вершины треугольника.
И так чтобы создать анимацию, делаем следующие шаги:
1) Создаем наш Rectangle:
Можно также создать его и в коде, если вам так удобней.
2) Теперь для того чтобы запустить анимацию нам надо знать сколько, она будет длиться. Для задания времени используется объект Duration.
3) Создаем анимацию, указываем ей длительность.
4) Указываем объект, к которому будет применена анимация
5) Указываем свойство, которое мы будем изменять
6) Указываем новое значение
7) Создаем объект StoryBoard, и добавляем анимацию в его коллекцию
8) Запускаем StoryBoard
Код XAML:
<UserControl x:Class="AnimationExamples.Page" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="400" Height="300"> <Canvas x:Name="LayoutRoot" Background="White"> <Rectangle x:Name="MyRectangle" Width="100" Height="50" Fill="Aqua" /> <Button x:Name="Start" Content="Start" Width="50" Height="25" Canvas.Top="100" Click="Start_Click" /> </Canvas> </UserControl>
Код C#:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace AnimationExamples
{
public partial class Page : UserControl
{
public Page()
{
InitializeComponent();
}
private void Start_Click(object sender, RoutedEventArgs e)
{
//для того чтобы у нас прямоугольник устанавливался в начальное положение для повторной анимации
MyRectangle.SetValue(Canvas.LeftProperty, (double)0);
//Устаналиваем длительность 1 сек
//в данном случае длительность анимации и всей коллекции совпадают
Duration duration = new Duration(TimeSpan.FromSeconds(1));
//создаем анимацию
DoubleAnimation da = new DoubleAnimation();
//Создаем коллекцию анимаций Storyboard
Storyboard sb = new Storyboard();
//Задаем длительность
da.Duration = duration;
sb.Duration = duration;
//Устанавливаем объект к которому будет применятся анимация
Storyboard.SetTarget(da, MyRectangle);
//Устанавливаем свойство, которое будем изменять
Storyboard.SetTargetProperty(da, new PropertyPath("(Canvas.Left)"));
//Устанавливаем новое значение свойства
da.To = 200;
//Добавляем в коллекцию
sb.Children.Add(da);
//начинаем анимацию
sb.Begin();
}
}
}
Добавим еще какую-нибудь анимацию, например, вращение.
XAML:
<UserControl x:Class="AnimationExamples.Page" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="400" Height="300"> <Canvas x:Name="LayoutRoot" Background="White"> <Rectangle x:Name="MyRectangle" Width="100" Height="50" Fill="Aqua" > <Rectangle.RenderTransform> <TransformGroup> <RotateTransform Angle="0" /> </TransformGroup> </Rectangle.RenderTransform> </Rectangle> <Button x:Name="Start" Content="Start" Width="50" Height="25" Canvas.Top="100" Click="Start_Click" /> </Canvas> </UserControl>
С#:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace AnimationExamples
{
public partial class Page : UserControl
{
public Page()
{
InitializeComponent();
}
private void Start_Click(object sender, RoutedEventArgs e)
{
//для того чтобы у нас прямоугольник устанавливался в начальное положение для повторной анимации
MyRectangle.SetValue(Canvas.LeftProperty, (double)0);
TransformGroup tg = new TransformGroup();
RotateTransform rt = new RotateTransform();
rt.Angle = 0;
tg.Children.Add(rt);
MyRectangle.RenderTransform = tg;
//Устаналиваем длительность 1 сек
//в данном случае длительность анимации и всей коллекции совпадают
Duration duration = new Duration(TimeSpan.FromSeconds(1));
//создаем анимацию
DoubleAnimation da = new DoubleAnimation();
//Создаем коллекцию анимаций Storyboard
Storyboard sb = new Storyboard();
//Задаем длительность
da.Duration = duration;
sb.Duration = duration;
//Устанавливаем объект к которому будет применятся анимация
Storyboard.SetTarget(da, MyRectangle);
//Устанавливаем свойство, которое будем изменять
Storyboard.SetTargetProperty(da, new PropertyPath("(Canvas.Left)"));
//Устанавливаем новое значение свойства
da.To = 200;
//********* ВРАЩЕНИЕ ***************
DoubleAnimation daRotate = new DoubleAnimation();
//Устанавливаем объект к которому будет применятся анимация
Storyboard.SetTarget(daRotate, MyRectangle);
//Устанавливаем свойство, которое будем изменять
Storyboard.SetTargetProperty(daRotate, new PropertyPath("(Rectangle.RenderTransform).(TransformGroup.Children)[0].(RotateTransform.Angle)"));
//Устанавливаем новое значение свойства
daRotate.To = 360;
//Добавляем в коллекцию
sb.Children.Add(daRotate);
sb.Children.Add(da);
//начинаем анимацию
sb.Begin();
}
}
}Пример анимации с испозование KeyFrame:
XAML:
<UserControl x:Class="AnimationExamples.Page" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="400" Height="300"> <Canvas x:Name="LayoutRoot" Background="White"> <Rectangle x:Name="MyRectangle" Width="100" Height="50" Fill="Aqua" > <Rectangle.RenderTransform> <TransformGroup> <RotateTransform x:Name="AngelTransform" Angle="0" /> </TransformGroup> </Rectangle.RenderTransform> </Rectangle> <Button x:Name="Start" Content="Start" Width="50" Height="25" Canvas.Top="100" Click="Start_Click" /> </Canvas> </UserControl>
С#:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace AnimationExamples
{
public partial class Page : UserControl
{
public Page()
{
InitializeComponent();
}
private void Start_Click(object sender, RoutedEventArgs e)
{
//для того чтобы у нас прямоугольник устанавливался в начальное положение для повторной анимации
MyRectangle.SetValue(Canvas.LeftProperty, (double)0);
//Устаналиваем длительность 1 сек
//в данном случае длительность анимации и всей коллекции совпадают
Duration duration = new Duration(TimeSpan.FromSeconds(1));
//создаем анимацию
DoubleAnimationUsingKeyFrames da = new DoubleAnimationUsingKeyFrames();
//Создаем коллекцию анимаций Storyboard
Storyboard sb = new Storyboard();
//Создаем наши точки (keyFrame) и определяем длительность и значение
LinearDoubleKeyFrame keyFrame = new LinearDoubleKeyFrame();
keyFrame.KeyTime = TimeSpan.FromSeconds((0.25));
keyFrame.Value = 50;
da.KeyFrames.Add(keyFrame);
LinearDoubleKeyFrame keyFrame1 = new LinearDoubleKeyFrame();
keyFrame1.KeyTime = TimeSpan.FromSeconds((0.75));
keyFrame1.Value = 250;
da.KeyFrames.Add(keyFrame1);
LinearDoubleKeyFrame keyFrame2 = new LinearDoubleKeyFrame();
keyFrame2.KeyTime = TimeSpan.FromSeconds((0.5));
keyFrame2.Value = 350;
da.KeyFrames.Add(keyFrame2);
//Задаем длительность
da.Duration = duration;
sb.Duration = duration;
//Устанавливаем объект к которому будет применятся анимация
Storyboard.SetTarget(da, MyRectangle);
//Устанавливаем свойство, которое будем изменять
Storyboard.SetTargetProperty(da, new PropertyPath("(Canvas.Left)"));
//Добавляем в коллекцию
sb.Children.Add(da);
//начинаем анимацию
sb.Begin();
}
}
}
Здесь показаны простые анимации, которые помогут вам понять основы анимации и начать делать свои. В следующем уроке я покажу как создавать анимацию с помощью Blend Studio.
Popularity: 77%
Похожие статьи по SilverLight:
Загрузка ...
Спасибо за статью, помогло.