对Stroke.Color属性多次使用ColorAnimationUsingKeyFrames

Question

我喜欢使用这个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)。

Answer 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>