动态更改uwp中的图像源时如何避免闪烁效果

Question

我有一组图像，并且在按钮单击事件中正在替换图像源。更换图像源时出现闪烁效果。如何解决呢？

Sample

public class MainActivity extends AppCompatActivity {
private RecyclerView mRecyclerView;
FirebaseDatabase database;
DatabaseReference myRef;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    PhotoView photoView = (PhotoView) findViewById(R.id.imageView);

    mRecyclerView = (RecyclerView) findViewById(R.id.rv);
    mRecyclerView.setHasFixedSize(true);
    //  mLayoutManager=new LinearLayoutManager(this);
    //mRecyclerView.setLayoutManager(mLayoutManager);
    mRecyclerView.setLayoutManager(new LinearLayoutManager(this));

    FirebaseDatabase.getInstance().setPersistenceEnabled(true);
    database = FirebaseDatabase.getInstance();
    myRef = database.getReference("Veg");
}

public void onStart() {
    super.onStart();
    FirebaseRecyclerAdapter<ModelClass, MainActivity.BlogViewHolder> firebaseRecyclerAdapter =
            new FirebaseRecyclerAdapter<ModelClass, MainActivity.BlogViewHolder>(ModelClass.class, R.layout.design_row, MainActivity.BlogViewHolder.class, myRef) {

                @Override
                protected void populateViewHolder(MainActivity.BlogViewHolder viewHolder, ModelClass model, int position) {
                    viewHolder.setTitle(model.gettitle());
                    viewHolder.setImage(getApplicationContext(), model.getImage());
                }
            };
    mRecyclerView.setAdapter(firebaseRecyclerAdapter);

}

public static class BlogViewHolder extends RecyclerView.ViewHolder {
    View mView;

    public BlogViewHolder(View itemView) {
        super(itemView);
        mView = itemView;
        itemView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent browserIntent = new Intent(Intent.ACTION_VIEW,
                        Uri.parse("https://price-control-list-fca08.firebaseio.com/"));
                Intent browserChooserIntent = Intent.createChooser(browserIntent, "Soghat");
                v.getContext().startActivity(browserChooserIntent);
            }

        });
    }

    public void setTitle(String title) {
        TextView post_title = (TextView) mView.findViewById(R.id.titleText);
        post_title.setText(title);

    }

    public void setImage(Context ctx, String image) {
        ImageView post_image = (ImageView) mView.findViewById(R.id.imageView);
        Picasso.with(ctx).load(image).into(post_image);
    }
}

Answer 1

对于闪烁效果快速改变。而且这样做的代码在UI线程中花费的时间太长。

您可以使用bitmapImage.SetSourceAsync等待图像加载。

    private async Task SetSourceAsync(Image image, Uri uri)
    {
        await Dispatcher.RunAsync(CoreDispatcherPriority.Normal, async () =>
        {
            var file = await StorageFile.GetFileFromApplicationUriAsync(uri);
            var bitmapImage = new BitmapImage();
            await bitmapImage.SetSourceAsync(await file.OpenAsync(FileAccessMode.Read));
            image.Source = bitmapImage;
        });
    }

您可以更改代码

        image1.Source = new BitmapImage(new Uri("ms-appx:///Assets/OSM200.png",
            UriKind.RelativeOrAbsolute));
        image2.Source = new BitmapImage(new Uri("ms-appx:///Assets/OSM201.png",
          UriKind.RelativeOrAbsolute));
        image3.Source = new BitmapImage(new Uri("ms-appx:///Assets/OSM202.png",
          UriKind.RelativeOrAbsolute));
        image4.Source = new BitmapImage(new Uri("ms-appx:///Assets/OSM203.png",
          UriKind.RelativeOrAbsolute));
        image5.Source = new BitmapImage(new Uri("ms-appx:///Assets/OSM210.png",
          UriKind.RelativeOrAbsolute));
        image6.Source = new BitmapImage(new Uri("ms-appx:///Assets/OSM211.png",
          UriKind.RelativeOrAbsolute));
        image7.Source = new BitmapImage(new Uri("ms-appx:///Assets/OSM212.png",
          UriKind.RelativeOrAbsolute));
        image8.Source = new BitmapImage(new Uri("ms-appx:///Assets/OSM213.png",
          UriKind.RelativeOrAbsolute));
        image9.Source = new BitmapImage(new Uri("ms-appx:///Assets/OSM220.png",
          UriKind.RelativeOrAbsolute));
        image10.Source = new BitmapImage(new Uri("ms-appx:///Assets/OSM221.png",
          UriKind.RelativeOrAbsolute));
        image11.Source = new BitmapImage(new Uri("ms-appx:///Assets/OSM222.png",
          UriKind.RelativeOrAbsolute));
        image12.Source = new BitmapImage(new Uri("ms-appx:///Assets/OSM223.png",
          UriKind.RelativeOrAbsolute));

