Академия Microsoft:

Основы XAML
[+]
Опубликован: 23.01.2009 | Доступ: свободный | Студентов: 1539 / 149 | Оценка: 4.33 / 4.22 | Длительность: 13:08:00
Темы: Компьютерная графика, Программирование
Специальности: Программист
Теги: bezier curve, condenser, deep zoom, deep zoom composer, javascript, microsoft word, miter, monotype, nonzero, quadratic, silverlight, анимация, браузеры, вертикальный порядок, видео, графика, интерфейсы, приложения, радиальный градиент, редакторы, форматы, цвета, элементы
Лекция 7:

Анимация в XAML-графике
A
|
версия для печати
< Лекция 6 || Лекция 7: 1234567 || Лекция 8 >

Линейные опорные кадры

Элемент LinearDoubleKeyFrame позволяет "встраиваться" в линейную анимацию, задавая промежуточные значения свойств:

<Rectangle Canvas.Top="40" Width="20" 
Height="20" Fill="red"
 x:Name="myRectangle">
<Rectangle.Triggers> 
   <EventTrigger RoutedEvent="Rectangle.Loaded"> 
    <BeginStoryboard> 
     <Storyboard> 
      <DoubleAnimationUsingKeyFrames RepeatBehavior=
      "Forever"  
      Storyboard.TargetName="myRectangle" 
      Storyboard.TargetProperty="(Canvas.Left)" > 
      <LinearDoubleKeyFrame KeyTime="0:0:1" 
      Value="100" /> 
      <LinearDoubleKeyFrame KeyTime="0:0:9" 
      Value="200" /> 
     </DoubleAnimationUsingKeyFrames>       
    </Storyboard> 
   </BeginStoryboard> 
  </EventTrigger> 
 </Rectangle.Triggers> 
</Rectangle>

В этом примере прямоугольник сначала за одну секунду достигнет точки 100, а затем из нее будет в течение восьми секунд двигаться в точку 200. Здесь получаются три опорных точки – начальная, конечная и промежуточная. Заметим, однако, что перемещение прямоугольника между этими опорными точками по-прежнему осуществляется линейным образом. Корневой элемент анимации DoubleAnimation заменился элементом DoubleAnimationUsingKeyFrames. Для анимации с помощью элементов ColorAnimation, PointAnimation используется вставка элементов LinearColorKeyFrame и LinearPointKeyFrame. В табл.7.6 приводятся примеры с использованием линейных опорных кадров.

Таблица 7.6. Анимация с линейными опорными кадрами
№ Код Вид в браузере
7.6.1
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="200" Height="100"
Background="White"
x:Name="Page">
  
<Rectangle Canvas.Left ="5" 
Canvas.Top="5" Width="190" 
Height="90" Stroke="green" 
StrokeThickness="2" Fill="Transparent" />

<Rectangle Canvas.Top="40"
 Width="20" Height="20" 
Fill="red" x:Name="myRectangle">
<Rectangle.Triggers> 
    <EventTrigger RoutedEvent="Rectangle.
Loaded"> 
      <BeginStoryboard> 
        <Storyboard> 
         <DoubleAnimationUsingKeyFrames 
RepeatBehavior="Forever"  
            Storyboard.TargetName="myRectangle" 
            Storyboard.TargetProperty="(Canvas.Left)" > 
           <LinearDoubleKeyFrame KeyTime=
"0:0:1" Value="100" /> 
            <LinearDoubleKeyFrame KeyTime="
            0:0:9" Value="200" /> 
          </DoubleAnimationUsingKeyFrames>       
        </Storyboard> 
      </BeginStoryboard> 
    </EventTrigger> 
  </Rectangle.Triggers> 
</Rectangle>  

</Canvas>

Описание
Изменение абсциссы прямоугольника. Начальное время для всех элементов LinearDoubleKeyFrame одинаковое. Это означает, что перемещение из точки 100 в точку 200 будет осуществляться не в течении 9 секунд, а 8
№ Код Вид в браузере
7.6.2
<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="100"
Background="White"
x:Name="Page">
  
<Rectangle Canvas.Left ="5" 
Canvas.Top="5" Width="190"
 Height="90" Stroke="green"
 StrokeThickness="2" Fill="Transparent" />

<Rectangle Canvas.Top="40" 
Width="20" Height="20" 
Fill="red" x:Name="myRectangle">
<Rectangle.Triggers> 
    <EventTrigger RoutedEvent="Rectangle.Loaded"> 
      <BeginStoryboard> 
        <Storyboard> 
         <DoubleAnimationUsingKeyFrames 
