是否可以将 ColorAnimationUsingKeyFrames 应用于 DropShadowPanel？

Question

我正在使用 UWP，我正在尝试使用关键帧将彩色动画应用到 UWP 社区工具包中的 DropShadowPanel。

但到目前为止我还没有成功我已经能够将 DoubleAnimation 应用于 BlurRadius 属性和 Opacity 属性但是每次我尝试应用 Color 动画时我的程序都会中断。

我还在 Canvas 上将彩色动画应用于多边形形状，效果很好，我使用的代码几乎相同，有人可以给我提示吗：

这是来自我的多边形的代码，它可以工作：

<ColorAnimationUsingKeyFrames Storyboard.TargetName="ChristmasStarUpperPosition"
                                                      Storyboard.TargetProperty="(Polygon.Fill).(SolidColorBrush.Color)"
                                                      RepeatBehavior="Forever"
                                                      AutoReverse="True">
                            <LinearColorKeyFrame Value="Silver" KeyTime="0:0:5"/>
                            <LinearColorKeyFrame Value="LightGray" KeyTime="0:0:2"/>
                            <SplineColorKeyFrame Value="Gray" KeyTime="0:0:2.5" KeySpline="0.6,0.0 0.9,0.00"/>
                            <DiscreteColorKeyFrame Value="Blue" KeyTime="0:0:3"/>
                            <LinearColorKeyFrame Value="Blue" KeyTime="0:0:5"/>
                            <LinearColorKeyFrame Value="LightBlue" KeyTime="0:0:2"/>
                            <SplineColorKeyFrame Value="DeepSkyBlue" KeyTime="0:0:2.5" KeySpline="0.6,0.0 0.9,0.00"/>
                            <DiscreteColorKeyFrame Value="Goldenrod" KeyTime="0:0:3"/>
                            <LinearColorKeyFrame Value="Goldenrod" KeyTime="0:0:5"/>
                        </ColorAnimationUsingKeyFrames>

这是我尝试应用于我的 DropShadowPanel 的代码，此代码使 mas 程序在 xaml 级别失败。

<ColorAnimationUsingKeyFrames Storyboard.TargetName="ChristmasBonusStarUpperDropShadowPolygonColor"
                                                      Storyboard.TargetProperty="(DropShadowPanel.Color).(SolidColorBrush.Color)"
                                                      RepeatBehavior="Forever"
                                                      AutoReverse="True">
                            <LinearColorKeyFrame Value="Silver" KeyTime="0:0:5"/>
                            <LinearColorKeyFrame Value="LightGray" KeyTime="0:0:2"/>
                            <SplineColorKeyFrame Value="Gray" KeyTime="0:0:2.5" KeySpline="0.6,0.0 0.9,0.00"/>
                            <DiscreteColorKeyFrame Value="Blue" KeyTime="0:0:3"/>
                            <LinearColorKeyFrame Value="Blue" KeyTime="0:0:5"/>
                            <LinearColorKeyFrame Value="LightBlue" KeyTime="0:0:2"/>
                            <SplineColorKeyFrame Value="DeepSkyBlue" KeyTime="0:0:2.5" KeySpline="0.6,0.0 0.9,0.00"/>
                            <DiscreteColorKeyFrame Value="Goldenrod" KeyTime="0:0:3"/>
                            <LinearColorKeyFrame Value="Goldenrod" KeyTime="0:0:5"/>
                        </ColorAnimationUsingKeyFrames>

希望有人能帮帮我！！！

谢谢！！！

Answer 1

正如 Erno de Weerd 回答的那样，他的代码有效，但我想首先用我的回答来补充这个问题，如果像他展示的那样应用，Erno 的答案是有效的。您也可以调用别名，因为 DropShadowPanel 是第三方控件并且属于另一个名称空间，它必须在您的页面或用户控件中调用正确的名称空间，如下所示：

<UserControl
x:Class="Ceneam.UserControlViews.ChristmasBonusCalculatorControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:vm="using:Ceneam.ViewModels"
xmlns:toolkitscontrols="using:Microsoft.Toolkit.Uwp.UI.Controls"
...>

