#HarmonyOS征文#让你的刘海迎风飘起来GIF - HarmonyOS技术社区 - 电子技术论坛 - 广受欢迎的专业电子论坛
分享 收藏 返回

[文章]

#HarmonyOS征文#让你的刘海迎风飘起来GIF

需求分析

顾名思义,博主这里是需要创建一个GIF动图卡片,让GIF动起来。不过,目前鸿蒙的JS卡片不支持显示相册文件(Java支持)。所以,暂时我们用资源文件GIF图片代替。以下卡片基于JS。

Js卡片布局

因为我们这里只是显示一个GIF图片,所以默认的2*2卡片即可,布局也很简单就显示一张图片而已。代码如下:
index.hml:

  1.    
index.css:
  1. .list_pattern_layout {
  2.     flex-direction: column;
  3.     align-items: center;
  4.     width: 100%;
  5.     margin: 10px;
  6.     height: 100%;
  7. }

  8. .div_image{
  9.     width: 100%;
  10.     height: 100%;
  11.     object-fit: scale-down;
  12. }
index.json:

  1. {
  2.   "data": {
  3.     "imageUrl": ""
  4.   }
  5. }
这里,就是简单的一个图片资源文件路径而已。而动图的播放是用定时器来切换动图的播放。


定时轮播动图

这里,我们需要通过WidgetAbility类的onCreateForm()方法启动定时器任务,示例代码如下所示:
  1. public class WidgetAbility extends Ability {
  2. private int pageNum = 0;
  3.     private int length = LYJConstant.imageFilePath.length - 1;

  4. private void startTimer(long formId) {
  5.         Timer timer = new Timer();
  6.         timer.schedule(
  7.                 new TimerTask() {
  8.                     @Override
  9.                     public void run() {
  10.                         if (pageNum >= length) {
  11.                             pageNum = 1;
  12.                         } else {
  13.                             pageNum += 1;
  14.                         }
  15.                         updateJsForms(formId,pageNum);
  16.                     }
  17.                 },
  18.                 0,
  19.                 100);
  20.     }

  21.     private void updateJsForms(long formId,int num) {
  22.         ZSONObject zsonObject = new ZSONObject();
  23.         zsonObject.put("imageUrl", "common/"+String.valueOf(num)+".png");
  24.         FormBindingData formBindingData=new FormBindingData(zsonObject);
  25.         try {
  26.             updateForm(formId,formBindingData);
  27.         } catch (FormException e) {
  28.             e.printStackTrace();
  29.         }
  30.     }


  31.     @Override
  32.     protected ProviderFormInfo onCreateForm(Intent intent) {
  33.         HiLog.info(TAG, "onCreateForm");
  34.         long formId = intent.getLongParam(AbilitySlice.PARAM_FORM_IDENTITY_KEY, INVALID_FORM_ID);
  35.         String formName = intent.getStringParam(AbilitySlice.PARAM_FORM_NAME_KEY);
  36.         int dimension = intent.getIntParam(AbilitySlice.PARAM_FORM_DIMENSION_KEY, DEFAULT_DIMENSION_2X2);
  37.         HiLog.info(TAG, "onCreateForm: formId=" + formId + ",formName=" + formName);

  38.         FormControllerManager formControllerManager = FormControllerManager.getInstance(this);
  39.         FormController formController = formControllerManager.getController(formId);
  40.         formController = (formController == null) ? formControllerManager.createFormController(formId,
  41.                 formName, dimension) : formController;
  42.         if (formController == null) {
  43.             HiLog.error(TAG, "Get null controller. formId: " + formId + ", formName: " + formName);
  44.             return null;
  45.         }
  46. //启动定时任务
  47.         this.startTimer(formId);
  48.         return formController.bindFormData();
  49.     }
这里,就是将一张张单个的图片连贯起来达到轮播动图的目的。到这里,我们的GIF动图卡片就全部实现了。


本文源代码地址:https://github.com/liyuanjinglyj/GIFCard



回帖(1)

KK

2021-7-7 11:51:49
秀啊,感觉这卡片挺好玩的

更多回帖

我也要说两句 回帖

相关经验

×

发帖