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的{{3}}属性设置为 Stop （停止），此属性的默认值为 HoldEnd 。

从文档中，

FillBehavior =“停止”

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

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

情节提要动画后无法重置uwp图像尺寸

1 个答案: