Window Class Coursework MainWindow xmlns http schemas microsoft com wi

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<Window x:Class="Coursework.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="CourseBook" Height="350" Width="525">
<Window.Resources>
<PathGeometry x:Key="pathg">
<PathFigure IsClosed="True">
<PolyLineSegment Points="0,0 220,0 220,175 0,175" /> <!-- Траектория движения шарика по координатам {0;0} {220;0} {220;175} {0;175} во вкладке "Анимация пути" -->
</PathFigure>
</PathGeometry>
</Window.Resources>
<Grid Background="LightBlue"> <!-- Цвет фона -->
<TabControl> <!-- Создаем экземпляр класса вкладок -->
<TabItem Header="Анимация интерполяция"> <!-- Создаем вкладку -->
<Button Name="btn1" Content="Click me" Background="CadetBlue" Width="200" Height="50"> <!-- Создаем кнопку -->
<Button.Triggers> <!-- Создаем событие -->
<EventTrigger RoutedEvent="Button.Click"> <!-- Устанавливаем событие на нажатие кнопки -->
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)" Duration="0:0:1" AutoReverse="True" Storyboard.TargetName="btn1" From="CadetBlue" To="Yellow" /> <!-- Изменение цвета кнопки со скорость 1, с инверсией действия, с изначально заданным цветом кнопки -->
<DoubleAnimation Storyboard.TargetProperty="Width" RepeatBehavior="Forever" AutoReverse="True" Storyboard.TargetName="btn1" From="200" To="300" Duration="0:0:1" /> <!-- Изменение ширины кнопки со скоростью 1, с инверсией действия, с изначально заданной шириной -->
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
</TabItem>
<TabItem Header="Анимация ключевого кадра">
<Canvas Margin="10">
<Ellipse Name="ellipsess" Width="15" Height="15" Canvas.Top="180" Canvas.Left="120"> <!-- Создаем шарик -->
<Ellipse.Fill>
<RadialGradientBrush RadiusX="2" RadiusY="2" GradientOrigin="0.2, 0.2"> <!-- Указываем радиус шарика -->
<GradientStop Color="Red" Offset="0" /> <!-- Указываем цвет отблеска -->
<GradientStop Color="Coral" Offset="1" /><!-- Указываем основной цвет шарика -->
</RadialGradientBrush>
</Ellipse.Fill>
<Ellipse.Triggers>
<EventTrigger RoutedEvent="Window.Loaded"> <!-- Устанавливаем событие на загрузку окна -->
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Top)"
Duration="0:0:1" AutoReverse="True" RepeatBehavior="Forever" DecelerationRatio="1" > <!-- Указываем направленние движения шарика, скорость и инверсию движения, а так же время повторения (все время) -->
<LinearDoubleKeyFrame KeyTime="0%" Value="180" /> <!-- Указываем первоначальное положение шарика (первый кадр) и его скорость -->
<LinearDoubleKeyFrame KeyTime="33.3333%" Value="120" /> <!-- Указываем первоначальное положение шарика (второй кадр) и его скорость -->
<LinearDoubleKeyFrame KeyTime="66.6666%" Value="60" /> <!-- Указываем первоначальное положение шарика (третий кадр) и его скорость -->
<LinearDoubleKeyFrame KeyTime="99.9999%" Value="0" /> <!-- Указываем первоначальное положение шарика (четвертый кадр) и его скорость -->
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Ellipse.Triggers>
</Ellipse>
</Canvas>
</TabItem>
<TabItem Header="Анимация пути">
<Canvas HorizontalAlignment="Left" Margin="130, 50">
<Path Stroke="LightBlue" Data="{StaticResource pathg}" Canvas.Top="10" Canvas.Left="10" /> <!-- Подключаем траекторию движения шарика и задаем направление -->
<Ellipse Name="ellipse1" Width="20" Height="20" Canvas.Top="180" Canvas.Left="120"> <!-- Создаем шарик размерос 20x20 -->
<Ellipse.Fill>
<RadialGradientBrush RadiusX="1" RadiusY="1" GradientOrigin="0.3, 0.3"> <!-- Задаем цвет шарика (отблиск и основу) -->
<GradientStop Color="LightCoral" Offset="0" />
<GradientStop Color="Red" Offset="1" />
</RadialGradientBrush>
</Ellipse.Fill>
<Ellipse.Triggers>
<EventTrigger RoutedEvent="Window.Loaded"> <!-- Устанавливаем событие на загрузку окна -->
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingPath Storyboard.TargetProperty="(Canvas.Top)"
Duration="0:0:4" RepeatBehavior="Forever"
PathGeometry="{StaticResource pathg}" Source="Y" > <!-- Запускаем анимацию движения шарика по заданной траектории по оси Y со скоростью 4 -->
</DoubleAnimationUsingPath>
<DoubleAnimationUsingPath Storyboard.TargetProperty="(Canvas.Left)"
Duration="0:0:4" RepeatBehavior="Forever"
PathGeometry="{StaticResource pathg}" Source="X" > <!-- Запускаем анимацию движения шарика по заданной траектории по оси X со скоростью 4 -->
</DoubleAnimationUsingPath>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Ellipse.Triggers>
</Ellipse>
</Canvas>
</TabItem>
</TabControl>
</Grid>
</Window>