这个动画不能垃圾邮件吗？

Posted 2023-02-19

【中文标题】这个动画不能垃圾邮件吗？

【英文标题】：Can this animation not spam?

【发布时间】：2020-08-03 12:48:03

【问题描述】：

总的来说，我对 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>

【参考方案1】：

要减少动画垃圾邮件，您可以在 MouseLeave 动画上设置 BeginTime 属性，以便用户有足够的时间在动画开始之前将鼠标从按钮上移开。

您可以从 0.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 开始。这是一个 video

【参考方案2】：

我想通了，通过删除 From ，每次用户将鼠标悬停在按钮上时，动画都不会从 0 开始。这是来自before 和after 变化的视频。

 <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>