Академия 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 >
Таблица 7.3. Анимация DoubleAnimation
№ Код Вид в браузере
7.3.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> 
      <DoubleAnimation RepeatBehavior=
      "Forever"               
        Storyboard.TargetName="my
        Rectangle" 
        Storyboard.TargetProperty="
        (Canvas.Left)" 
        From="0" To="200" 
Duration="0:0:01" 
        AutoReverse="True" /> 
    </Storyboard> 
  </BeginStoryboard> 
 </EventTrigger> 
</Rectangle.Triggers> 
</Rectangle>  

</Canvas>

Описание
Изменение абсциссы прямоугольника. Значение "Canvas.Left" атрибута Storyboard.TargetProperty было взято в скобки, поскольку оно состоит из двух слов. Анимация будет воспроизводиться бесконечно ( RepeatBehavior="Forever" ), а прямоугольник будет курсировать от одной точки к другой и обратно ( AutoReverse="True" ).
№ Код Вид в браузере
7.3.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> 
    <DoubleAnimation RepeatBehavior="3x"               
      Storyboard.TargetName="myRectangle" 
      Storyboard.TargetProperty="
     (Canvas.Left)" 
    From="0" To="200" 
Duration="0:0:01" 
       AutoReverse="True" /> 
   </Storyboard> 
    </BeginStoryboard> 
  </EventTrigger> 
 </Rectangle.Triggers> 
</Rectangle>  

</Canvas>

Описание
Трехкратное повторение анимации за счет свойства RepeatBehavior="3x".
№ Код Вид в браузере
7.3.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">
  
<Rectangle Canvas.Left ="5" 
Canvas.Top="5" Width="190" 
Height="90" Stroke="green" 
StrokeThickness="2" 
Fill="Transparent" />

<Rectangle Canvas.Left ="90"
 Canvas.Top="40" Width="20" 
Height="20" Fill="red"
 x:Name="myRectangle">
<Rectangle.Triggers> 
  <EventTrigger RoutedEvent="
  Rectangle.Loaded"> 
  <BeginStoryboard> 
   <Storyboard> 
    <DoubleAnimation RepeatBehavior=
    "Forever"               
     Storyboard.TargetName="myRectangle" 
     Storyboard.TargetProperty="
    (Canvas.Top)" 
    From="0" To="100" 
Duration="0:0:05" 
      AutoReverse="True" /> 
    </Storyboard> 
  </BeginStoryboard> 
 </EventTrigger> 
</Rectangle.Triggers> 
</Rectangle>  

</Canvas>

Описание
Изменение ординаты прямоугольника
№ Код Вид в браузере
7.3.4
<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.Left ="0" 
Canvas.Top="40" Width="20"
 Height="20" Fill="red"
 x:Name="myRectangle">
<Rectangle.Triggers> 
 <EventTrigger RoutedEvent=
 "Rectangle.Loaded"> 
  <BeginStoryboard> 
   <Storyboard> 
    <DoubleAnimation RepeatBehavior=
    "Forever"               
    Storyboard.TargetName="
    myRectangle" 
   Storyboard.TargetProperty="
  (Canvas.Top)" 
   From="0" To="100" 
Duration="0:0:05" 
  AutoReverse="True" /> 
  <DoubleAnimation 
  RepeatBehavior="3x"               
  Storyboard.TargetName=
  "myRectangle" 
  Storyboard.TargetProperty=
  "(Canvas.Left)" 
  From="0" To="200" 
Duration="0:0:05" 
    AutoReverse="True" /> 
   </Storyboard> 
  </BeginStoryboard> 
 </EventTrigger> 
</Rectangle.Triggers> 
</Rectangle>  

</Canvas>

Описание
Одновременное увеличение абсциссы и ординаты, в результате чего прямоугольник будет двигаться по диагонали
№ Код Вид в браузере
7.3.5
<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.Left ="5" 
Canvas.Top="5" Width="20" 
Height="20" Fill="red" 
x:Name="myRectangle">
<Rectangle.Triggers> 
  <EventTrigger RoutedEvent="
Rectangle.Loaded"> 
  <BeginStoryboard> 
   <Storyboard> 
    <DoubleAnimation 
    RepeatBehavior="Forever"               
    Storyboard.TargetName=
     "myRectangle" 
     Storyboard.TargetProperty=
    "(Width)" 
    From="0" To="195" 
Duration="0:0:05" 
   AutoReverse="True" /> 
   <DoubleAnimation RepeatBehavior=
   "3x"               
   Storyboard.TargetName=
   "myRectangle" 
   Storyboard.TargetProperty=
   "(Height)" 
   From="0" 
   To="95" 
Duration="0:0:05" 
     AutoReverse="True" /> 
    </Storyboard> 
   </BeginStoryboard> 
  </EventTrigger> 
 </Rectangle.Triggers> 
</Rectangle>  

</Canvas>

Описание
Одновременное увеличение ширины и высоты прямоугольника
№ Код Вид в браузере
7.3.6
<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.Left ="10" 
Canvas.Top="10" Width="180" 
Height="80" Fill="red"
 x:Name="myRectangle">
