【问题标题】:UWP Animate Shadow in XAMLXAML 中的 UWP 动画阴影
【发布时间】:2021-07-06 22:55:42
【问题描述】:

我正在玩 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>

【问题讨论】:

    标签: xaml uwp windows-community-toolkit


    【解决方案1】:

    XAML 中的 UWP 动画阴影

    这很有趣,请随时将其发布到社区工具包问题框。如果您不介意在代码后面实现这个动画,我们建议您使用SpringVector3NaturalMotionAnimationThemeShadow 来接近。

    例如

    <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);
    }
    

    【讨论】:

    • 谢谢,Nico,试过你的例子,我根本看不到阴影,我错过了什么?
    • 这里是示例code,请查看。
    • 显然,我的 WIndows 丢失了 Windows 效果.... 将其修复为 HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\Dwm ForceEffectMode 设置为 2
    • 仍然不是一个很好的解决方案,因为我更改了按钮的短号半径,它看起来很糟糕。影子不尊重它... :(
    • 这很有趣,我看到了,我会报告它,感谢您的反馈。
    猜你喜欢
    • 2020-09-14
    • 2018-02-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-01-30
    • 2022-01-10
    • 2017-08-03
    相关资源
    最近更新 更多