如何制作改变背景图片的动画？

Question

我正在使用 UWP 开发 Microsoft Store 应用程序，并且使用 XAML 和 C#。我想用不透明动画随机更改背景图像。

我的代码在下面。

该函数执行与Task.Run(InitializeWorks);

   private async void InitializeWorks()

    {

        await Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal, async () =>

        {

            BackgroundImage.Opacity = 0;

            try

            {

                while (true)

                {

                    var backgroundImageFolder = await Windows.ApplicationModel.Package.Current.InstalledLocation.GetFolderAsync(@"Assets\BackgroundImages");

                    var backgroundImageFiles = await backgroundImageFolder.GetFilesAsync();

                    BackgroundImage.Source = new BitmapImage(new Uri(backgroundImageFiles[new Random().Next(0, backgroundImageFiles.Count)].Path));

                    for (double i = BackgroundImage.Opacity; i <= 0.1; i += 0.001)

                    {

                        BackgroundImage.Opacity = i;

                        await Task.Delay(10);

                    }

                    await Task.Delay(5000);

                    for (double i = BackgroundImage.Opacity; i >= 0; i -= 0.001)

                    {

                        BackgroundImage.Opacity = i;

                        await Task.Delay(10);

                    }

                }

            }

            catch (Exception e)

            {

                //

            }

        });

    }

我可以使用这段代码的性能如何？这个异步任务有什么不便吗？会出现什么错误吗？

如何用XAML制作变化的动画？

Answer 1

带有故事板的 XML 动画；    <Storyboard x:Name="BackgroundImageStoryboardIncrease">        <DoubleAnimation            Storyboard.TargetName="BackgroundImage"            Storyboard.TargetProperty="Opacity"            From="0"            To="0.15"            Duration="0:0:2" />    </Storyboard>    <Storyboard x:Name="BackgroundImageStoryboardDecrease">        <DoubleAnimation            Storyboard.TargetName="BackgroundImage"            Storyboard.TargetProperty="Opacity"            From="0.15"            To="0"            Duration="0:0:2" />    </Storyboard>C# 更改事件并等待 10 秒：    private async void InitializeFrontWorks()    {        // Animations        DispatcherTimer dispatcherTimer = new DispatcherTimer        {            Interval = TimeSpan.FromSeconds(10)        };        var backgroundImageFolder = await Windows.ApplicationModel.Package.Current.InstalledLocation.GetFolderAsync(@"Assets\BackgroundImages");        var backgroundImageFiles = await backgroundImageFolder.GetFilesAsync();        AnimationBackgroundImage(backgroundImageFiles);        dispatcherTimer.Tick += delegate        {            AnimationBackgroundImage(backgroundImageFiles);        };        dispatcherTimer.Start();    }    private void AnimationBackgroundImage(IReadOnlyList<StorageFile> backgroundImageFiles)    {        BackgroundImageStoryboardDecrease.Begin();        BackgroundImageStoryboardDecrease.Completed += delegate        {            BackgroundImage.Source = new BitmapImage(new Uri(backgroundImageFiles[new Random().Next(0, backgroundImageFiles.Count)].Path));            BackgroundImageStoryboardIncrease.Begin();        };    }

Answer 2

您可以在 XAML 中设置以下动画：<Page.Resources><Storyboard x:Name="MyStoryboard">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="BackgroundImage">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <EasingDoubleKeyFrame KeyTime="0" Value="0"/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <EasingDoubleKeyFrame KeyTime="0:0:3" Value="0.1"/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <EasingDoubleKeyFrame KeyTime="0:0:6" Value="0"/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </DoubleAnimationUsingKeyFrames>&nbsp; &nbsp; &nbsp; &nbsp; </Storyboard></Page.Resources>隐藏代码：可以使用StoryBoard.Begin来启动Opacity动画，动画有Completed事件。可以订阅它来监听动画是否完成。当动画完成后，可以调用InitializeWorks()方法再次更改BackgroundImage。这种写法替换您的While方法。private async void InitializeWorks()&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; await Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal, async () =>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; BackgroundImage.Opacity = 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; try&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var backgroundImageFolder = await Windows.ApplicationModel.Package.Current.InstalledLocation.GetFolderAsync(@"Assets\BackgroundImages");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var backgroundImageFiles = await backgroundImageFolder.GetFilesAsync();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; BackgroundImage.Source = new BitmapImage(new Uri(backgroundImageFiles[new Random().Next(0, backgroundImageFiles.Count)].Path));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; MyStoryboard.Begin();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; MyStoryboard.Completed += MyStoryboard_Completed;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; catch (Exception e)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; }private void MyStoryboard_Completed(object sender, object e)&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; InitializeWorks();&nbsp; &nbsp; &nbsp; &nbsp; }

Answer 3

您无法在 XAML 中调用GetFolderAsync或GetFilesAsync，但我建议您将循环替换while为定期更改背景的DispatcherTimer 。该Tick事件将在 UI 线程上引发，这意味着可以安全地在事件处理程序中访问 UI 元素。异步方法不会阻塞。