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

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">

            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="BackgroundImage">

                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>

                <EasingDoubleKeyFrame KeyTime="0:0:3" Value="0.1"/>

                <EasingDoubleKeyFrame KeyTime="0:0:6" Value="0"/>

            </DoubleAnimationUsingKeyFrames>

        </Storyboard>

</Page.Resources>

隐藏代码：

可以使用StoryBoard.Begin来启动Opacity动画，动画有Completed事件。可以订阅它来监听动画是否完成。当动画完成后，可以调用InitializeWorks()方法再次更改BackgroundImage。这种写法替换您的While方法。

private async void InitializeWorks()

        {

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

            {

                BackgroundImage.Opacity = 0;

                try

                {

                   

                    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));

                    MyStoryboard.Begin();

                    MyStoryboard.Completed += MyStoryboard_Completed;

                }

                catch (Exception e)

                {

                    //

                }

            });

        }

private void MyStoryboard_Completed(object sender, object e)

        {

            InitializeWorks();

        }

Answer 3

您无法在 XAML 中调用GetFolderAsync或GetFilesAsync，但我建议您将循环替换while为定期更改背景的DispatcherTimer 。

该Tick事件将在 UI 线程上引发，这意味着可以安全地在事件处理程序中访问 UI 元素。异步方法不会阻塞。