使用多幅图片在UWP中生成动态动画

Question

我在我的UWP项目中使用gif，它将生成一个动态图片。但有时我会发现，gif动态图片会导致图片的一些奇怪的破碎外观。我想可能是记忆问题引起的。

 <Image x:Name="voiceBarGif" Opacity="1" 
                       Source="ms-appx:///Assets/VoiceBar/waveform.gif" />

为了解决这个问题，我认为一个解决方案是用C#代码而不是gif本身来制作动画。第一步是从gif文件中提取图片。实际提取14幅图像，每幅图像的显示时间为0.03s。

​

​

我希望在UWP中找到一种方法，用这14个图片文件制作动画，并为每一个0.03s设置显示时间。多么?我需要反复制作动画，或者可以通过我的控制被播放或停止。谢谢!

More:

感谢朱妮可！我试过你的代码，但还是没能显示动画。我的密码在这里：

git@github.com:tomxue/pictureAnimationInUWP.git

和下面。第二个图像img，我引用这个链接：Storyboard with DiscreteObjectKeyFrame is not working in windows phone 8

但这两种密码都行不通。

我很快就会试试Win2D。

  <Page.Resources>
    <Storyboard x:Key="std" x:Name="std2" RepeatBehavior="Forever" AutoReverse="True">
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="image1" Storyboard.TargetProperty="Source">
            <DiscreteObjectKeyFrame KeyTime="0:0:0.01" Value="Assets/1.png"/>
            <DiscreteObjectKeyFrame KeyTime="0:0:0.06" Value="Assets/2.png"/>
            <DiscreteObjectKeyFrame KeyTime="0:0:0.09" Value="Assets/3.png"/>
            <DiscreteObjectKeyFrame KeyTime="0:0:0.12" Value="Assets/4.png"/>
            <DiscreteObjectKeyFrame KeyTime="0:0:0.15" Value="Assets/5.png"/>
            <DiscreteObjectKeyFrame KeyTime="0:0:0.18" Value="Assets/6.png"/>
            <DiscreteObjectKeyFrame KeyTime="0:0:0.21" Value="Assets/7.png"/>
            <DiscreteObjectKeyFrame KeyTime="0:0:0.24" Value="Assets/8.png"/>
            <DiscreteObjectKeyFrame KeyTime="0:0:0.27" Value="Assets/9.png"/>
            <DiscreteObjectKeyFrame KeyTime="0:0:0.30" Value="Assets/10.png"/>
            <DiscreteObjectKeyFrame KeyTime="0:0:0.33" Value="Assets/11.png"/>
            <DiscreteObjectKeyFrame KeyTime="0:0:0.36" Value="Assets/12.png"/>
            <DiscreteObjectKeyFrame KeyTime="0:0:0.39" Value="Assets/13.png"/>
            <DiscreteObjectKeyFrame KeyTime="0:0:0.42" Value="Assets/14.png"/>
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>
</Page.Resources>

<Grid>
    <Border BorderBrush="Red" BorderThickness="3" Width="500" Height="200" VerticalAlignment="Top">
        <Image x:Name="img">
            <!--do not set the Source here-->
            <Image.Triggers>
                <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                    <BeginStoryboard>
                        <Storyboard RepeatBehavior="Forever">
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="img"
                                       Storyboard.TargetProperty="Source">
                                <DiscreteObjectKeyFrame KeyTime="0:0:0.01" Value="Assets/1.png"/>
                                <DiscreteObjectKeyFrame KeyTime="0:0:0.06" Value="Assets/2.png"/>
                                <DiscreteObjectKeyFrame KeyTime="0:0:0.09" Value="Assets/3.png"/>
                                <DiscreteObjectKeyFrame KeyTime="0:0:0.12" Value="Assets/4.png"/>
                                <DiscreteObjectKeyFrame KeyTime="0:0:0.15" Value="Assets/5.png"/>
                                <DiscreteObjectKeyFrame KeyTime="0:0:0.18" Value="Assets/6.png"/>
                                <DiscreteObjectKeyFrame KeyTime="0:0:0.21" Value="Assets/7.png"/>
                                <DiscreteObjectKeyFrame KeyTime="0:0:0.24" Value="Assets/8.png"/>
                                <DiscreteObjectKeyFrame KeyTime="0:0:0.27" Value="Assets/9.png"/>
                                <DiscreteObjectKeyFrame KeyTime="0:0:0.30" Value="Assets/10.png"/>
                                <DiscreteObjectKeyFrame KeyTime="0:0:0.33" Value="Assets/11.png"/>
                                <DiscreteObjectKeyFrame KeyTime="0:0:0.36" Value="Assets/12.png"/>
                                <DiscreteObjectKeyFrame KeyTime="0:0:0.39" Value="Assets/13.png"/>
                                <DiscreteObjectKeyFrame KeyTime="0:0:0.42" Value="Assets/14.png"/>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Image.Triggers>
        </Image>
    </Border>

    <Border BorderBrush="Blue" BorderThickness="3" Width="500" Height="200" VerticalAlignment="Bottom">
        <Image x:Name="image1"/>
    </Border>
    <Button x:Name="button" Content="Button" Margin="0,280,0,0" VerticalAlignment="Top" Height="110" Width="200" Click="button_Click" HorizontalAlignment="Center"/>
</Grid>

cs代码如下：

  private void button_Click(object sender, RoutedEventArgs e)
    {
        std2.Begin();
    }

Answer 1

最好用代码来处理这件事。

1. 将位图图像的资源位置从一个网格更改到另一个页面，以便更容易找到它们。

• Edit 事件。

int索引= 0；而(真){ index++；var位图= this.Resources$"key{ index }“作为BitmapImage；image1.Source =位图；等待Task.Delay(30)；if (索引== 14)索引= 0；}

运行时，闪烁的前几秒钟似乎是由于加载图像所需的时间所致。我认为，通过在代码中提前读取图像并将其创建为BitmapImage，这个问题将得到解决。