如何让动画从悬停开始 - 故事板

Posted 2023-03-29

【中文标题】如何让动画从悬停开始 - 故事板

【英文标题】：How to make animation start at hovering - storyboard

【发布时间】：2017-12-20 21:56:02

【问题描述】：

如何让TextBlock在进入（悬停）按钮时开始动画

在TextBlock 我希望<EventTrigger RoutedEvent 将在Input2 MouseEnter，我该怎么做

<EventTrigger RoutedEvent=Input2.MouseEnter 无法识别

按钮：

<Button Grid.Row="0" Name="Input2" Click="Input_Click" MouseEnter="Input_MouseEnter" Background="x:Null" BorderBrush="x:Null" Foreground="x:Null">
                <Button.Template>
                    <ControlTemplate>
                        <Border HorizontalAlignment="Center" VerticalAlignment="Center" >
                            <Image Source= "C:\Users\Me\input.png"
                               Width="40" 
                               Height="40"/>
                        </Border>
                    </ControlTemplate>
                </Button.Template>
            </Button> 

TextBlock：

<TextBlock Grid.Row="0" Name="Input_Name1" Text="Input" FontSize="40" FontFamily="/10KHours;component/Font_count/#Dancing Script" VerticalAlignment="Center" Height="48" Margin="65.346,33.6,-102.081,36">
                <TextBlock.Triggers>
                    <EventTrigger RoutedEvent="TextBlock.Loaded">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation
                                            Storyboard.TargetName="Input_Name1" 
                                            Storyboard.TargetProperty="Opacity"
                                            From="1.0" To="0.0" Duration="0:0:5" 
                                            AutoReverse="true" RepeatBehavior="1x">
                                </DoubleAnimation>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </TextBlock.Triggers>
            </TextBlock>

【问题讨论】：

您的具体问题是什么？你试过什么吗？什么没用？您似乎已经了解如何启动动画以响应事件。你用按钮试过了吗？提供一个很好的minimal reproducible example，说明您所做的尝试，准确解释该代码的作用，您希望它做什么，以及具体您遇到了什么问题。

【参考方案1】：

改变TextBlock 样式的基本思路是完全正确的。添加一个DataTrigger 并将其绑定到您要悬停的Button 的IsMouseOver。使用IsMouseOver 是获取所需信息的最简单方法。这是一个最小的例子：

<Button x:Name="btn" Content="Hover me"/>
<TextBlock x:Name="tb" Text="Input">
    <TextBlock.Style>
        <Style TargetType="x:Type TextBlock">
            <Style.Triggers>
                <DataTrigger Binding="Binding ElementName=btn, Path=IsMouseOver" Value="True">
                    <DataTrigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation
                                    Storyboard.TargetProperty="Opacity"
                                    From="1.0" To="0.0" Duration="0:0:1" 
                                    AutoReverse="true" RepeatBehavior="1x">
                                </DoubleAnimation>
                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.EnterActions>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </TextBlock.Style>
</TextBlock>

【讨论】：

为什么选择 DataTrigger？ 也应该这样做

是的，但他需要获得不同元素的IsMouseOver。

哦，现在我明白了；o)