鴻蒙HarmonyOS三方件開發(fā)指南-GifImage

作者：軟通田可輝 2021-02-24 15:22:47

開發(fā) OpenHarmony

文章由鴻蒙社區(qū)產(chǎn)出，想要了解更多內(nèi)容請(qǐng)前往：51CTO和華為官方戰(zhàn)略合作共建的鴻蒙技術(shù)社區(qū)https://harmonyos.51cto.com

[[383409]]

想了解更多內(nèi)容，請(qǐng)?jiān)L問：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.51cto.com

1. GifImage組件功能介紹

1.1. 功能介紹：

GifImage組件是一個(gè)可以顯示加載動(dòng)態(tài)圖片(gif格式)的三方組件。

1.2. 模擬器上運(yùn)行效果：

2. GifImage使用方法

2.1. 新建工程，增加組件Har包依賴

在應(yīng)用模塊中添加HAR，只需要將GifImage.har復(fù)制到entry\libs目錄下即可(由于build.gradle中已經(jīng)依賴的libs目錄下的*.har，因此不需要在做修改)。

2.2. 設(shè)置gif的布局文件

修改主頁面的布局文件ability_main.xml，將Image更新為Gif并將圖片源設(shè)為gif格式。

<?xml version="1.0" encoding="utf-8"?> 
<DirectionalLayout 
    xmlns:ohos="http://schemas.huawei.com/res/ohos" 
    ohos:height="match_parent" 
    ohos:width="match_parent" 
    ohos:orientation="vertical"> 
 
    <com.isoftstone.modulea.Gif 
        ohos:id="$+id:testimg" 
        ohos:height="match_content" 
        ohos:width="match_content" 
        ohos:image_src="$media:gif6" 
        ohos:layout_alignment="horizontal_center" 
    /> 
 
    <com.isoftstone.modulea.Gif 
        ohos:id="$+id:testimg1" 
        ohos:image_src="$media:coffe" 
        ohos:height="match_content" 
        ohos:width="match_content" 
        ohos:layout_alignment="horizontal_center" 
        /> 
 
    <com.isoftstone.modulea.Gif 
        ohos:layout_alignment="horizontal_center" 
        ohos:height="match_content" 
        ohos:image_src="$media:deleting" 
        ohos:width="match_content" 
        ohos:id="$+id:text" 
        /> 
 
</DirectionalLayout>

2.3. MainAbilitySlice的UI加載代碼

設(shè)置Gif gif= findComponentById(ResourceTable.Id_**)即可。

3. GifImage開發(fā)實(shí)現(xiàn)

3.1. 新建一個(gè)Module

新建一個(gè)Module，類型選擇HarmonyOS Library，模塊名為Gif，如圖：

3.2. 新建Gif類

新建一個(gè)Gif類，繼承自Image類，設(shè)置 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); 
} 
}

為了實(shí)現(xiàn)動(dòng)畫，需要定義一個(gè)AnimatorValue，并設(shè)置動(dòng)畫偵聽回調(diào)函數(shù)，代碼如下：

// 動(dòng)畫 
 
private AnimatorValue animatorValue;

創(chuàng)建ImageSource和 RawFileEntry讀取文件并通過while循環(huán)獲得圖片的每一幀：

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啟動(dòng)動(dòng)畫：

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

為實(shí)現(xiàn)圖片切換效果，在動(dòng)畫監(jiān)聽回調(diào)函數(shù)內(nèi)設(shè)置setPixelMap，進(jìn)度為v*pixelMapList.size()。

(轉(zhuǎn)換為Int類型)

// 動(dòng)畫偵聽函數(shù) 
 
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(); 
    } 
};