鸿蒙HarmonyOS三方件开发指南-GifImage

想了解更多内容，请访问：

创新互联服务项目包括福海网站建设、福海网站制作、福海网页制作以及福海网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，福海网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到福海省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

和华为官方合作共建的鸿蒙技术社区

https://harmonyos.

1. GifImage组件功能介绍

1.1. 功能介绍：

GifImage组件是一个可以显示加载动态图片(gif格式)的三方组件。

1.2. 模拟器上运行效果：

2. GifImage使用方法

2.1. 新建工程，增加组件Har包依赖

在应用模块中添加HAR，只需要将GifImage.har复制到entry\libs目录下即可(由于build.gradle中已经依赖的libs目录下的*.har，因此不需要在做修改)。

2.2. 设置gif的布局文件

修改主页面的布局文件ability_main.xml，将Image更新为Gif并将图片源设为gif格式。

 
 
 
 
  
  
  
   
  
  
  
  
  
  
  
  
    xmlns:ohos="http://schemas.huawei.com/res/ohos" 
  
  
  
      ohos:height="match_parent" 
  
  
  
      ohos:width="match_parent" 
  
  
  
      ohos:orientation="vertical"> 
  
  
  
   
  
  
  
      
  
  
  
  
        ohos:id="$+id:testimg" 
  
  
  
          ohos:height="match_content" 
  
  
  
          ohos:width="match_content" 
  
  
  
          ohos:image_src="$media:gif6" 
  
  
  
          ohos:layout_alignment="horizontal_center" 
  
  
  
      /> 
  
  
  
   
  
  
  
      
  
  
  
  
        ohos:id="$+id:testimg1" 
  
  
  
          ohos:image_src="$media:coffe" 
  
  
  
          ohos:height="match_content" 
  
  
  
          ohos:width="match_content" 
  
  
  
          ohos:layout_alignment="horizontal_center" 
  
  
  
          /> 
  
  
  
   
  
  
  
      
  
  
  
  
        ohos:layout_alignment="horizontal_center" 
  
  
  
          ohos:height="match_content" 
  
  
  
          ohos:image_src="$media:deleting" 
  
  
  
          ohos:width="match_content" 
  
  
  
          ohos:id="$+id:text" 
  
  
  
          />

2.3. MainAbilitySlice的UI加载代码

设置Gif gif= findComponentById(ResourceTable.Id_**)即可。

3. GifImage开发实现

3.1. 新建一个Module

新建一个Module，类型选择HarmonyOS Library，模块名为Gif，如图：

3.2. 新建Gif类

新建一个Gif类，继承自Image类，设置 ResourceManager并通过attrSet.getAttr("image_src").get().getStringValue() 获取图片路径，代码如下：

 
 
 
 
  
  
  
  public class Gif extends Image{ 
  
  
  
  public Gif(Context context) throws IOException, NotExistException, WrongTypeException { 
  
  
  
      super(context); 
  
  
  
      this.context=context; 
  
  
  
      ResourceManager resourceManager =context.getResourceManager(); 
  
  
  
      init(resourceManager); 
  
  
  
  } 
  
  
  
  public Gif(Context context, AttrSet attrSet) throws IOException, NotExistException, WrongTypeException { 
  
  
  
      super(context, attrSet); 
  
  
  
      this.context=context; 
  
  
  
      String id  = attrSet.getAttr("image_src").get().getStringValue(); 
  
  
  
      // $media:16777218 
  
  
  
      Pattern pattern = Pattern.compile("[^0-9]"); 
  
  
  
      Matcher matcher = pattern.matcher(id); 
  
  
  
      String all = matcher.replaceAll(""); 
  
  
  
      ids = Integer.valueOf(all); 
  
  
  
      ResourceManager resourceManager = context.getResourceManager(); 
  
  
  
      init(resourceManager); 
  
  
  
  } 
  
  
  
  }

为了实现动画，需要定义一个AnimatorValue，并设置动画侦听回调函数，代码如下：

 
 
 
 
  
  
  
  // 动画 
  
  
  
   
  
  
  
  private AnimatorValue animatorValue;

创建ImageSource和 RawFileEntry读取文件并通过while循环获得图片的每一帧：

 
 
 
 
  
  
  
  private void init()  { 
  
  
  
    ImageSource.SourceOptions sourceOptions = new ImageSource.SourceOptions(); 
  
  
  
    ImageSource.DecodingOptions decodingOptions = new ImageSource.DecodingOptions(); 
  
  
  
    decodingOptions.allowPartialImage=true; 
  
  
  
    sourceOptions.formatHint="image/gif"; 
  
  
  
    RawFileEntry rawFileEntry = resourceManager.getRawFileEntry(resourceManager.getMediaPath(ids)); 
  
  
  
    imageSource = ImageSource.create(rawFileEntry.openRawFile(),sourceOptions); 
  
  
  
    if (imageSource != null) { 
  
  
  
        i=0; 
  
  
  
        while(imageSource.createPixelmap(i,decodingOptions)!=null) { 
  
  
  
            pixelMapList.add(imageSource.createPixelmap(i, decodingOptions)); 
  
  
  
            i++; 
  
  
  
        } 
  
  
  
  }

通过AnimatorValue启动动画：

 
 
 
 
  
  
  
  animatorValue = new AnimatorValue(); 
  
  
  
     animatorValue.setCurveType(Animator.CurveType.LINEAR); 
  
  
  
     animatorValue.setDelay(100); 
  
  
  
     animatorValue.setLoopedCount(Animator.INFINITE); 
  
  
  
     animatorValue.setDuration(2000); 
  
  
  
     animatorValue.setValueUpdateListener(mAnimatorUpdateListener); 
  
  
  
     animatorValue.start();

为实现图片切换效果，在动画监听回调函数内设置setPixelMap，进度为v*pixelMapList.size()。

(转换为Int类型)

 
 
 
 
  
  
  
  // 动画侦听函数 
  
  
  
   
  
  
  
  private final AnimatorValue.ValueUpdateListener mAnimatorUpdateListener 
  
  
  
          = new AnimatorValue.ValueUpdateListener() { 
  
  
  
      @Override 
  
  
  
      public void onUpdate(AnimatorValue animatorValue, float v) { 
  
  
  
        index++; 
  
  
  
  setPixelMap(pixelMapList.get((int)(v*pixelMapList.size()))); 
  
  
  
          invalidate(); 
  
  
  
      } 
  
  
  
  };

3.3. 编译HAR包

利用Gradle可以将HarmonyOS Library库模块构建为HAR包，构建HAR包的方法如下：

在Gradle构建任务中，双击PackageDebugHar或PackageReleaseHar任务，构建Debug类型或Release类型的HAR。

待构建任务完成后，可以在GifImage> bulid > outputs > har目录中，获取生成的HAR包。

项目源代码地址：https://github.com/isoftstone-dev/gif_HarmonyOS

欢迎交流：HWIS-HOS@isoftstone.com

想了解更多内容，请访问：

和华为官方合作共建的鸿蒙技术社区

https://harmonyos.

网页题目：鸿蒙HarmonyOS三方件开发指南-GifImage
当前URL：http://www.shufengxianlan.com/qtweb/news20/512520.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容