[Решено] Может ли эта анимация не спамить? - PullRequest
0 голосов
/ 21 апреля 2020

Я довольно новичок в xaml и wpf в целом, поэтому извините, если решение простое или xaml, который я использовал, плох. Я не уверен, возможно ли это, но если есть какое-то решение, пожалуйста, дайте мне знать! Вот видео того, что я пытаюсь исправить: https://imgur.com/a/NmnV50S

Если видео не объясняет мою проблему, вот оно: может ли анимация кнопки не быть спамом или ошибкой, когда пользователь очень быстро перемещает курсор по кнопке?

Вот xaml для анимации:

 <Style x:Key="SlidingButtonToRight" TargetType="Button">
            <Setter Property="Width" Value="270"/>
            <Setter Property="Height" Value="80"/>
            <Setter Property="UseLayoutRounding" Value="True"/>
            <Setter Property="ClipToBounds" Value="True"/>
            <Setter Property="FontSize" Value="20"/>
            <Setter Property="Button.RenderTransform">
                <Setter.Value>
                    <TranslateTransform/>
                </Setter.Value>
            </Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border Name="border" BorderThickness="0" BorderBrush="Black" Background="{TemplateBinding Background}">
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Opacity" Value="0.8" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <EventTrigger RoutedEvent="MouseEnter">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="(Image.RenderTransform).(TranslateTransform.X)" From="0" To="110"   Duration="0:0:0.2" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
                <EventTrigger RoutedEvent="MouseLeave">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="(Image.RenderTransform).(TranslateTransform.X)" From="110" To="0"  Duration="0:0:0.3" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Style.Triggers>
        </Style>
        <Style x:Key="SlidingButtonToLeft" TargetType="Button" BasedOn="{StaticResource SlidingButtonToRight}">
            <Style.Triggers>
                <EventTrigger RoutedEvent="MouseEnter">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="(Image.RenderTransform).(TranslateTransform.X)" From="0" To="-110"  Duration="0:0:0.2" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
                <EventTrigger RoutedEvent="MouseLeave">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="(Image.RenderTransform).(TranslateTransform.X)" From="-110" To="0"  Duration="0:0:0.3" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Style.Triggers>
        </Style>

Вот xaml для кнопки, на которой я использую стиль анимации:

<Button x:Name="button4" Click="Button4_Click" Style="{DynamicResource SlidingButtonToLeft}" Margin="0,50,-186,0" VerticalAlignment="Top" HorizontalAlignment="Right">
        <Button.Background>
            <ImageBrush ImageSource="Assets/programm-bt.png"/>
        </Button.Background>
        <TextBlock Text="Programm" TextAlignment="Left" Width="105" Margin="0,0,-25,0" HorizontalAlignment="Center"/>
    </Button>

Ответы [ 2 ]

1 голос
/ 21 апреля 2020

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

Вы можете запустить с .2 секунд и настроить оттуда:

<Storyboard>
    <DoubleAnimation
        BeginTime="0:0:0.2"
        Storyboard.TargetProperty="(Image.RenderTransform).(TranslateTransform.X)"
        From="-110"
        To="0"
        Duration="0:0:0.3" />
</Storyboard>
0 голосов
/ 21 апреля 2020

Я понял, удалив из , анимация не начинается с 0 каждый раз, когда пользователь наводит курсор на кнопку. Вот видео от до и после изменения.

 <Style.Triggers>
                <EventTrigger RoutedEvent="MouseEnter">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="(Image.RenderTransform).(TranslateTransform.X)"
                                                 To="110"
                                                 Duration="0:0:0.2"
                                                 />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
                <EventTrigger RoutedEvent="MouseLeave">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation
                                                 Storyboard.TargetProperty="(Image.RenderTransform).(TranslateTransform.X)"
                                                 To="0"
                                                 Duration="0:0:0.3" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Style.Triggers>
...