Практическое руководство. Анимация изменений размера с использованием ключевых кадров
Обновлен: Ноябрь 2007
В этом примере показано, как анимировать изменения размера с использованием полных кадров.
Пример
В следующем примере для анимации свойства Size элемента управления ArcSegment используется класс SizeAnimationUsingKeyFrames. В этой анимации используются три полных кадра следующим образом:
В течение первой половины секунды анимации используется экземпляр класса LinearSizeKeyFrame, чтобы плавно увеличить размер дуги. Линейные полные кадры, такие как LinearSizeKeyFrame, создают плавный линейный переход между значениями.
В конце следующей половины секунды используется экземпляр класса DiscreteSizeKeyFrame, чтобы резко увеличить размер дуги. Дискретные полные кадры, такие как DiscreteSizeKeyFrame, создают резкие переходы между значениями, то есть изменения размера происходят внезапно и не остаются незамеченными.
В течение последних двух секунд используется экземпляр класса SplineSizeKeyFrame для увеличения размера дуги. Полные сплайновые кадры, такие как SplineSizeKeyFrame, создают переменный переход между значениями в соответствии со значениями свойства KeySpline. В этом примере увеличение размера дуги сначала происходит медленно, а затем экспоненциально ускоряется к концу временного сегмента.
<!-- This example shows how to use the SizeAnimationUsingKeyFrames to animate the
size of an ArcSegment. -->
<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" >
<Canvas HorizontalAlignment="Left" Margin="0" >
<!-- Create an arc on the screen that animates its size when it loads. -->
<Path Stroke="Black" StrokeThickness="2" >
<Path.Data>
<PathGeometry>
<PathGeometry.Figures>
<PathFigureCollection>
<PathFigure StartPoint="100,200">
<PathFigure.Segments>
<PathSegmentCollection>
<ArcSegment x:Name="myArcSegment" Size="90,80"
SweepDirection="Clockwise" Point="500,200" />
</PathSegmentCollection>
</PathFigure.Segments>
</PathFigure>
</PathFigureCollection>
</PathGeometry.Figures>
</PathGeometry>
</Path.Data>
<Path.Triggers>
<EventTrigger RoutedEvent="Path.Loaded">
<BeginStoryboard Name="myBeginStoryBoard">
<Storyboard>
<!-- Animating the Size property uses 3 KeyFrames. -->
<SizeAnimationUsingKeyFrames
Storyboard.TargetName="myArcSegment"
Storyboard.TargetProperty="Size" >
<SizeAnimationUsingKeyFrames.KeyFrames>
<!-- Using a LinearSizeKeyFrame, the size of the arc increases
gradually over the first half second of the animation. -->
<LinearSizeKeyFrame KeyTime="0:0:0.5" Value="120,120" />
<!-- Using a DiscreteSizeKeyFrame, the size increases suddenly
after the first second of the animation. -->
<DiscreteSizeKeyFrame KeyTime="0:0:1" Value="150,150" />
<!-- Using a SplineSizeKeyFrame, the Size increases slowly at first
and then speeds up exponentially. This KeyFrame takes 2 seconds. -->
<SplineSizeKeyFrame KeySpline="0.6,0.0 0.9,0.00" KeyTime="0:0:3" Value="300,300" />
</SizeAnimationUsingKeyFrames.KeyFrames>
</SizeAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Path.Triggers>
</Path>
</Canvas>
</Page>
Полный пример см. в разделе Пример анимации с ключевыми кадрами.
См. также
Задачи
Пример анимации с ключевыми кадрами
Основные понятия
Общие сведения об анимации по ключевым кадрам
Ссылки
Другие ресурсы
Практические руководства, посвященные анимации по полным кадрам