收件人

    private async void Replace_Click(object sender, RoutedEventArgs e)
    {

       await  SetSourceAsync(image1, new Uri("ms-appx:///Assets/OSM200.png",
            UriKind.RelativeOrAbsolute));
        await SetSourceAsync(image2, new Uri("ms-appx:///Assets/OSM201.png",
            UriKind.RelativeOrAbsolute));
        await SetSourceAsync(image3, new Uri("ms-appx:///Assets/OSM202.png",
            UriKind.RelativeOrAbsolute));
        await SetSourceAsync(image4, new Uri("ms-appx:///Assets/OSM203.png",
            UriKind.RelativeOrAbsolute));
        await SetSourceAsync(image5, new Uri("ms-appx:///Assets/OSM210.png",
            UriKind.RelativeOrAbsolute));
        await SetSourceAsync(image6, new Uri("ms-appx:///Assets/OSM211.png",
            UriKind.RelativeOrAbsolute));
        await SetSourceAsync(image7, new Uri("ms-appx:///Assets/OSM212.png",
            UriKind.RelativeOrAbsolute));
        await SetSourceAsync(image8, new Uri("ms-appx:///Assets/OSM213.png",
            UriKind.RelativeOrAbsolute));
        await SetSourceAsync(image9, new Uri("ms-appx:///Assets/OSM220.png",
            UriKind.RelativeOrAbsolute));
        await SetSourceAsync(image10, new Uri("ms-appx:///Assets/OSM221.png",
            UriKind.RelativeOrAbsolute));
        await SetSourceAsync(image11, new Uri("ms-appx:///Assets/OSM222.png",
            UriKind.RelativeOrAbsolute));
        await SetSourceAsync(image12, new Uri("ms-appx:///Assets/OSM223.png",
            UriKind.RelativeOrAbsolute));
    }

但是当代码在某些较差的GPU中运行时，它总是闪烁。

我认为另一种方法是“隐藏并显示图像”或制作动画。

隐藏和显示方式是制作一些面板，以显示其中一个面板。

      <StackPanel x:Name="custom">
               <StackPanel Orientation="Horizontal">
                   <Image x:Name="image1" Height="200" Width="200" Source="ms-appx:///Assets/custom200.png"/>
                   <Image x:Name="image2" Height="200" Width="200" Source="ms-appx:///Assets/custom201.png"/>
                   <Image x:Name="image3" Height="200" Width="200" Source="ms-appx:///Assets/custom202.png"/>
                   <Image x:Name="image4" Height="200" Width="200" Source="ms-appx:///Assets/custom203.png"/>
               </StackPanel>
               <StackPanel Orientation="Horizontal">
                   <Image x:Name="image5" Height="200" Width="200" Source="ms-appx:///Assets/custom210.png"/>
                   <Image x:Name="image6" Height="200" Width="200" Source="ms-appx:///Assets/custom211.png"/>
                   <Image x:Name="image7" Height="200" Width="200" Source="ms-appx:///Assets/custom212.png"/>
                   <Image x:Name="image8" Height="200" Width="200" Source="ms-appx:///Assets/custom213.png"/>
               </StackPanel>
               <StackPanel Orientation="Horizontal">
                   <Image x:Name="image9"  Height="200" Width="200" Source="ms-appx:///Assets/custom220.png"/>
                   <Image x:Name="image10" Height="200" Width="200" Source="ms-appx:///Assets/custom221.png"/>
                   <Image x:Name="image11" Height="200" Width="200" Source="ms-appx:///Assets/custom222.png"/>
                   <Image x:Name="image12" Height="200" Width="200" Source="ms-appx:///Assets/custom223.png"/>
               </StackPanel>
        </StackPanel>

        <StackPanel x:Name="Osm" Visibility="Collapsed">
            <StackPanel Orientation="Horizontal">
                <Image Height="200" Width="200" Source="ms-appx:///Assets/OSM200.png"/>
                <Image  Height="200" Width="200" Source="ms-appx:///Assets/OSM201.png"/>
                <Image Height="200" Width="200" Source="ms-appx:///Assets/OSM202.png"/>
                <Image  Height="200" Width="200" Source="ms-appx:///Assets/OSM203.png"/>
            </StackPanel>
            <StackPanel Orientation="Horizontal">
                <Image  Height="200" Width="200" Source="ms-appx:///Assets/OSM210.png"/>
                <Image  Height="200" Width="200" Source="ms-appx:///Assets/OSM211.png"/>
                <Image  Height="200" Width="200" Source="ms-appx:///Assets/OSM212.png"/>
                <Image  Height="200" Width="200" Source="ms-appx:///Assets/OSM213.png"/>
            </StackPanel>
            <StackPanel Orientation="Horizontal">
                <Image   Height="200" Width="200" Source="ms-appx:///Assets/OSM220.png"/>
                <Image  Height="200" Width="200" Source="ms-appx:///Assets/OSM221.png"/>
                <Image  Height="200" Width="200" Source="ms-appx:///Assets/OSM222.png"/>
                <Image  Height="200" Width="200" Source="ms-appx:///Assets/OSM223.png"/>
            </StackPanel>
        </StackPanel>

您可以编写一些按钮，然后单击

        <StackPanel Orientation="Horizontal">
            <Button Height="50" Width="150" HorizontalAlignment="Center" VerticalAlignment="Center"
                    Content="ReplaceCustom"  Click="ShowCustom_OnClick" Margin="5"/>

            <Button Height="50" Width="150" HorizontalAlignment="Center" VerticalAlignment="Center"
                    Content="Replace OSM"  Click="ShowReplace_OnClick" Margin="5"/>


        </StackPanel>

单击按钮时可以显示面板。

    private void ShowCustom_OnClick(object sender, RoutedEventArgs e)
    {
        custom.Visibility = Visibility.Visible;
        Osm.Visibility = Visibility.Collapsed;
    }

    private void ShowReplace_OnClick(object sender, RoutedEventArgs e)
    {
        custom.Visibility = Visibility.Collapsed;
        Osm.Visibility = Visibility.Visible;
    }