为 Stroke.Color 属性多次使用 ColorAnimationUsingKeyFrames答案

【问题标题】：Using ColorAnimationUsingKeyFrames multiple times for Stroke.Color Property为 Stroke.Color 属性多次使用 ColorAnimationUsingKeyFrames
【发布时间】：2013-02-25 08:52:41
【问题描述】：

我喜欢用这个 ColorAnimationUsingKeyFrames

<Color x:Key="HighlightedColor">Yellow</Color>

<ColorAnimationUsingKeyFrames BeginTime="00:00:00.0000000"
              Duration="00:00:00.1000000"
              Storyboard.TargetName="HighlightAnimatedColorBrush"
              Storyboard.TargetProperty="Color"
              FillBehavior="HoldEnd">
    <ColorAnimationUsingKeyFrames.KeyFrames>
        <LinearColorKeyFrame Value="{StaticResource HighlightedColor}" KeyTime="00:00:00.5000000"/>
    </ColorAnimationUsingKeyFrames.KeyFrames>
</ColorAnimationUsingKeyFrames>

多次。

目前我有这个解决方法

<shapes:MirrorTile InnerXRadius="5.0" 
                   InnerYRadius="5.0" 
                   OuterXRadius="57.0" 
                   OuterYRadius="57.0" 
                   MirrorTileAngle="45.0"
                   Fill="Green" 
                   StrokeThickness="2" 
                   CentrePoint="181.0, 181.0">
    <shapes:MirrorTile.Stroke>
        <SolidColorBrush x:Name="HighlightAnimatedColorBrush" Color="{StaticResource DefaultColor}"/>
    </shapes:MirrorTile.Stroke>

    <shapes:MirrorTile.Triggers>
        <EventTrigger RoutedEvent="MouseEnter">
            <BeginStoryboard>
                <Storyboard>
                    <ColorAnimationUsingKeyFrames BeginTime="00:00:00.0000000"
                                  Duration="00:00:00.1000000"
                                  Storyboard.TargetName="HighlightAnimatedColorBrush"
                                  Storyboard.TargetProperty="Color"
                                  FillBehavior="HoldEnd">
                        <ColorAnimationUsingKeyFrames.KeyFrames>
                            <LinearColorKeyFrame Value="{StaticResource HighlightedColor}" KeyTime="00:00:00.5000000"/>
                        </ColorAnimationUsingKeyFrames.KeyFrames>
                    </ColorAnimationUsingKeyFrames>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </shapes:MirrorTile.Triggers>
</shapes:MirrorTile>

<shapes:MirrorTile InnerXRadius="5.0" 
                   InnerYRadius="5.0" 
                   OuterXRadius="57.0" 
                   OuterYRadius="57.0" 
                   MirrorTileAngle="45.0"
                   StrokeThickness="2" 
                   Fill="Green" 
                   CentrePoint="181.0, 181.0"
                   OffsetAngle="45.0">
    <shapes:MirrorTile.Stroke>
        <SolidColorBrush x:Name="HighlightAnimatedColorBrush2" Color="{StaticResource DefaultColor}"/>
    </shapes:MirrorTile.Stroke>

    <shapes:MirrorTile.Triggers>
        <EventTrigger RoutedEvent="MouseEnter">
            <BeginStoryboard>
                <Storyboard>
                    <ColorAnimationUsingKeyFrames BeginTime="00:00:00.0000000"
                                  Duration="00:00:00.1000000"
                                  Storyboard.TargetName="HighlightAnimatedColorBrush2"
                                  Storyboard.TargetProperty="Color"
                                  FillBehavior="HoldEnd">
                        <ColorAnimationUsingKeyFrames.KeyFrames>
                            <LinearColorKeyFrame Value="{StaticResource HighlightedColor}" KeyTime="00:00:00.5000000"/>
                        </ColorAnimationUsingKeyFrames.KeyFrames>
                    </ColorAnimationUsingKeyFrames>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </shapes:MirrorTile.Triggers>
</shapes:MirrorTile>

我喜欢将动画移动到资源中，只想将它绑定到任何对象（最后会有 40 个 MirrorTile）。

【问题讨论】：

标签： c# wpf xaml stroke coloranimation

【解决方案1】：

我不确定你指的是哪个 ResourceDictionary，但你应该能够写出这样的东西。请注意，不再有Storyboard.TargetName。

<!-- somewhere in Resources -->
<Storyboard x:Key="HighlightedColorStoryboard">
    <ColorAnimationUsingKeyFrames Duration="0:0:0.1"
                                 Storyboard.TargetProperty="Stroke.Color">
        <ColorAnimationUsingKeyFrames.KeyFrames>
            <LinearColorKeyFrame Value="{StaticResource HighlightedColor}"
                                 KeyTime="0:0:0.5"/>
        </ColorAnimationUsingKeyFrames.KeyFrames>
    </ColorAnimationUsingKeyFrames>
</Storyboard>

然后像这样使用它（不绑定）：

<shapes:MirrorTile.Stroke>
    <SolidColorBrush Color="{StaticResource DefaultColor}"/>
</shapes:MirrorTile.Stroke>

<shapes:MirrorTile.Triggers>
    <EventTrigger RoutedEvent="MouseEnter">
        <BeginStoryboard
            Storyboard="{StaticResource HighlightedColorStoryboard}"/>
    </EventTrigger>
    ...
</shapes:MirrorTile.Triggers>

【讨论】：