#HarmonyOS征文#让你的刘海迎风飘起来GIF - HarmonyOS技术社区 - 电子技术论坛

2021-07-06 19:29:52

需求分析

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

Js卡片布局

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

<div class="list_pattern_layout">
<image class="div_image" src="{{imageUrl}}"/>
</div>

复制代码

index.css：

.list_pattern_layout {
flex-direction: column;
align-items: center;
width: 100%;
margin: 10px;
height: 100%;
}
.div_image{
width: 100%;
height: 100%;
object-fit: scale-down;
}

复制代码

index.json：

{
"data": {
"imageUrl": ""
}
}

复制代码

这里，就是简单的一个图片资源文件路径而已。而动图的播放是用定时器来切换动图的播放。

定时轮播动图

这里，我们需要通过WidgetAbility类的onCreateForm()方法启动定时器任务，示例代码如下所示：

public class WidgetAbility extends Ability {
private int pageNum = 0;
private int length = LYJConstant.imageFilePath.length - 1;
private void startTimer(long formId) {
Timer timer = new Timer();
timer.schedule(
new TimerTask() {
@Override
public void run() {
if (pageNum >= length) {
pageNum = 1;
} else {
pageNum += 1;
}
updateJsForms(formId,pageNum);
}
},
0,
100);
}
private void updateJsForms(long formId,int num) {
ZSONObject zsonObject = new ZSONObject();
zsonObject.put("imageUrl", "common/"+String.valueOf(num)+".png");
FormBindingData formBindingData=new FormBindingData(zsonObject);
try {
updateForm(formId,formBindingData);
} catch (FormException e) {
e.printStackTrace();
}
}
@Override
protected ProviderFormInfo onCreateForm(Intent intent) {
HiLog.info(TAG, "onCreateForm");
long formId = intent.getLongParam(AbilitySlice.PARAM_FORM_IDENTITY_KEY, INVALID_FORM_ID);
String formName = intent.getStringParam(AbilitySlice.PARAM_FORM_NAME_KEY);
int dimension = intent.getIntParam(AbilitySlice.PARAM_FORM_DIMENSION_KEY, DEFAULT_DIMENSION_2X2);
HiLog.info(TAG, "onCreateForm: formId=" + formId + ",formName=" + formName);
FormControllerManager formControllerManager = FormControllerManager.getInstance(this);
FormController formController = formControllerManager.getController(formId);
formController = (formController == null) ? formControllerManager.createFormController(formId,
formName, dimension) : formController;
if (formController == null) {
HiLog.error(TAG, "Get null controller. formId: " + formId + ", formName: " + formName);
return null;
}
//启动定时任务
this.startTimer(formId);
return formController.bindFormData();
}

复制代码

这里，就是将一张张单个的图片连贯起来达到轮播动图的目的。到这里，我们的GIF动图卡片就全部实现了。

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

[attach]1053263[/attach]

回帖高级模式

声明：本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人，不代表电子发烧友网立场。文章及其配图仅供工程师学习之用，如有内容图片侵权或者其他问题，请联系本站作侵删。侵权投诉

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

回帖高级模式