WPF Animation: как заставить ее скользить?

Так что я просто занялся анимацией, и я хотел сделать анимацию «Slide out», и мне это удалось. Но теперь я хочу, чтобы он скользил по той же кнопке. Как будто я щелкаю по нему, и он выдвигается, а затем я хочу, чтобы он снова сдвинулся, когда я снова щелкаю по нему.

БЕЗ какого-либо кода, поэтому просто через xaml

Вот XAML

<Grid>
    <Grid.Resources>
        <Storyboard x:Key = "TransformImage">
            <DoubleAnimation
                Storyboard.TargetName = "MovingImage"
                Storyboard.TargetProperty = "(Image.RenderTransform).(TranslateTransform.X)"
                By = "130" Duration = "0:0:0.3">
            </DoubleAnimation>
        </Storyboard>

        <Storyboard x:Key = "TransformButton">
            <DoubleAnimation
                Storyboard.TargetName = "btnChange"
                Storyboard.TargetProperty = "(Button.RenderTransform).(TranslateTransform.X)"
                By = "130" Duration = "0:0:0.3">
            </DoubleAnimation>
        </Storyboard>
    </Grid.Resources>


    <Grid.Triggers>
        <EventTrigger RoutedEvent = "Button.Click" SourceName = "btnChange">
            <BeginStoryboard Storyboard = "{StaticResource TransformImage}"/>
            <BeginStoryboard Storyboard = "{StaticResource TransformButton}"/>
        </EventTrigger>
    </Grid.Triggers>

    <StackPanel Orientation = "Horizontal" Margin = "0">
        <Image x:Name = "MovingImage" Source = "logo.png"
               MaxWidth = "120">
            <Image.RenderTransform>
                <TranslateTransform />
            </Image.RenderTransform>
        </Image>
    </StackPanel>

    <StackPanel
        Panel.ZIndex = "1"
        Height = "450" 
          Width = "120"
          HorizontalAlignment = "Left"
          Background = "Black"></StackPanel>

    <Button Margin = "130,0,0,0" Height = "40" Width = "120"
            Content = "Show Image" x:Name = "btnChange"
            HorizontalAlignment = "Left" >
        <Button.RenderTransform>
            <TranslateTransform />
        </Button.RenderTransform>
    </Button>
</Grid>

c# wpf xaml animation storyboard

11.08.2018 23:24

Стоит ли изучать PHP в 2026-2027 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

6 716

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вам необходимо сохранить текущее состояние слайд-анимации при нажатии на кнопку и на его основе запустить соответствующую раскадровку.

Например, вы можете использовать ToggleButton, у которого есть свойство IsChecked (или свойство в модели представления).

Чтобы избежать дублирования триггеров / стилей, я поместил Image и ToggleButton в один и тот же StackPanel.

<Grid>
    <Grid.Resources>

        <system:Double x:Key = "SlideOffSet">130</system:Double>

        <Storyboard x:Key = "SlideRight">
            <DoubleAnimation Storyboard.TargetProperty = "(UIElement.RenderTransform).(TranslateTransform.X)"
                             From = "0" To = "{StaticResource SlideOffSet}"
                             Duration = "0:0:0.3" />
         </Storyboard>

         <Storyboard x:Key = "SlideLeft">
             <DoubleAnimation Storyboard.TargetProperty = "(UIElement.RenderTransform).(TranslateTransform.X)"
                              From = "{StaticResource SlideOffSet}" To = "0" 
                              Duration = "0:0:0.3" />
         </Storyboard>

    </Grid.Resources>

    <StackPanel Orientation = "Horizontal" Margin = "0">
        <StackPanel.Style>
            <Style TargetType = "StackPanel">
                <Style.Triggers>
                    <DataTrigger Binding = "{Binding IsChecked, ElementName=SlideState}" Value = "True">
                        <DataTrigger.EnterActions>
                            <BeginStoryboard Storyboard = "{StaticResource SlideRight}" />
                        </DataTrigger.EnterActions>
                        <DataTrigger.ExitActions>
                            <BeginStoryboard Storyboard = "{StaticResource SlideLeft}" />
                        </DataTrigger.ExitActions>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </StackPanel.Style>

        <StackPanel.RenderTransform>
            <TranslateTransform />
        </StackPanel.RenderTransform>

        <Image Source = "logo.png" MaxWidth = "120" />
        <ToggleButton x:Name = "SlideState" Margin = "10,0,0,0" Height = "40" Width = "120" Content = "Show Image" />

    </StackPanel>

    <StackPanel
        Panel.ZIndex = "1"
        Height = "450" 
        Width = "120"
        HorizontalAlignment = "Left"
        Background = "Black"></StackPanel>
</Grid>

Кроме того, я бы не рекомендовал использовать свойство ByDoubleAnimation:
. Если анимация все еще работает, и вы снова нажмете кнопку, тогда вторая анимация будет запущена в неправильном месте (будет использоваться значение X из первой анимации, которая не завершена) - Нажмите кнопку быстро много раз, и вы увидите проблему.

Вместо этого используйте свойства From и To.

Ух ты! Я понятия не имел, спасибо за все отличные указатели! Если бы я мог проголосовать за это дважды, я бы сделал это!

— 12.08.2018 02:42

12.08.2018 02:27