1. 简单使用
2. 属性控制
3. 播放动态webp
4. 监听webp播放及控制webp播放次数
5. 预取图片
6. 连续加载多张动图闪帧解决方案
1. 简单使用
1)添加依赖:
dependencies {
//必须添加
implementation 'com.facebook.fresco:fresco:1.9.0'
//依需要添加
// For animated GIF support
implementation 'com.facebook.fresco:animated-gif:1.9.0'
// For WebP support, including animated WebP
implementation 'com.facebook.fresco:animated-webp:1.9.0'
implementation 'com.facebook.fresco:webpsupport:1.9.0'
// For WebP support, without animations
implementation 'com.facebook.fresco:webpsupport:1.9.0'
// Provide the Android support library (you might already have this or a similar dependency)
implementation 'com.android.support:support-core-utils:24.2.1'
}
2)Application中初始化
在你AndroidManifest中指定的Application的onCreate方法中初始化,如果没有指定,需要继承并指定。
public class MyApplication extends Application {
@Override
public void onCreate() {
super.onCreate();
Fresco.initialize(this);
}
}
<manifest
... >
<application
...
android:label="@string/app_name"
android:name=".MyApplication"
>
...
</application>
...
</manifest>
3)编写xml,记得指定fresco命名空间,需要注意的是SimpleDraweeView必须指定确定大小,不支持wrap_content
xmlns:fresco="http://schemas.android.com/apk/res-auto"
<com.facebook.drawee.view.SimpleDraweeView
android:id="@+id/my_image_view"
android:layout_width="130dp"
android:layout_height="130dp"
fresco:placeholderImage="@drawable/my_drawable" />
4)指定Uri
Uri uri = Uri.parse("https://raw.githubusercontent.com/facebook/fresco/master/docs/static/logo.png");
SimpleDraweeView draweeView = (SimpleDraweeView) findViewById(R.id.my_image_view);
draweeView.setImageURI(uri);
或直接在xml中指定
fresco:actualImageUri
fresco:actualImageResource
Fresco 不支持 相对路径的URI. 所有的 URI 都必须是绝对路径,并且带上该 URI 的 scheme。
2. 属性控制
属性都基本可以在xml和代码中控制,见文生义,这里就不详细解释了
<com.facebook.drawee.view.SimpleDraweeView
android:id="@+id/my_image_view"
android:layout_width="20dp"
android:layout_height="20dp"
fresco:fadeDuration="300"
fresco:actualImageScaleType="focusCrop"
fresco:placeholderImage="@color/wait_color"
fresco:placeholderImageScaleType="fitCenter"
fresco:failureImage="@drawable/error"
fresco:failureImageScaleType="centerInside"
fresco:retryImage="@drawable/retrying"
fresco:retryImageScaleType="centerCrop"
fresco:progressBarImage="@drawable/progress_bar"
fresco:progressBarImageScaleType="centerInside"
fresco:progressBarAutoRotateInterval="1000"
fresco:backgroundImage="@color/blue"
fresco:overlayImage="@drawable/watermark"
fresco:pressedStateOverlayImage="@color/red"
fresco:roundAsCircle="false"
fresco:roundedCornerRadius="1dp"
fresco:roundTopLeft="true"
fresco:roundTopRight="false"
fresco:roundBottomLeft="false"
fresco:roundBottomRight="true"
fresco:roundWithOverlayColor="@color/corner_color"
fresco:roundingBorderWidth="2dp"
fresco:roundingBorderColor="@color/border_color"
/>
3. 播放动态webp
1)自动播放:
Uri uri;
DraweeController controller = Fresco.newDraweeControllerBuilder()
.setUri(uri)
.setAutoPlayAnimations(true)
. // 其他设置
.build();
mSimpleDraweeView.setController(controller);
2)手动控制播放播放
ControllerListener controllerListener = new BaseControllerListener<ImageInfo>() {
@Override
public void onFinalImageSet(
String id,
@Nullable ImageInfo imageInfo,
@Nullable Animatable anim) {
if (anim != null) {
// 其他控制逻辑,可以在此处设置图片加载结束的标志位
anim.start();
}
}
};
Uri uri;
DraweeController controller = Fresco.newDraweeControllerBuilder()
.setUri(uri)
.setControllerListener(controllerListener)
// 其他设置
.build();
mSimpleDraweeView.setController(controller);
使用animatable.start()开始播放动画,animatable.stop()停止播放动画
4. 控制动态webp播放次数,监听webp播放,获取动图时长
1)控制播放次数
需添加依赖:
implementation 'com.facebook.fresco:animated-drawable:1.9.0'
final DraweeController controller = Fresco.newDraweeControllerBuilder()
.setAutoPlayAnimations(true)
.setUri(uri)
.setControllerListener(new BaseControllerListener<ImageInfo>() {
@Override
public void onFinalImageSet(
String id,
@Nullable ImageInfo imageInfo,
@Nullable Animatable animatable) {
if (animatable instanceof AnimatedDrawable2) {
AnimatedDrawable2 animatedDrawable = (AnimatedDrawable2) animatable;
animatedDrawable.setAnimationBackend(new LoopCountModifyingBackend(animatedDrawable.getAnimationBackend(), 3));//设置循环次数
}
}
})
.build();
simpleDraweeView.setController(controller);
public class LoopCountModifyingBackend extends AnimationBackendDelegate {
private int mLoopCount;
public LoopCountModifyingBackend(
@Nullable AnimationBackend animationBackend,
int loopCount) {
super(animationBackend);
mLoopCount = loopCount;
}
@Override
public int getLoopCount() {
return mLoopCount;
}
}
2)监听动态webp
animatedDrawable.setAnimationListener()
animaetdDrawable是AnimatedDrawable2的实例
3)获取动图时长
animatedDrawable.getLoopDurationMs()
其它的还有:
animatedDrawable.getFrameCount()//获取帧数
animatedDrawable.getLoopCount()//获取循环次数
5. 预取图片/预加载图片
获取ImagePipeline:
Fresco.getImagePipeline()
获取ImageRequest
ImageRequest.fromFile(file);
ImageRequest.fromUri(uri);
预加载到磁盘缓存:
imagePipeline.prefetchToDiskCache(imageRequest, callerContext);
预加载到内存缓存:
imagePipeline.prefetchToBitmapCache(imageRequest, callerContext);
取消预加载:
DataSource<Void> prefetchDataSource = imagePipeline.prefetchTo...;
prefetchDataSource.close();
6. 连续播放多张动图闪帧解决方案
连续播放多张动图,中间会有几十毫秒的加载间隔。
本来想将动态webp缓存到内存,后来发现行不通,动态的webp貌似无法缓存到内存。
最后另辟蹊径,才用setPlaceHolder(),使其先显示的是动图的第一帧,解决问题。
代码如下:
GenericDraweeHierarchyBuilder builder = new GenericDraweeHierarchyBuilder(getResources());
/*设置placeholder,减少连续加载两个动图时的间隙,同时设置渐变时间为0,动态webp不会缓存到内存*/
GenericDraweeHierarchy hierarchy = builder
.setPlaceholderImage(ResourcesCompat.getDrawable(getResources(), drawableId, null))
.setFadeDuration(0)
.build();
DraweeController controller = Fresco.newDraweeControllerBuilder()
.setUri(uri)
.setControllerListener(controllerListener)
.build();
mSimpleDraweeView.setHierarchy(hierarchy);
mSimpleDraweeView.setController(controller);
需要注意的是,设置placeholder后,在播放下一张动图时,如果下一张动图没有设置placeholder,那么上一张的placeholder会闪一下,所以在加载下一张动图前需要设置placeholder或者将placeholder置为空。
refer:
http://frescolib.org/
https://www.fresco-cn.org/
https://github.com/facebook/fresco