故事板动画后无法重置 uwp 图像尺寸

Question

我正在使用这个 XAML 故事板来实现两个名为 ctlIMage 和 altImage 的图像之间的转换，定义如下：

    <Image x:Name = "ctlImage" Grid.Column ="0" Grid.Row="0" Grid.ColumnSpan="3" Grid.RowSpan="4" VerticalAlignment= "Stretch"  HorizontalAlignment = "Stretch"  Stretch = "Uniform"  Opacity="0">
        <Image.RenderTransform>
            <CompositeTransform x:Name="image_Transform" ></CompositeTransform >
        </Image.RenderTransform >
    </Image>

        <Image x:Name = "altImage" Grid.Column ="0" Grid.Row="0" Grid.ColumnSpan="3" Grid.RowSpan="4" VerticalAlignment= "Stretch"  HorizontalAlignment = "Stretch"  Stretch = "Uniform"  Opacity="0">
           <Image.RenderTransform>
            <CompositeTransform x:Name="altImage_Transform" ></CompositeTransform >
           </Image.RenderTransform >
        </Image>

        <Storyboard x:Name="ctlImageFadeOut" Completed="SwapAltCtl">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ctlImage">
                <EasingDoubleKeyFrame KeyTime="0" Value="1.0" />
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"  />
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="ScaleX" Storyboard.TargetName="image_Transform">
                <EasingDoubleKeyFrame KeyTime="0" Value="1.0" />
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.5"  />
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="ScaleY" Storyboard.TargetName="image_Transform">
                <EasingDoubleKeyFrame KeyTime="0" Value="1.0" />
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.5"  />
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="altImage">
                <EasingDoubleKeyFrame KeyTime="0" Value="0" />
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1.0" />
            </DoubleAnimationUsingKeyFrames>

        </Storyboard>

当我使用此代码播放动画时：

            altImage.Opacity = 0;
            altImage.Visibility = Visibility.Visible;
            altImage.Source = await MainPlayList.GetCurrentImage((int)altImage.Height, (int)altImage.Width);
            ctlImageFadeOut.Begin();

并使用此方法在动画结束时交换两个图像：

    private async void SwapAltCtl(object sender, object e)
    {
        ctlImage.Opacity = 0;
        image_Transform.ScaleX = 1;
        image_Transform.ScaleY = 1;
        ctlImage.Height = altImage.ActualHeight;
        ctlImage.Width = altImage.ActualWidth;
        ctlImage.Source = await MainPlayList.GetCurrentImage((int)ctlImage.Height, (int)ctlImage.Width);
        ctlImage.Opacity = 1;
        altImage.Opacity = 0;
        altImage.Visibility = Visibility.Collapsed;
    }

我最终得到了一个一半大小的 ctlImage，就像 ScaleX 和 ScaleY 在 XAML 情节提要之后不会重置。如您所见，我什至尝试将高度和宽度重置为已知值（已显示的备用图像）。

动画结束后如何重置图片？

谢谢！

Answer 1

删除SwapAltCtl 方法，实际上你不需要它。您只需将Storyboard 的FillBehavior 属性设置为Stop，该属性的默认值为HoldEnd。

来自文档，

FillBehavior="Stop"

默认情况下，当动画结束时，即使超过其持续时间，动画也会将属性值保留为最终的 To 或 By-modified 值。但是，如果将 FillBehavior 属性的值设置为 FillBehavior.Stop，则动画值的值将恢复为应用动画之前的值，或者更准确地说，恢复为由依赖属性系统确定的当前有效值 (有关此区别的详细信息，请参阅依赖属性概述）。

还有一行要修改。当动画结束时，您希望ctlImage 重置为初始状态并再次可见，因此您应该将ctlImage 的Opacity 的初始值设置为1.0。