<Rectangle.Triggers> 
    <EventTrigger RoutedEvent="Rectangle.
Loaded"> 
 <BeginStoryboard> 
  <Storyboard>
   <DoubleAnimation RepeatBehavior=
   "Forever"
    Storyboard.TargetName=
    "myRectangle"
    Storyboard.TargetProperty=
    "(Rectangle.Opacity)" 
    From="1" To="0" 
Duration="0:0:5" 
AutoReverse="True"  /> 
    </Storyboard>
   </BeginStoryboard> 
  </EventTrigger> 
 </Rectangle.Triggers> 
</Rectangle>  

</Canvas>

Описание
Изменение прозрачности фигуры
№ Код Вид в браузере
7.3.7
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="150" Height="150"
Background="White"
x:Name="Page">

<Rectangle Width="150" 
Height="150" 
x:Name="myRectangle">
 <Rectangle.Fill>
  <LinearGradientBrush 
  StartPoint="0,0" 
EndPoint="0,1" x:Name="myLinear
GradientBrush">
  <GradientStop Color="red" 
Offset="-1" x:Name=
"myGradientStop" />
 <GradientStop Color=
 "yellow" 
Offset="1" />
  </LinearGradientBrush>
 </Rectangle.Fill>
  
<Rectangle.Triggers> 
 <EventTrigger RoutedEvent="Rectangle.
 Loaded"> 
  <BeginStoryboard> 
   <Storyboard>
    <DoubleAnimation RepeatBehavior=
    "Forever"
    Storyboard.TargetName=
      "myGradientStop"
       Storyboard.TargetProperty=
      "Offset" 
     From="-1" To="1" 
    Duration="0:0:5" 
     AutoReverse="True"  /> 
     </Storyboard>
    </BeginStoryboard> 
  </EventTrigger> 
 </Rectangle.Triggers> 

</Rectangle>
</Canvas>

Описание
Изменение границы распространения линейного градиента
№ Код Вид в браузере
7.3.8
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="150" Height="150"
Background="White"
x:Name="Page">

 <Ellipse Width="150"
 Height="150" >
   <Ellipse.Fill>
    <RadialGradientBrush>
<GradientStop Color="Red" 
Offset="0" x:Name=
"myGradientStop" />
 <GradientStop Color="Yellow" 
Offset="1" />  
 </RadialGradientBrush>
  </Ellipse.Fill>
      
  <Ellipse.Triggers> 
  <EventTrigger RoutedEvent="Rectangle.
Loaded"> 
 <BeginStoryboard> 
  <Storyboard>
   <DoubleAnimation RepeatBehavior="
Forever"
    Storyboard.TargetName="
myGradientStop"
     Storyboard.TargetProperty="Offset" 
     From="-1" To="1"
 Duration="0:0:5" AutoReverse=
 "True"  /> 
      </Storyboard>
   </BeginStoryboard> 
 </EventTrigger> 
</Ellipse.Triggers> 
    </Ellipse>
</Canvas>

Описание
Изменение границы распространения радиального градиента
№ Код Вид в браузере
7.3.9
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="150" Height="150"
Background="White"
x:Name="Page">

<Ellipse Width = "140" 
Height="140" 
Canvas.Left = "5" 
Canvas.Top="5" Stroke="Red" 
StrokeThickness="5"  
x:Name="myEllipse" >
      
   <Ellipse.Triggers> 
  <EventTrigger RoutedEvent="Rectangle.
Loaded"> 
 <BeginStoryboard> 
  <Storyboard>
   <DoubleAnimation RepeatBehavior="
Forever"
 Storyboard.TargetName="myEllipse"
 Storyboard.TargetProperty=
 "StrokeThickness" 
 From="5" To="50"
 Duration="0:0:5" 
 AutoReverse="True"  /> 
   </Storyboard>
  </BeginStoryboard> 
 </EventTrigger> 
</Ellipse.Triggers> 
  </Ellipse>
</Canvas>

Описание
Изменение ширины контура фигуры
№ Код Описание
7.3.10
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="400" Height="70"
Background="White"
x:Name="Page">
  
  <TextBlock
x:Name="myText"
  FontFamily="Verdana"
  FontSize="32"
  FontWeight="Bold"
  Foreground="Red">
  XAML-графика
  
  <TextBlock.Triggers>
 <EventTrigger RoutedEvent="Rectangle.
Loaded"> 
 <BeginStoryboard> 
  <Storyboard>
   <DoubleAnimation RepeatBehavior=
    "Forever"
     Storyboard.TargetName=
     "myText"
     Storyboard.TargetProperty=
     "FontSize" 
     To="50"  Duration=
     "0:0:5" 
AutoReverse="True"  /> 
    </Storyboard>
  </BeginStoryboard> 
 </EventTrigger> 
  </TextBlock.Triggers>
</TextBlock>

</Canvas>
 Изменение размера шрифта текста
Вид в браузере

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

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

вопросов: 0