GroupTransform 中的动画变换问题

Question

我在 WPF 项目（后面是 VB.net 代码）中有一张鱼的图像，我尝试使用两个变换来制作它来回游动的动画。

由于某种原因，如果我只对 ScaleTransform 进行动画处理（仅使用 ScaleTransform，而不使用 TransformGroup），则动画可以正常工作，但 TranslateTransform 动画则不能。此外，ScaleTransform 在 TransformGroup 内部时不起作用。

这是我正在使用的代码。我做错了什么？

<Image Height="90" HorizontalAlignment="Left" Name="Fish1" Stretch="Fill" VerticalAlignment="Top" Width="260" Source="/VBP-WORD4WORD;component/Images/IMG-FISH1.png" Canvas.Left="24" Canvas.Top="67" Margin="-28,70,0,0">
    <Image.RenderTransform>
        <TransformGroup>
            <ScaleTransform ScaleX="1"/>
            <TranslateTransform X="0"/>
        </TransformGroup>
    </Image.RenderTransform>
    <Image.Triggers>
        <EventTrigger RoutedEvent="Image.Loaded">
            <EventTrigger.Actions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimationUsingKeyFrames Duration="0:0:30" Storyboard.TargetProperty="RenderTransform.(TransformGroup.TranslateTransform.X)" RepeatBehavior="Forever">
                            <LinearDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
                            <LinearDoubleKeyFrame KeyTime="0:0:14.9" Value="407"/>
                            <LinearDoubleKeyFrame KeyTime="0:0:15" Value="680"/>
                            <LinearDoubleKeyFrame KeyTime="0:0:29.9" Value="265"/>
                            <LinearDoubleKeyFrame KeyTime="0:0:30" Value="0"/>
                        </DoubleAnimationUsingKeyFrames>
                        <DoubleAnimationUsingKeyFrames Duration="0:0:30" Storyboard.TargetProperty="RenderTransform.(TransformGroup.ScaleTransform.ScaleX)" RepeatBehavior="Forever">
                            <LinearDoubleKeyFrame KeyTime="0:0:14.9" Value="1"/>
                            <LinearDoubleKeyFrame KeyTime="0:0:15" Value="-1"/>
                            <LinearDoubleKeyFrame KeyTime="0:0:29.9" Value="-1"/>
                            <LinearDoubleKeyFrame KeyTime="0:0:30" Value="1"/>
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
    </Image.Triggers>
</Image>

Answer 1

这些属性路径都是错误的，但我会投票赞成通过利用 Storyboard.TargetName 来避免仅使用这些路径的整个麻烦；这是有效的：

<!-- ... -->
<TransformGroup>
    <ScaleTransform  x:Name="scaleTransform" ScaleX="1"/>
    <TranslateTransform x:Name="translateTransform" X="0"/>
</TransformGroup>
  <!-- ... -->
    <Storyboard>
        <DoubleAnimationUsingKeyFrames Duration="0:0:30"
                                       Storyboard.TargetProperty="ScaleX"
                                       Storyboard.TargetName="scaleTransform"
                                       RepeatBehavior="Forever">
            <LinearDoubleKeyFrame KeyTime="0:0:14.9" Value="1"/>
            <LinearDoubleKeyFrame KeyTime="0:0:15" Value="-1"/>
            <LinearDoubleKeyFrame KeyTime="0:0:29.9" Value="-1"/>
            <LinearDoubleKeyFrame KeyTime="0:0:30" Value="1"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Duration="0:0:30"
                                       Storyboard.TargetProperty="X"
                                       Storyboard.TargetName="translateTransform"
                                       RepeatBehavior="Forever">
            <LinearDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
            <LinearDoubleKeyFrame KeyTime="0:0:14.9" Value="407"/>
            <LinearDoubleKeyFrame KeyTime="0:0:15" Value="680"/>
            <LinearDoubleKeyFrame KeyTime="0:0:29.9" Value="265"/>
            <LinearDoubleKeyFrame KeyTime="0:0:30" Value="0"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>

如果您真的想仅使用 Storyboard.TargetProperty 来完成此操作，那么这些将是我刚才发现的正确路径：

Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX"
Storyboard.TargetProperty="RenderTransform.Children[1].X"

如果您考虑一下，这确实很有意义。