RepeatBehavior="Forever"  
            Storyboard.TargetName="myRectangle" 
            Storyboard.TargetProperty="(Canvas.Left)" > 
           <LinearDoubleKeyFrame Key
Time="0:0:3" Value="50" /> 
            <LinearDoubleKeyFrame KeyTime="
0:0:4" Value="100" /> 
    <LinearDoubleKeyFrame 
KeyTime="0:0:7" Value="150" /> 
            <LinearDoubleKeyFrame KeyTime="
0:0:8" Value="200" /> 
          </DoubleAnimationUsingKeyFrames>       
        </Storyboard> 
      </BeginStoryboard> 
    </EventTrigger> 
  </Rectangle.Triggers> 
</Rectangle>  

</Canvas>

Описание
Перемещение прямоугольника в четыре этапа. В течение первых трех секунд (KeyTime="0:0:3") происходит движение в точку 50. Затем за одну секунду (KeyTime="0:0:4") происходит рывок в точку 100. Затем снова три секунды медленного движения в точку 150 (KeyTime="0:0:7"). Завершает анимацию снова секундный рывок в точку 200 (KeyTime="0:0:8").
№ Код Вид в браузере
7.6.3
<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="100"
Background="White"
x:Name="Page">
  
   <Ellipse Canvas.Left="20" Canvas.Top="10"  
Width="160" Height="80" Fill="red"
 x:Name="myEllipse">
    <Ellipse.Triggers>
     <EventTrigger RoutedEvent="Rectangle.Loaded">
      <BeginStoryboard>
        <Storyboard>
           <ColorAnimationUsingKeyFrames Storyboard.
TargetName="myEllipse" 
           Storyboard.TargetProperty= 
           "(Shape.Fill).(SolidColorBrush.Color)" 
             BeginTime="0:0:2"
 FillBehavior="HoldEnd">
             <LinearColorKeyFrame  KeyTime="0:0:5" 
Value="Orange" /> 
            <LinearColorKeyFrame  KeyTime="0:0:8" 
Value="Yellow" /> 
        </ColorAnimationUsingKeyFrames>
             </Storyboard>
             </BeginStoryboard>
             </EventTrigger>
            </Ellipse.Triggers>
        </Ellipse>

</Canvas>

Описание
Элемент ColorAnimation заменяется на ColorAnimationUsingKeyFrames. Здесь, в отличие от соответствующего примера без опорных кадров, мы однозначно указываем граничные цвета анимации
№ Код Вид в браузере
7.6.4
<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="250" Height="200"
Background="White"
x:Name="Page">
  
<!--Исходный объект Path
<Path Stretch="Fill" 
Stroke="green" StrokeThickness="3" 
Canvas.Left="25" Canvas.Top="25" 
Data="M25,75 Q100,25 175,75" />-->

<Path Stroke="green" 
StrokeThickness="3"> 
  <Path.Data> 
    <PathGeometry> 
      <PathFigure StartPoint="25,75"> 
        <QuadraticBezierSegment 
x:Name="mySegment" 
          Point1="100,25"
 Point2="175,75"  /> 
      </PathFigure> 
    </PathGeometry> 
  </Path.Data> 
  <Path.Triggers> 
    <EventTrigger RoutedEvent="
Path.Loaded"> 
      <BeginStoryboard> 
        <Storyboard> 
          <PointAnimationUsingKeyFrames 
Storyboard.TargetName="mySegment" 
            Storyboard.TargetProperty="Point1"> 
  <LinearPointKeyFrame  KeyTime="0:0:3" 
Value="100,225" /> 
  <LinearPointKeyFrame  KeyTime="0:0:6" 
Value="100,125" /> 
           <LinearPointKeyFrame  KeyTime="0:0:9" 
Value="100,325" /> 
      
  </PointAnimationUsingKeyFrames>
        </Storyboard> 
      </BeginStoryboard> 
    </EventTrigger> 
  </Path.Triggers> 
</Path>

</Canvas>

Описание
Элемент PointAnimation заменяется на PointAnimationUsingKeyFrames. Серия изменений кооринат точки Point1 сопровождается изменением формы всей фигуры

Дискретные опорные кадры

В рассмотренных выше случаях использования линейных опорных кадров, также как и в линейной анимации, изменения свойств между промежуточными значениями осуществляется плавно. В случае использования дискретных опорных кадров переход между значениями осуществляется скачком. Здесь мы действительно имеем дело с отдельными кадрами, которым могут меняться совершенно независимо друг от друга. В табл. 7.7приводятся примеры подобных роликов.

Дальше >>
< Лекция 6 || Лекция 7: 1234567 || Лекция 8 >

Вопросы и ответы

вопросов: 0