RotateAnimation для фигуры (прямоугольника) в коде

@Евгения ТН · Регистрация: 10.12.2019

Студворк — интернет-сервис помощи студентам

Ребят, помогите мне пожалуйста кто может с кодом. Я создала фигуру (Rectangle) в XAML и поставила на фон картинку колеса, так же на фон Canvas поставила картинку дороги, я должна была сделать в коде анимацию того, как оно едет с одной стороны дороги на другую и при этом крутиться.
Я сделала анимацию движения, но с анимацией вращения у меня есть некоторые проблемы, я не знаю как грамотно ее использовать, помогите кому не трудно, пожалуйста

Вот как выглядит сама прога, на всякий случай:

RotateAnimation для фигуры (прямоугольника) в коде

Вот код:

C#
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
 public partial class MainWindow : Window
    {
        bool start = false;  //Не обращайте внимания, мне это нужно в будующем для старта и остановки анимации
        public MainWindow()
        {
            InitializeComponent();
        }
 
        private void btnStart_Click(object sender, RoutedEventArgs e)
        {
 
            ThicknessAnimation tha1 = new ThicknessAnimation();
            tha1.From = new Thickness(-400,0,0,0);
            tha1.To = new Thickness(1600,0,0,0);
            tha1.Duration = TimeSpan.FromSeconds(10);
 
 
            DoubleAnimation da1 = new DoubleAnimation();
            da1.From = 0;
            da1.To = 360;
            da1.Duration = TimeSpan.FromSeconds(3);
 
            //if (start == false)
            //{
                tha1.AutoReverse = false;
                tha1.RepeatBehavior = RepeatBehavior.Forever;
                recWheel.BeginAnimation(Rectangle.MarginProperty, tha1);
 
            da1.RepeatBehavior = RepeatBehavior.Forever;
            recWheel.BeginAnimation(RotateTransform.AngleProperty, da1);
        }
    }

@Элд Хасп · 06.12.2021, 09:44

Сообщение от Евгения ТН

Я создала фигуру (Rectangle) в XAML и поставила на фон картинку колеса,

Как это?
Покажите XAML вашей компоновки (полностью).
От способа реализации зависит и нужно анимировать.

@Евгения ТН · 06.12.2021, 16:19 **[ТС]**

Хорошо, вот:

XML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<Window x:Class="Wpf_Hw6.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Wpf_Hw6"
        mc:Ignorable="d"
         Title="MainWindow" Height="900" Width="1600" ResizeMode="NoResize" Background="LightSkyBlue">
    <Canvas >
        <Canvas.Background>
            <ImageBrush ImageSource="image/road.png"/>
        </Canvas.Background>
        <Rectangle x:Name="recWheel" Height="400" Width="400" Margin="-400,0,0,0" Canvas.Top="240">
            <Rectangle.Fill>
                <ImageBrush ImageSource="image/Wheel.png"/>
            </Rectangle.Fill>
        </Rectangle>
        <Button x:Name="btnStart" Content="Start" Width="200" Height="100" Background="IndianRed" FontWeight="Bold" FontSize="48" Canvas.Left="10" Canvas.Top="749" Click="btnStart_Click"></Button>
    </Canvas>
</Window>

@Элд Хасп · 06.12.2021, 20:51

Сообщение от Евгения ТН

вот:

ЖЕСТЬ!

XML
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
<Window x:Class="Wpf_Hw6.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Wpf_Hw6"
        mc:Ignorable="d"
         Title="MainWindow" Height="900" Width="1600" ResizeMode="NoResize" Background="LightSkyBlue">
    <Canvas>
        <Canvas.Background>
            <ImageBrush ImageSource="image/road.png"/>
        </Canvas.Background>
        <Image Source="image/Wheel.png" Height="400" Width="400" Canvas.Top="240" Canvas.Left="-400" RenderTransformOrigin="0.5,0.5">
            <Image.RenderTransform>
                <TransformGroup>
                    <RotateTransform x:Name="rotateWheel" Angle="0"/>
                    <TranslateTransform x:Name="translateWheel" X="0"/>
                </TransformGroup>
            </Image.RenderTransform>
        </Image>
        <Button x:Name="btnStart" Content="Start" Width="200" Height="100" Background="IndianRed"
                FontWeight="Bold" FontSize="48" Canvas.Left="10" Canvas.Top="749"
                Click="btnStart_Click"></Button>
    </Canvas>
</Window>

