UserControl wpf的缩放动画

假设我们有这样的标记：

<Grid Background="Silver" VerticalAlignment="Center" HorizontalAlignment="Center" Width="300" Height="150">
    <Border Background="#FF1D1D1D" >
        <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="45" Text="Привет мир!" Foreground="White"/>
    </Border>
</Grid>

它很简单，只是Grid以一组颜色居中，其中包含Border也有自己的颜色，好吧，它本身包含一个简单的颜色，TextBlock也位于中心并且具有“大”字号。我们的任务是Border让它更小一点，并在鼠标事件上对其进行动画处理。

缩放

对于各种带有比例的操作，在 XAML 中负责RenderTransform，即比例，这是ScaleTransform. 让我们将其应用于上面的标记：

<Grid Background="Silver" VerticalAlignment="Center" HorizontalAlignment="Center" Width="300" Height="150">
    <Border Background="#FF1D1D1D" >
        <Border.RenderTransform>
            <ScaleTransform ScaleX=".5" ScaleY=".5"/>
        </Border.RenderTransform>
        <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="45" Text="Привет мир!" Foreground="White"/>
    </Border>
</Grid>

我们将得到的结果是：

如您所见，内部Border的比例发生了变化，但不在中心。为了解决这个问题，我们需要移动中心点，并且属性负责 this RenderTransformOrigin，将我们Border的 ' this 属性设置为一个值0.5 0.5，看看我们需要什么：

触发器

现在让我们弄清楚如何在 XAML 中处理“将鼠标悬停”在所需对象上。
这里一切都很简单，用于与事件交互、捕获属性更改等等，所有这些都有触发器，其中只有 4 个：

基于此，您可以创建控件更改颜色、启动动画或其他内容的任何条件。在您的任务中出现“鼠标悬停”，这意味着我们需要EventTrigger. 让我们通过添加触发器来完成上面的示例：

<Grid Background="Silver" VerticalAlignment="Center" HorizontalAlignment="Center" Width="300" Height="150">
    <Border Background="#FF1D1D1D" RenderTransformOrigin="0.5 0.5" >
        <Border.RenderTransform>
            <ScaleTransform ScaleX=".5" ScaleY=".5"/>
        </Border.RenderTransform>
        <Border.Triggers>
            <EventTrigger RoutedEvent="MouseEnter" >

            </EventTrigger>
        </Border.Triggers>
        <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="45" Text="Привет мир!" Foreground="White"/>
    </Border>
</Grid>

在这里，我们将其视为一个事件MouseEnter——当我们将鼠标移到对象上时会发生此事件。

动画

我们现在的任务是对 y 的值进行动画处理ScaleTransform，即ScaleX和ScaleY，这样做是这样的：

<BeginStoryboard>
    <Storyboard>
        <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX" To="1" Duration="0:0:.4">
            <DoubleAnimation.EasingFunction>
                <QuarticEase />
            </DoubleAnimation.EasingFunction>
        </DoubleAnimation>
        <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY" To="1" Duration="0:0:.4" >
            <DoubleAnimation.EasingFunction>
                <QuarticEase />
            </DoubleAnimation.EasingFunction>
        </DoubleAnimation>
    </Storyboard>
</BeginStoryboard>

我解释：

• 首先，我们创建一个BeginStoryboard负责动画的基本元素。
• 接下来，我们使用Storyboard. 如果按字面翻译，那么我认为很明显这是一个“故事板”。
• 在内部，我们可以逐帧动画我们需要的任何东西，但是 WPF 有许多现成的对象可以完美地动画我们需要的属性。对于我们需要的属性，需要动画DoubleAnimation（因为类型的值double）。我们问她：
  • Storyboard.TargetProperty- 动画目标（我们的属性ScaleX或ScaleY）
  • To- 动画将顺利达到什么值。
  • From- 这里我们不设置，因为我们需要动画“从当前到想要的”，如果我们设置了，就是“从指定到想要的”，会导致动画跳动。
  • Duration- 这个动画应该持续多久。
  • 在这里也值得一提EasingFunction——它们可以让动画更流畅，例如，在开始时加速，在结束时慢慢减速。例如，您可以在此处阅读有关它们的信息。

我还认为您注意到这里同时设置了两个属性，Storyboard正如我在上面所说的，这是一组帧，您可以轻松地在其中设置其中的几个！

现在让我们把它们放在一起，看看结果：

<Grid Background="Silver" VerticalAlignment="Center" HorizontalAlignment="Center" Width="300" Height="150">
    <Border Background="#FF1D1D1D" RenderTransformOrigin="0.5 0.5" >
        <Border.RenderTransform>
            <ScaleTransform ScaleX=".5" ScaleY=".5"/>
        </Border.RenderTransform>
        <Border.Triggers>
            <EventTrigger RoutedEvent="MouseEnter" >
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX" To="1" Duration="0:0:.4">
                            <DoubleAnimation.EasingFunction>
                                <QuarticEase />
                            </DoubleAnimation.EasingFunction>
                        </DoubleAnimation>
                        <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY" To="1" Duration="0:0:.4" >
                            <DoubleAnimation.EasingFunction>
                                <QuarticEase />
                            </DoubleAnimation.EasingFunction>
                        </DoubleAnimation>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Border.Triggers>
        <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="45" Text="Привет мир!" Foreground="White"/>
    </Border>
</Grid>

实际上，这是完成的缩放动画，它仍然只是做同样的事情，但方向相反，我已经认为你可以自己做。