[文章]

【软通动力】HarmonyOS三方件开发指南(10)——GifImage

2021-4-16 09:57:58  195 软通动力 HarmonyOS 三方件
分享
0
1. GifImage组件功能介绍
1.1. 功能介绍:
GifImage组件是一个可以显示加载动态图片(gif格式)的三方组件。
1.2. 模拟器上运行效果:
1.jpg
2. GifImage使用方法
2.1. 新建工程,增加组件Har包依赖
在应用模块中添加HAR,只需要将GifImage.har复制到entry\libs目录下即可(由于build.gradle中已经依赖的libs目录下的*.har,因此不需要在做修改)。

2.2. 设置gif的布局文件
修改主页面的布局文件ability_main.xml,将Image更新为Gif并将图片源设为gif格式
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <DirectionalLayout
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"
  4.     ohos:height="match_parent"
  5.     ohos:width="match_parent"
  6.     ohos:orientation="vertical">

  7.     <com.isoftstone.modulea.Gif
  8.         ohos:id="$+id:testimg"
  9.         ohos:height="match_content"
  10.         ohos:width="match_content"
  11.         ohos:image_src="$media:gif6"
  12.         ohos:layout_alignment="horizontal_center"
  13.     />

  14.     <com.isoftstone.modulea.Gif
  15.         ohos:id="$+id:testimg1"
  16.         ohos:image_src="$media:coffe"
  17.         ohos:height="match_content"
  18.         ohos:width="match_content"
  19.         ohos:layout_alignment="horizontal_center"
  20.         />

  21.     <com.isoftstone.modulea.Gif
  22.         ohos:layout_alignment="horizontal_center"
  23.         ohos:height="match_content"
  24.         ohos:image_src="$media:deleting"
  25.         ohos:width="match_content"
  26.         ohos:id="$+id:text"
  27.         />

  28. </DirectionalLayout>
复制代码
2.3.  MainAbilitySlice的UI加载代码
设置Gif gif= findComponentById(ResourceTable.Id_**)即可。
3. GifImage开发实现
3.1. 新建一个Module
新建一个Module,类型选择HarmonyOS Library,模块名为Gif,如图
2.png
3.2. 新建Gif类
新建一个Gif类,继承自Image类,设置 ResourceManager并通过attrSet.getAttr("image_src").get().getStringValue() 获取图片路径,代码如下:
  1. public class Gif extends Image{
  2. public Gif(Context context) throws IOException, NotExistException, WrongTypeException {
  3.     super(context);
  4.     this.context=context;
  5.     ResourceManager resourceManager =context.getResourceManager();
  6.     init(resourceManager);
  7. }
  8. public Gif(Context context, AttrSet attrSet) throws IOException, NotExistException, WrongTypeException {
  9.     super(context, attrSet);
  10.     this.context=context;
  11.     String id  = attrSet.getAttr("image_src").get().getStringValue();
  12.     // $media:16777218
  13.     Pattern pattern = Pattern.compile("[^0-9]");
  14.     Matcher matcher = pattern.matcher(id);
  15.     String all = matcher.replaceAll("");
  16.     ids = Integer.valueOf(all);
  17.     ResourceManager resourceManager = context.getResourceManager();
  18.     init(resourceManager);
  19. }
  20. }
复制代码
为了实现动画,需要定义一个AnimatorValue,并设置动画侦听回调函数,代码如下:
  1. // 动画

  2. private AnimatorValue animatorValue;
复制代码
创建ImageSource和 RawFileEntry读取文件并通过while循环获得图片的每一帧:
  1. private void init()  {
  2.   ImageSource.SourceOptions sourceOptions = new ImageSource.SourceOptions();
  3.   ImageSource.DecodingOptions decodingOptions = new ImageSource.DecodingOptions();
  4.   decodingOptions.allowPartialImage=true;
  5.   sourceOptions.formatHint="image/gif";
  6.   RawFileEntry rawFileEntry = resourceManager.getRawFileEntry(resourceManager.getMediaPath(ids));
  7.   imageSource = ImageSource.create(rawFileEntry.openRawFile(),sourceOptions);
  8.   if (imageSource != null) {
  9.       i=0;
  10.       while(imageSource.createPixelmap(i,decodingOptions)!=null) {
  11.           pixelMapList.add(imageSource.createPixelmap(i, decodingOptions));
  12.           i++;
  13.       }
  14. }
复制代码
通过AnimatorValue启动动画
  1. animatorValue = new AnimatorValue();
  2.     animatorValue.setCurveType(Animator.CurveType.linear);
  3.     animatorValue.setDelay(100);
  4.     animatorValue.setLoopedCount(Animator.INFINITE);
  5.     animatorValue.setDuration(2000);
  6.     animatorValue.setValueUpdateListener(mAnimatorUpdateListener);
  7.     animatorValue.start();
复制代码
为实现图片切换效果,在动画监听回调函数内设置setPixelMap,进度为v*pixelMapList.size()
(转换为Int类型)
  1. // 动画侦听函数

  2. private final AnimatorValue.ValueUpdateListener mAnimatorUpdateListener
  3.         = new AnimatorValue.ValueUpdateListener() {
  4.     @Override
  5.     public void onUpdate(AnimatorValue animatorValue, float v) {
  6.       index++;
  7. setPixelMap(pixelMapList.get((int)(v*pixelMapList.size())));
  8.         invalidate();
  9.     }
  10. };
复制代码
3.3. 编译HAR包
利用Gradle可以将HarmonyOS Library库模块构建为HAR包,构建HAR包的方法如下:
在Gradle构建任务中,双击PackagedebugHar或PackageReleaseHar任务,构建Debug类型或Release类型的HAR。
待构建任务完成后,可以在GifImage> bulid > outputs > har目录中,获取生成的HAR包。
3.png
项目源代码地址:https://github.com/isoftstone-dev/gif_HarmonyOS

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
欢迎交流:https://harmonyos.51cto.com/column/30

评论

您需要登录后才可以回帖 登录 | 注册

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容图片侵权或者其他问题,请联系本站作侵删。 侵权投诉
发文章
快速回复
扫一扫分享
返回顶部 返回列表