无法使用画笔资源在 Expression Blend 中为对象的边框设置动画

Posted 2023-02-22

【中文标题】无法使用画笔资源在 Expression Blend 中为对象的边框设置动画

【英文标题】：Unable to animate an object's border in Expression Blend using brush resources

【发布时间】：2012-01-06 14:07:49

【问题描述】：

我正在尝试使用 Expression blend 为对象的边框颜色设置动画。

每当我将 Storyboard 中的边框值更改为我之前创建的画笔资源的值时，对象的基本边框都会更改，而不是动画。如果我将属性的值更改为基础值（即：我不使用画笔资源），动画将按预期工作。

我们不能使用画笔资源为颜色属性设置动画吗？

下面是 Expression Blend 在为边框使用硬编码颜色值时生成的代码（此代码有效，动画可以正常播放，但边框的值是硬编码的）：

<Style x:Key="StandardTextBoxStyle" BasedOn="x:Null" TargetType="x:Type TextBox">
    (...)
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="x:Type TextBox">
                <Grid x:Name="grid">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                        (...)
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="FocusStates">
                            <VisualStateGroup.Transitions>
                                <VisualTransition GeneratedDuration="0" To="Focused">
                                    <Storyboard>
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" Storyboard.TargetName="rectangle">
                                            <EasingColorKeyFrame KeyTime="0" Value="#FFC2C2C2"/>
                                            <EasingColorKeyFrame KeyTime="0:0:0.2" Value="#FF5FA5C9"/>
                                        </ColorAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualTransition>
                            </VisualStateGroup.Transitions>
                            <VisualState x:Name="Unfocused"/>
                            <VisualState x:Name="Focused"/>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    (...)
</Style>

如何将硬编码值 #FF5FA5C9 替换为本地画笔资源的值？我应该用 DynamicResource / StaticResource 语句替换 Value="#FF5FA5C9" 语句吗？

【参考方案1】：

我可能会建议，不要尝试为画笔资源设置动画，而是复制您的矩形形状并将其命名为 Rectangle_Focused 之类的名称，然后将其按顺序放置在现有矩形上，使其显示在原始矩形上。

将您的边框画笔资源添加到此形状，然后将形状的可见性设置为折叠。然后在您的焦点状态或鼠标悬停状态或任何您喜欢的状态下，将其可见性更改回可见。有点像；

<VisualState x:Name="Focused">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0:0:0.1" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="FocusVisualElement" d:IsOptimized="True"/>
                                        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="MouseOverBorder" d:IsOptimized="True"/>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Background_Copy">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>

不要问我为什么，但是对同一对象中的画笔资源进行动画处理并不会剪切它，但是您可以通过这样完成您正在寻找的相同效果。

【讨论】：

感谢克里斯，这确实是一个非常聪明的解决方案！使用 Brush 资源而不是 Color 资源有优势吗？ （见我的回答）。确实，无法使用画笔资源制作动画真是太奇怪了……

使用画笔资源，您可以实现更好的视觉效果，如线性或径向渐变等。而不是仅限于纯色。因此，在很多情况下，取决于您的设计，仍然可以访问您的画笔资源肯定会更有帮助。

别担心，很高兴我能帮上忙。干杯！

【参考方案2】：

我相信我已经找到了问题。

由于某些原因，将笔画的值指定为本地 画笔 资源的值不会在动画的情节提要中创建关键帧：

这是你不应该做的事情：

http://i.imgur.com/5X7Xm.jpg

相反，您必须创建一个 Color 本地资源并像这样分配它：

http://i.imgur.com/UGIOl.jpg

情节提要中的关键帧将被正确创建并且动画将起作用。

可能是 Expression Blend 中的错误？这是否正常工作？不知道:)

【讨论】：

这是一个比过度混合其他形状更好的解决方案，谢谢，希望 EB 能尽快支持“Brush-Keyframing” :)