在 StoryBoard 期间更改图像的来源答案

【问题标题】：Changing the Source of an Image During a StoryBoard在 StoryBoard 期间更改图像的来源
【发布时间】：2016-12-31 08:34:47
【问题描述】：

我试图在我的主页（大约 30 个）上使用 StoryBoard 淡入和淡出多个图像。目前我的动画在一张图片上完美运行，它看起来像这样；

private void OnDashboardPageLoaded(object sender, RoutedEventArgs e)
{
    Storyboard storyboard = new Storyboard();
    TimeSpan duration = new TimeSpan(0, 0, 10);

    // Create a DoubleAnimation to fade the not selected option control
    DoubleAnimation animation = new DoubleAnimation();

    animation.From = 0.0;
    animation.To = 1.0;
    animation.Duration = new Duration(duration);

    // Configure the animation to target de property Opacity
    Storyboard.SetTargetName(animation, testImage.Name);
    Storyboard.SetTargetProperty(animation, new PropertyPath(OpacityProperty));

    // Add the animation to the storyboard
    storyboard.Children.Add(animation);

    storyboard.RepeatBehavior = RepeatBehavior.Forever;
    animation.AutoReverse = true;

    // Begin the storyboard
    storyboard.Begin(this);
}

还有我的 XAML；

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>
    <Image Source="http://www.online-image-editor.com/styles/2013/images/example_image.png" x:Name="testImage" Stretch="Uniform" />
</Grid>

如您所见，我在这里设置了一个静态源，但最终我想做的是加载一个目录中的所有图像并在每个动画结束时更改源，以便每次显示一个新图像时间（直到显示所有 30 个），我该怎么做？

编辑：故事板完成后；

storyboard.Completed += new EventHandler(Story_Completed); // In OnDashboardPageLoaded method

private void Story_Completed(object sender, EventArgs e)
{
    storyboard.Begin(this);
}

【问题讨论】：

“在每个动画结束时更改源” - 听起来你不再需要RepeatBehavior.Forever。而是开始单个动画/故事板和when it's finished 做某事并开始另一个。 AutoReverse 可以通过交换From 和To 轻松实现。
您想将一张图像混合到前一张上，还是只是淡出当前一张，然后更改源并淡入下一张？
@Clemens 后者 Clemens，一个完全淡出，源更改并加载新的。我添加了一个方法，在它完成后再次启动情节提要，但它没有工作......我在问题中更新了我的代码

标签： c# wpf xaml storyboard

【解决方案1】：

以下方法淡出 Image 控件，更改其Source 属性，然后再次淡入。您可以使用另一个 ImageSource 参数循环调用它（例如，由 DispatcherTimer 控制）。

public static void ShowNextImage(Image image, ImageSource source, TimeSpan fadeTime)
{
    if (image.Source == null) // no fade out
    {
        image.Source = source;
        image.BeginAnimation(UIElement.OpacityProperty,
            new DoubleAnimation(0d, 1d, fadeTime));
    }
    else
    {
        var fadeOut = new DoubleAnimation(0d, fadeTime);

        fadeOut.Completed += (s, e) =>
        {
            image.Source = source;
            image.BeginAnimation(UIElement.OpacityProperty,
                new DoubleAnimation(1d, fadeTime));
        };

        image.BeginAnimation(UIElement.OpacityProperty, fadeOut);
    }
}

【讨论】：