OpenHarmony基础组件—图片加载ImageKnife

MatrixData2024-08-21 8:33

1、参考资源

OpenHarmony图形基础组件---ImageKnife_imageknife progresslistener-CSDN博客

OpenHarmony ArkUI框架开发-ImageKnife渲染层重构_imageknifecomponent 圆角-CSDN博客

鸿蒙版本：Api12

2、功能源码解析

1、ImageAnimator动画加载和控制；

组件：ImageKnifeAnimatorComponent；

主要设置：

1、ImageKnifeOption； 1、图片加载相关设置：图片地址、占位图、失败图；2、缓存相关设置：缓存策略，加载策略；3、加载任务优先级设置、加载状态回调；上下文；图片转化设置；

2、AnimatorOption；主要动画控制回调方法；state；iterations；reverseonStart；onFinish；onPause；onCancel；onRepeat；

3、Component组件相关设置；width、height、backgroundColor、margin；

加载流程

1、ImageKnifeAnimatorComponent中通过组件的生命周期处理图片加载；状态设置等；

2、使用@Monitor监听外部参数设置改变；

3、使用系统控件ImageAnimator显示加载的图片和设置图片相关属性和状态回调；

4、使用ImageKnife管理图片加载任务和图片缓存；

2、Hsp预加载图片

复制代码

ImageKnife.getInstance()
  .preLoadCache('https://img.xxx')
  .then((data) => {
    console.log("preLoadImage_FileCache:" + data)
    this.imageKnifeOption.loadSrc = data
  })

由于ImageKnife是框架图片加载任务和缓存的管理类；预加载可以使用该工具中提供的加载方法实现；