C#
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
        private void btnStart_Click(object sender, RoutedEventArgs e)
        {
            DoubleAnimation translateX = new DoubleAnimation
            {
                From = 0,
                To = 1600,
                Duration = TimeSpan.FromSeconds(10)
            };
 
 
            // Формула сдвига от угла поворота колеса: L = π * D * ⍺ / 360.
            // Из неё выводит окончательный угол
            double anle = (translateX.To ?? 0 - translateX.From ?? 0) * 360 / (Math.PI * 400);
            DoubleAnimation rotateAngle = new DoubleAnimation
            {
                From = 0,
                To = anle,
                Duration = translateX.Duration
            };
 
            translateWheel.BeginAnimation(TranslateTransform.XProperty, translateX);
            rotateWheel.BeginAnimation(RotateTransform.AngleProperty, rotateAngle);
        }

@Евгения ТН · 07.12.2021, 00:10 **[ТС]**

Спасибо огромное, очень выручили)
Пойду тогда ознакомлюсь с кодом и доделаю задачу

@Элд Хасп · 07.12.2021, 01:44

Евгения ТН, чуть понавороченее вариант с реверсом, отключением кнопки на время анимации и определением параметров анимации по размерам UI элементов:

XML
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
<Window x:Class="Wpf_Hw6.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Wpf_Hw6"
        mc:Ignorable="d"
         Title="MainWindow" Height="900" Width="1600" ResizeMode="NoResize" Background="LightSkyBlue">
    <Canvas x:Name="canvasRoad">
        <Canvas.Background>
            <ImageBrush ImageSource="image/road.png"/>
        </Canvas.Background>
        <Image x:Name="imageWheel" Source="image/Wheel.png" Height="400" Width="400" Canvas.Top="240" Canvas.Left="-400" RenderTransformOrigin="0.5,0.5">
            <Image.RenderTransform>
                <TransformGroup>
                    <RotateTransform x:Name="rotateWheel" Angle="0"/>
                    <TranslateTransform x:Name="translateWheel" X="0"/>
                </TransformGroup>
            </Image.RenderTransform>
        </Image>
        <Button x:Name="btnStart" Content="Start" Width="200" Height="100" Background="IndianRed"
                FontWeight="Bold" FontSize="48" Canvas.Left="10" Canvas.Top="749"
                Click="btnStart_Click"></Button>
    </Canvas>
</Window>

C#
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
        private void btnStart_Click(object sender, RoutedEventArgs e)
        {
            btnStart.IsEnabled = false;
            DoubleAnimation translateX = new DoubleAnimation
            {
                From = 0,
                To = canvasRoad.ActualWidth,
                Duration = TimeSpan.FromSeconds(10)
            };
 
 
            // Формула сдвига от угла поворота колеса: L = π * D * ⍺ / 360.
            // Из неё выводит окончательный угол
            double anle = (translateX.To ?? 0 - translateX.From ?? 0) * 360 / (Math.PI * imageWheel.ActualWidth);
            DoubleAnimation rotateAngle = new DoubleAnimation
            {
                From = 0,
                To = anle,
                Duration = translateX.Duration
            };
 
            if (translateWheel.X > 0)
            {
                (translateX.To, translateX.From) = (translateX.From, translateX.To);
                (rotateAngle.To, rotateAngle.From) = (rotateAngle.From, rotateAngle.To);
            }
 
            translateX.Completed += OnAnimationCompleted;
            translateWheel.BeginAnimation(TranslateTransform.XProperty, translateX);
            rotateWheel.BeginAnimation(RotateTransform.AngleProperty, rotateAngle);
        }
 
        private void OnAnimationCompleted(object sender, EventArgs e)
        {
            if (translateWheel.X > 0)
            {
                btnStart.Content = "Реверс";
            }
            else
            {
                btnStart.Content = "Start";
            }
 
            btnStart.IsEnabled = true;
        }

Новые блоги и статьи Все статьи Все блоги /
Мысли в слух. Про "навсегда". kumehtar 16.04.2026 Подумалось тут, что наверное очень глупо использовать во всяких своих установках понятие "навсегда". Это очень сильное понятие, и я только начинаю понимать край его смысла, не смотря на то что давно. . .	My Business CRM MaGz GoLd 16.04.2026 Всем привет, недавно возникла потребность создать CRM, для личных нужд. Собственно программа предоставляет из себя базу данных клиентов, в которой можно фиксировать звонки, стадии сделки, а также. . .	Знаешь почему 90% людей редко бывают счастливыми? kumehtar 14.04.2026 Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.	Фиксация колонок в отчете СКД Maks 14.04.2026 Фиксация колонок в СКД отчета типа Таблица. Задача: зафиксировать три левых колонки в отчете. Процедура ПриКомпоновкеРезультата(ДокументРезультат, ДанныеРасшифровки, СтандартнаяОбработка) / / . . .
Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .	Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .	Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .

@Евгения ТН 0 / 0 / 0 Регистрация: 10.12.2019 Сообщений: 51
	07.12.2021, 00:10 [ТС]
	Спасибо огромное, очень выручили) Пойду тогда ознакомлюсь с кодом и доделаю задачу 0

RotateAnimation для фигуры (прямоугольника) в коде

Решение