然后你可以让代码工作或者更好地说不要破坏你 xaml 或者你的程序你应该像这样对 DropShadowPanel 控件的任何属性使用正确的 ColorAnimationUsingKeyFrames 像这样：

<ColorAnimationUsingKeyFrames Storyboard.TargetName="ChristmasBonusStarUpperDropShadowPolygon"
                                                      Storyboard.TargetProperty="toolkitscontrols:DropShadowPanel.Color"
                                                      RepeatBehavior="Forever"
                                                      AutoReverse="True">
                            <LinearColorKeyFrame Value="Red" KeyTime="0:0:5"/>
                            <LinearColorKeyFrame Value="DarkGreen" KeyTime="0:0:2"/>
                            <SplineColorKeyFrame Value="DarkOrange" KeyTime="0:0:2.5" KeySpline="0.6,0.0 0.9,0.00"/>
                            <DiscreteColorKeyFrame Value="DarkRed" KeyTime="0:0:3"/>
                            <LinearColorKeyFrame Value="Green" KeyTime="0:0:5"/>
                            <LinearColorKeyFrame Value="Crimson" KeyTime="0:0:2"/>
                            <SplineColorKeyFrame Value="Purple" KeyTime="0:0:2.5" KeySpline="0.6,0.0 0.9,0.00"/>
                            <DiscreteColorKeyFrame Value="DarkSlateGray" KeyTime="0:0:3"/>
                            <LinearColorKeyFrame Value="Black" KeyTime="0:0:5"/>
                        </ColorAnimationUsingKeyFrames>

如您所见，此代码不会破坏您的 xaml 但是，动画不会应用于您的控件，只是不会破坏它，但我重复的动画将不起作用你的控制。

我已经在 GitHub 向 UWP Community Toolkit 项目报告了这个问题，因为我认为这是一个错误，因为如果尝试应用 DoubleAnimation 或 DoubleAnimationUsingKeyFrames，BlurRadius 和 ShadowOpacity 也永远不会改变。

所以现在回答我自己的问题是不可能将 ColorAnimationUsingKeyFrames 应用到 DropShadowPanel，你可以让代码不要破坏你的 XAML，但它不会应用于你的控制！！！！

Answer 2

虽然 Color 属性是一个依赖项属性，但它只是像代理一样更新内部 DropShadow 的 Color（参见下面的代码）来自 Windows.UI.Composition。传统的 XAML 故事板根本行不通。

private void OnColorChanged(Color newValue)
{
    if (_dropShadow != null)
    {
        _dropShadow.Color = newValue;
    }
}

但是您可以使用 Composition 中的新彩色动画 API（即 CreateColorKeyFrameAnimation）轻松实现您想要的效果。这是您的特定案例的示例：

var compositor = Window.Current.Compositor;
var easeIn = compositor.CreateCubicBezierEasingFunction(new Vector2(0.6f, 0.0f), new Vector2(0.9f, 0.0f));
var linear = compositor.CreateLinearEasingFunction();

var colorAnimation = compositor.CreateColorKeyFrameAnimation();
// 0.0f means at 0% of the total duration of 5s, 0.2f means 20%, etc.
colorAnimation.InsertKeyFrame(0.0f, Colors.Red, linear);
colorAnimation.InsertKeyFrame(0.2f, Colors.DarkOrange, easeIn);
colorAnimation.InsertKeyFrame(0.4f, Colors.Green, linear);
colorAnimation.InsertKeyFrame(0.6f, Colors.Purple, easeIn);
colorAnimation.InsertKeyFrame(0.8f, Colors.DarkSlateGray, linear);
colorAnimation.InsertKeyFrame(1.0f, Colors.Black, linear);
colorAnimation.Duration = TimeSpan.FromSeconds(5);
colorAnimation.IterationBehavior = AnimationIterationBehavior.Forever;

// Note the control exposes the inner DropShadow property, and this is the property we want to animate
ChristmasBonusStarUpperDropShadowPolygon.DropShadow.StartAnimation("Color", colorAnimation);

是否可以将 ColorAnimationUsingKeyFrames 应用于 DropShadowPanel？

is it Possible to apply ColorAnimationUsingKeyFrames to a DropShadowPanel?

xaml

uwp

uwp-xaml

windows-community-toolkit

windows-composition-api