catalog:

1. Function introduction of GifImage component

2. How to use GifImage

3. Development and implementation of GifImage

4. Collection of articles in the HarmonyOS tripartite component development guide

1. Function introduction of GifImage component
1.1. Function introduction:
GifImage component is a three-party component that can display and load dynamic pictures (gif format).

1.2. Running effect on simulator:
 

 

2. GifImage usage
2.1. Build a new project and increase the dependence of component Har package
To add har in the application module, you only need to add GifImage Copy the har to the entry\libs directory (since build.gradle already depends on *. har in the libs directory, it does not need to be modified).

2.2. Set the layout file of gif
Modify the layout file of the master page_ main. XML, update the Image to GIF and set the Image source to GIF format

<?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. UI loading code of MainAbilitySlice
Set Gif gif= findComponentById(ResourceTable.Id_ * *).
3. Development and implementation of GifImage
3.1. Create a new Module
Create a new Module. The type is harmony OS library. The Module name is Gif, as shown in the figure

3.2. New Gif class
Create a new Gif class, inherit from the Image class, set the ResourceManager and pass attrset getAttr("Image_src"). get(). Getstringvalue() gets the Image path. The code is as follows:

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);
}
}

In order to realize animation, you need to define an AnimatorValue and set the animation listening callback function. The code is as follows:

// animation

private AnimatorValue animatorValue;

Create ImageSource and RawFileEntry, read the file and obtain each frame of the picture through the while loop:

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++;
      }
}

Start animation with AnimatorValue

 

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

To achieve the picture switching effect, set setPixelMap in the animation monitoring callback function, and the progress is v * pixelmaplist size()

(convert to Int type)

// Animation listener function

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. Compile HAR package
Using Gradle, the HarmonyOS Library module can be built into HAR package. The method of building HAR package is as follows:

In Gradle build task, double-click PackageDebugHar or packagerereleasehar task to build HAR of Debug type or Release type.

After the build task is completed, you can get the generated HAR package in GifImage > bulid > outputs > HAR directory.

Project source code address: https://github.com/isoftstone-dev/gif_HarmonyOS

Welcome to exchange: HWIS-HOS@isoftstone.com

Author: soft Tongtian Kehui

For more information, please visit: Hongmeng technology community jointly built by 51CTO and Huawei's official strategic cooperation https://harmonyos.51cto.com