Member 13485513 Ответов: 1

Перемещение треугольника по заданной координате

Я работаю над проектом и хочу анимировать прямоугольник, чтобы переместить определенное количество координат, которые я установил ранее.

Пример: мой прямоугольник находится в положении (x=0,y=0). Я хочу одним нажатием кнопки заставить его двигаться в положении (x=150, y=230) с интервалом в 100 миллисекунд. Таким образом, одним щелчком мыши он перейдет в (10,25) в первые 100 миллисекунд,(20,35) во вторые 100 миллисекунд и так далее, пока прямоугольник не достигнет конечного положения(x=150, y=230)...

Я работаю с visual studio и blend на Visual C# wpf. Заранее спасибо!:)

Что я уже пробовал:

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }

private void Button_Click(object sender, System.Windows.RoutedEventArgs e)
{
    var myRect = (Rectangle)this.FindName("myRect");
    double x = Canvas.GetLeft(myRect);
    double y = Canvas.GetTop(myRect);

    Canvas.SetLeft(myRect,x+10);
    Canvas.SetTop(myRect,y);


И это в коде XAML:

<Window x:Class="move.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:move"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525">
<StackPanel>
    <Border BorderThickness="1" BorderBrush="Aqua">
        <Canvas Name="PointCanvas" Width="500" Height="294" Margin="9,0,6,0">
            <Rectangle x:Name="myRect" Fill="#FFF5F4F5" Height="39" Canvas.Left="170" Stroke="Black" Canvas.Top="89" Width="89"/>
        </Canvas>
    </Border>
    <Button Name="Move" Click="Button_Click">Move</Button>
</StackPanel>

1 Ответов

Рейтинг:
2

Graeme_Grant

Если вы используете Blend, то он будет генерировать анимацию раскадровки XAML для вас.
1. Добавить новый раскадровки
2. Нажмите на объект для анимации
3. Нажмите на пункт назначения времени на временной шкале
4. переместите объект и/или измените его свойства
5. Раскадровка создана

Нажмите кнопку воспроизведения, чтобы увидеть анимацию. Дальнейшая настройка может быть выполнена.

Теперь вы можете установить триггер события для кнопки в Xaml и очистить сгенерированный код. Это будет выглядеть примерно так:

<Window x:Class="AnimateCanvasObject.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:AnimateCanvasObject"

        mc:Ignorable="d"

        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <Storyboard x:Key="Storyboard1">
            <DoubleAnimationUsingKeyFrames 

                Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)"

                Storyboard.TargetName="rectangle">
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="300"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </Window.Resources>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Canvas x:Name="canvas" VerticalAlignment="Stretch" Background="Green">
            <Rectangle x:Name="rectangle"

                       Fill="#FFF4F4F5" Stroke="Black"

                       Height="100" Width="100"

                       Canvas.Left="10" Canvas.Top="10"

                       RenderTransformOrigin="0.5,0.5">
                <Rectangle.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform/>
                        <SkewTransform/>
                        <RotateTransform/>
                        <TranslateTransform/>
                    </TransformGroup>
                </Rectangle.RenderTransform>
            </Rectangle>
        </Canvas>
        <Button Content="Button"

                HorizontalAlignment="Center"

                VerticalAlignment="Center"

                Padding="10 5" Margin="10" Grid.Row="1">
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <BeginStoryboard Storyboard="{StaticResource Storyboard1}"/>
                </EventTrigger>
            </Button.Triggers>
        </Button>

    </Grid>
</Window>

Если вы хотите сделать это только в коде позади, то я оставлю это упражнение вам. Вот пример того, как это сделать... WPF: анимация TranslateTransform из кода[^]

Member 13485513

Спасибо за решение! Он прекрасно работает по моему желанию. Но я новичок в C# и не очень хорошо понимаю пример кода, который вы мне дали. Надеюсь, вы сможете помочь мне немного больше работать над частью in code. Заранее спасибо!:)

Graeme_Grant

Google - это хорошее место для начала: создание раскадровки wpf из кода - поиск Google[^]

Приведенный выше поиск приведет к появлению этой ссылки: Как анимировать свойство с помощью раскадровки | Microsoft Docs[^] - он будет объяснять как с помощью XAML, так и с помощью закодированных примеров, чтобы вы могли видеть, как одна и та же задача выполняется в обоих направлениях. Как только вы немного понимаете, как это работает, вы готовы к кодированию... удачи вам! :)

Member 13485513

Уважаемый @Graeme_Grant , я попробовал пример кода со страницы StackOverflow(анимация TranslateTransform из кода), который вы мне дали. Есть несколько строк кодов, которые я не понимаю.

С. Завершена +=
(sndr, evtArgs) => {
панель.Детей.Удалить(е);
Ресурсы.Удалить(имя раскадровки);
UnregisterName(translationName);
};
С. Начать();


Или это не относится к моему делу?И я также хотел бы знать о функции хэш-кода, используемой на той же странице.Спасибо!:D