36.Glide过渡与变换

压缩包

GlideDemo.zip

一、过渡动画

定义Glide如何从占位符到新加载的图片，或从缩略图到全尺寸图像过渡。

交叉淡入（避免占位图还能显示）

DrawableCrossFadeFactory factory=new DrawableCrossFadeFactory.Builder().setCrossFadeEnabled(true).build();
Glide.with(context)
.load(URL)
.apply(requestOptions)
.transition(DrawableTransitionOptions.withCrossFade(factory))
.into(ImageView)holder.itemView);
为了提升性能，请在使用Glide向ListView，GridView或RecyclerView加载图片时考虑避免

二、对占位符和透明图片交叉淡入的常见错误

Glide的默认交叉淡入效果使用了TransactionDrawable。它提供了两种动画模式，由setCrossFadeEnabled()控制。当交叉淡入被禁用时，正在过渡的图片会在原先显示的图像上面淡入。当交叉淡入被启用时，原先显示的图片会从不透明过渡到透明，而正在过渡的图片则会从透明变为不透明。<br />    在Glide中，我们默认禁用了交叉淡入，这样通常看起来要好看一些。实际的交叉淡入，如上所述对两个图片同时改变alpha值，通常会在过渡的中间造成一个短暂的白色闪屏，这个时候两个图片都是部分不透明的。不幸的是，虽然禁用交叉淡入通常是一个比较好的默认行为，当待加载的图片包含透明像素时仍然可能造成问题。当占位符比实际加载的图片要大，或者图片部分为透明时，禁用交叉淡入会导致动画完成后占位符在图片后面仍然可见，如果你在加载透明图片时使用了占位符，你可以启用交叉淡入，具体办法时调整DrawableCrossFadeFactory里的参数并将结果传到transition()中：<br /> DrawableCrossFadeFactory factory=new DrawableCrossFadeFactory.Builder().setCrossFadeEnabled(true).build();

三、实现步骤：

1.默认的是用Drawable来加载图片

2.如果在with后面调用了安卓的asbitmap()，则就用Bitmap来加载图片

3.占位符和图片一起显示

四、整体代码：

package com.example.glidedemo;
import androidx.appcompat.app.AppCompatActivity;
import android.app.VoiceInteractor;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import com.bumptech.glide.Glide;
import com.bumptech.glide.load.resource.drawable.DrawableTransitionOptions;
import com.bumptech.glide.request.RequestOptions;
public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ImageView iv = findViewById(R.id.iv);
        RequestOptions requestOptions = new RequestOptions()
                .placeholder(R.drawable.hold)
                .error(R.drawable.error)
                .fallback(R.drawable.empty)
                .override(100, 100);
        // 常见错误：对占位符和透明图片交叉淡入可能都会显示，这时候就需要用到一个方法为factory
        DrawableCrossFadeFactory factory=
            new DrawableCrossFadeFactory.Builder().setCrossFadeEnabled(true).build();
        Glide.with(this)
                .load("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcuimg.zuyushop.com%3A8013%2FcuxiaoPic%2F20153%2F2015030010262399424.png&refer=http%3A%2F%2Fcuimg.zuyushop.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627308625&t=aa84e065943c825f8cbf94fc0beeea6e")
                .apply(requestOptions)
                .transition(DrawableTransitionOptions.withCrossFade(factory))
                .into(iv);
        //    Glide.with(this).asBitmap()
        //       .load("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcuimg.zuyushop.com%3A8013%2FcuxiaoPic%2F20153%2F2015030010262399424.png&refer=http%3A%2F%2Fcuimg.zuyushop.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627308625&t=aa84e065943c825f8cbf94fc0beeea6e")
        //       .apply(requestOptions)
        //       .transition(BitmapTransitionOptions.withCrossFade(3000))
        //       .into(iv);
    }
}

五、变换

获取资源并修改它，然后返回被修改后的资源。通常变换操作是用来完成剪裁或对位图应用过滤器。比如对图片进行圆角配置。<br />    Glide.with(this)<br />            .load(URL)<br />            .tranform(...)<br />            .into(iv);

1.CircleCrop：圆角

2.RoundedCorners：四个角度统一指定

3.GranularRoundedCorners：四个角度单独指定

4.Rotate：旋转

六、整体代码：

1.MainActivity文件代码

package com.example.glidedemo;
import androidx.appcompat.app.AppCompatActivity;
import android.app.VoiceInteractor;
import android.graphics.Bitmap;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import com.bumptech.glide.Glide;
import com.bumptech.glide.load.resource.bitmap.BitmapTransitionOptions;
import com.bumptech.glide.load.resource.bitmap.CircleCrop;
import com.bumptech.glide.load.resource.drawable.DrawableTransitionOptions;
import com.bumptech.glide.request.RequestOptions;
import com.bumptech.glide.request.transition.DrawableCrossFadeFactory;
public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ImageView iv = findViewById(R.id.iv);
        RequestOptions requestOptions = new RequestOptions()
                .placeholder(R.drawable.hold)
                .error(R.drawable.error)
                .fallback(R.drawable.empty)
                .override(100, 100);
        // 常见错误：对占位符和透明图片交叉淡入可能都会显示，这时候就需要用到一个方法为factory
        DrawableCrossFadeFactory factory=
            new DrawableCrossFadeFactory.Builder().setCrossFadeEnabled(true).build();
        Glide.with(this).asBitmap()
                .load("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202006%2F03%2F20200603134848_dJURK.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627314693&t=ed1ffd3b9ea4133383ea827e1668999a")
                .apply(requestOptions)
                .transition(BitmapTransitionOptions.withCrossFade(factory))
                .transform(new CircleCrop())
                .into(iv);
    }
}

2.效果图：