XAML 中的 UWP 动画阴影

Question

我正在玩 Windows Community Toolkit 中的缩放动画，并尝试在对象缩放时为阴影设置动画。

首先我认为阴影会随着对象缩放，但事实并非如此 然后我也尝试缩放阴影，但这不起作用

这是我的 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);
}