情节提要动画后无法重置 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"

By default, when an animation ends, the animation leaves the property value as the final To or By-modified value even after its duration is surpassed. However, if you set the value of the FillBehavior property to FillBehavior.Stop, the value of the animated value reverts to whatever the value was before the animation was applied, or more precisely to the current effective value as determined by the dependency property system (for more info on this distinction, see Dependency properties overview).

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

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

uwp Image Dimension can't be reset after Storyboard Animation

c#

xaml

image

storyboard

uwp