XAML 中的 UWP 动画阴影

Question

我正在 Windows Community Toolkit 中使用 Scale 动画，并尝试在对象缩放时为 Shadow 设置动画。

首先我认为阴影会随着对象缩放，但它没有然后我也尝试缩放阴影，但这不起作用

这是我的 XAML

 <controls:DropShadowPanel x:Name="DropShadowHolder" VerticalAlignment="Top" Margin="40,31,0,0" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" BlurRadius="20" ShadowOpacity="0.7" OffsetX="1" OffsetY="1" Color="Black" HorizontalAlignment="Left" ui:VisualExtensions.NormalizedCenterPoint="0.5"> <interactivity:Interaction.Behaviors> <interactions:EventTriggerBehavior EventName="PointerEntered"> <behaviors:StartAnimationAction Animation="{x:Bind ShadowScaleAnimationEnter}" /> </interactions:EventTriggerBehavior> <interactions:EventTriggerBehavior EventName="PointerExited"> <behaviors:StartAnimationAction Animation="{x:Bind ShadowScaleAnimationExit}" /> </interactions:EventTriggerBehavior> </interactivity:Interaction.Behaviors> <ani:Explicit.Animations> <ani:AnimationSet x:Name="ShadowScaleAnimationEnter"> <ani:ScaleAnimation From="1" To="1.2"/> </ani:AnimationSet> <ani:AnimationSet x:Name="ShadowScaleAnimationExit"> <ani:ScaleAnimation From="1.2" To="1"/> </ani:AnimationSet> </ani:Explicit.Animations> <Button Background="Gray" Width="100" Height="100" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ui:VisualExtensions.NormalizedCenterPoint="0.5"> <interactivity:Interaction.Behaviors> <interactions:EventTriggerBehavior EventName="PointerEntered"> <behaviors:StartAnimationAction Animation="{x:Bind ScaleAnimationEnter}" /> </interactions:EventTriggerBehavior> <interactions:EventTriggerBehavior EventName="PointerExited"> <behaviors:StartAnimationAction Animation="{x:Bind ScaleAnimationExit}" /> </interactions:EventTriggerBehavior> </interactivity:Interaction.Behaviors> <ani:Explicit.Animations> <ani:AnimationSet x:Name="ScaleAnimationEnter"> <ani:ScaleAnimation From="1" To="1.2"/> </ani:AnimationSet> <ani:AnimationSet x:Name="ScaleAnimationExit"> <ani:ScaleAnimation From="1.2" To="1"/> </ani:AnimationSet> </ani:Explicit.Animations> </Button> </controls:DropShadowPanel>

Answer 1

XAML 中的 UWP 动画阴影

这很有趣，请随时将其发布到社区工具包问题框。 如果你不介意在后面的代码中实现这个动画，我们建议你使用SpringVector3NaturalMotionAnimation和ThemeShadow来实现。

例如

<Grid>
    <Grid.Resources>
        <ThemeShadow x:Name="SharedShadow" />
    </Grid.Resources>
    <Grid x:Name="BackgroundGrid" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" />
    <Button
        x:Name="MyButton"
        Width="100"
        Height="100"
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        Background="Gray"
        Loaded="Button_Loaded"
        PointerEntered="element_PointerEntered"
        PointerExited="element_PointerExited"
        Shadow="{StaticResource SharedShadow}" />
</Grid>

背后的代码

public MainPage()
{
    this.InitializeComponent();

    SharedShadow.Receivers.Add(BackgroundGrid);
    MyButton.Translation += new Vector3(0, 0, 32);
   
}

Compositor _compositor = Window.Current.Compositor;
SpringVector3NaturalMotionAnimation _springAnimation;

private void CreateOrUpdateSpringAnimation(float finalValue)
{
    if (_springAnimation == null)
    {
        _springAnimation = _compositor.CreateSpringVector3Animation();
        _springAnimation.Target = "Scale";
    }

    _springAnimation.FinalValue = new Vector3(finalValue);
}

private void element_PointerEntered(object sender, PointerRoutedEventArgs e)
{
    // Scale up to 1.5
    CreateOrUpdateSpringAnimation(1.5f);
    (sender as UIElement).CenterPoint = new Vector3((float)(MyButton.ActualWidth / 2.0), (float)(MyButton.ActualHeight / 2.0), 1f);
    (sender as UIElement).StartAnimation(_springAnimation);
}

private void element_PointerExited(object sender, PointerRoutedEventArgs e)
{
    // Scale back down to 1.0
    CreateOrUpdateSpringAnimation(1.0f);
    (sender as UIElement).CenterPoint = new Vector3((float)(MyButton.ActualWidth / 2.0), (float)(MyButton.ActualHeight / 2.0), 1f);
    (sender as UIElement).StartAnimation(_springAnimation);
}