fade-in/fade-out如何流畅切换图源？

Question

我需要在 SelectionChanged 的 FlipView 下更改背景图像。但仅触发 TourFlipViewBackgroundImageFageIn 情节提要，并且当滑动 FlipView 图像时不会平滑变化。如何让源码变化时图片平滑变化？

<Storyboard
        x:Name="TourFlipViewBackgroundImageFageOut">
        <DoubleAnimation
            Storyboard.TargetName="TourFlipViewBackgroundImage"
            Storyboard.TargetProperty="Opacity"
            To="0"
            Duration="0:0:0.5" />
    </Storyboard>
    <Storyboard
        x:Name="TourFlipViewBackgroundImageFageIn">
        <DoubleAnimation
            Storyboard.TargetName="TourFlipViewBackgroundImage"
            Storyboard.TargetProperty="Opacity"
            To="1"
            Duration="0:0:0.6" />
    </Storyboard>

<core:DataTriggerBehavior
            Binding="{Binding SelectedIndex, ElementName=TourFlipView}"
            ComparisonCondition="Equal"
            Value="1">
            <media:ControlStoryboardAction
                Storyboard="{StaticResource TourFlipViewBackgroundImageFageOut}"
                ControlStoryboardOption="Play" />
            <core:ChangePropertyAction
                TargetObject="{Binding ElementName=TourFlipViewBackgroundImage}"
                PropertyName="Source"
                Value="ms-appx:///Assets/Images/TourBackgroundImage2.png" />
            <media:ControlStoryboardAction
                Storyboard="{StaticResource TourFlipViewBackgroundImageFageIn}"
                ControlStoryboardOption="Play" />
        </core:DataTriggerBehavior>

Answer 1

发生这种情况是因为所有故事板同时开始。您可以删除第二个故事板：

<media:ControlStoryboardAction
            Storyboard="{StaticResource TourFlipViewBackgroundImageFageIn}"
            ControlStoryboardOption="Play" />

并将完成的事件添加到第一个 (fadeOut) 故事板：

Completed="MyStoryboardCompleted"

现在在事件中，您可以在第一个故事板完成后开始第二个故事板：

    private void MyStoryboardCompleted(object sender, object e)
    {
        var thing = this.Resources["TourFlipViewBackgroundImageFageIn"];
        var OtherSB = (Storyboard)thing;
        OtherSB.Begin();
    }

顺便说一句，你也可以在故事板中替换图像：

 <Storyboard x:Key="TransitionImage" Completed="Storyboard_Completed">
        <ObjectAnimationUsingKeyFrames 
BeginTime="00:00:0" 
Storyboard.TargetName="TourFlipViewBackgroundImage"
Storyboard.TargetProperty="(Image.Source)">
            <DiscreteObjectKeyFrame KeyTime="00:00:1">
                <DiscreteObjectKeyFrame.Value>
                    <BitmapImage UriSource="ms-appx:///Assets/StoreLogo.png" />
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>

fade-in/fade-out如何流畅切换图源？

How smoothly change image source with fade-in/fade-out?

animation

xaml

behavior

uwp