#夏日挑战赛#【FFH】曲线救国，JS表情包卡片！原创精华

龙眼Litchi

发布于 2022-7-22 14:15

438浏览

3收藏

[本文正在参加星光计划3.0-夏日挑战赛]

最近一直对着dayu200板子，突然想搞一些动态的东西在桌面上，思来想去决定从鸿蒙特性之一服务卡片入手，何不把卡片做成动态的？但似乎OpenHarmony侧存在一些问题？

0. 效果

存在问题
曲线救国

1. 思考

新建一个工程，创建JS卡片，工程结构如下：
#夏日挑战赛#【FFH】曲线救国，JS表情包卡片！-鸿蒙开发者社区
观察工程结构与HarmonyOS开发大致一样，区别在于FormAbility是交给JS侧来管理的，因为OpenHarmony的开发没有用到JAVA，同样的卡片样式是在widget里面进行管理。
那我们要做一个动态的卡片，只需要在样式里面添加image组件，放一张gif图就行了。
但似乎不会主动循环？开个定时器刷新路径，似乎因为是同一张图片并不会主动进行刷新。
#夏日挑战赛#【FFH】曲线救国，JS表情包卡片！-鸿蒙开发者社区
于是我陷入的沉思…

我想到了两种解决方法：

存放两张一样的gif图，开个定时器来回切换。
分解成帧动画，逐帧切换。这样更麻烦了，但是反过来想，如果封装得好，我们就可以自行DIY动画了，比如定格动画。

2. 解决方法

这里我们只针对卡片的动态实现，至于服务卡片细节工程结构与其含义，咱不如直接看官网文档，这里参考HarmonyOS官网和OpenHarmony官网都行，两者基本同步。

2.1 工程结构

#夏日挑战赛#【FFH】曲线救国，JS表情包卡片！-鸿蒙开发者社区

这里可以分析出，我们在widget中对卡片样式进行设计，在FormAbility中对卡片进行操作就行了，本案例只针对卡片设计，所以暂时不管MainAbility了，让他就是HelloWorld就行。

2.2 卡片样式

2.2.1 index.hml

我在最初构建卡片的时候选择22,44大小的卡片，这里其实随便就行。
然后按照之前曲线救国的思路，这里只需要一个image组件就好了，同时为了方便测试，给图片路径开个通路，方便JS侧进行图片切换。

<div>
    <div id="wrapper">
                <image id="image" src="/common/dog/{{ pic_num }}.png" style="background-color: white;" ></image>
    </div>
</div>
1.
2.
3.
4.
5.

2.2.2 index.json

这里可以对卡片的变量进行初始化，和一些具体的事件定义(卡片可以赋予一些事件绑定,比如点击卡片打开应用)。但我并没有在官网找到json中更多方法实现的方式，所以我也不会，但是至少我们可以给hml样式的变量赋初值。

{
    "data": {
        "mini": false,
        "pic_num": "1"
    },
    
    "actions": {

    }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

我们也可以拍摄一张一张的图片，来逐帧播放形成动画。这里是为了测试效果，那么素材就是从动图里面找。这里我们需要把动图分解成一张一张的图片，分别标记为1,2,3,4…, 然后在JS侧一张一张的切换得到动态的效果，也就是逐帧动画实现。

2.3 Form.js

在这里我们实现动态的效果。

2.3.1 分解动图

这里我们首先，选择一张动图并且把他分解成一帧一帧的图片，标记好后存放起来。
比如这张：
#夏日挑战赛#【FFH】曲线救国，JS表情包卡片！-鸿蒙开发者社区
然后我们利用一些工具进行分解。这里推荐一个在线工具，可以进行图片分解，并且标注了每帧图片持续多少秒，便于后面的制作。
传送门
于是我们就得到了，10帧的图片。每帧持续0.09s，也就是90ms。
#夏日挑战赛#【FFH】曲线救国，JS表情包卡片！-鸿蒙开发者社区

2.3.2 曲线救国

2.3.2.1 基本结构

首先，我们先了解Form.js的基本结构

接口名	描述
onCreate(want: Want): formBindingData.FormBindingData	卡片提供方接收创建卡片的通知接口。
onCastToNormal(formId: string): void	卡片提供方接收临时卡片转常态卡片的通知接口。
onUpdate(formId: string): void	卡片提供方接收更新卡片的通知接口。
onVisibilityChange(newStatus: { [key: string]: number }): void	卡片提供方接收修改可见性的通知接口。
onEvent(formId: string, message: string): void	卡片提供方接收处理卡片事件的通知接口。
onDestroy(formId: string): void	卡片提供方接收销毁卡片的通知接口。
onAcquireFormState?(want: Want): formInfo.FormState	卡片提供方接收查询卡片状态的通知接口。

那么，曲线救国的思路是：

在onCreate方法中，来回切换同一个GIF图。
在onCreate方法中，开一个定时器一帧一帧切换图片，合成动图。这个方式似乎可以帮助我们自由拼接图片，或者制作自己的动画？
切换图片，就是要更新卡片，那么怎么更新卡片呢？

2.3.2.2 卡片的更新

 onUpdate(formId) {
        // 若卡片支持定时更新/定点更新/卡片使用方主动请求更新功能，则提供方需要覆写该方法以支持数据更新
        console.log('FormAbility onUpdate');
        let obj = {
            "title": "titleOnUpdate",
            "detail": "detailOnUpdate"
        };
        let formData = formBindingData.createFormBindingData(obj);
        formProvider.updateForm(formId, formData).catch((error) => {
            console.log('FormAbility updateForm, error:' + JSON.stringify(error));
        });
    },
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

分析官网给出的教程，可以得到以下信息：

formId，每个卡片的"身份证"。
obj中的数据就是我们在卡片的hml文件中开的通路，我们这里只有一条就是{{pic_num}},
卡片数据绑定类，formBindingData，我们需要把修改好的obj信息绑定在其中。
卡片管理和更新的类，formProvider，通过传入卡片ID和卡片数据进入updateForm方法中，就可以更新卡片了。

曲线救国

方法1: 来回切换

import formBindingData from '@ohos.application.formBindingData';
import formInfo from '@ohos.application.formInfo';
import formProvider from '@ohos.application.formProvider';
var obj={
    "pic_num":"1"
}
var formData=formBindingData.createFormBindingData(obj);
export default {
    onCreate(want) {
        // Called to return a FormBindingData object.
        // 获取卡片ID
        let formId = want.parameters["ohos.extra.param.key.form_identity"];
        obj.pic_num="temp";
        formData=formBindingData.createFormBindingData(obj);
        //设置一个计时器， 来回切换同一张GIF图
        let flag=0；
        setInterval(()=>{
            if(flag==0){
                //两个一模一样的GIF图，只是名字不同来回切换罢了
                obj.pic_num="temp";
                flag=1;
            }
            else{
                obj.pic_num="temp1";
                flag=0;
            }
            formData = formBindingData.createFormBindingData(obj);
                        //更新卡片
                        formProvider.updateForm(formId,formData).catch((err)=>{
                           console.info("yzj"+JSON.stringify(err));
                                        })
        
          //以GIF时长作为间隔时间。
          },2400)
        return formData;
    },
    onCastToNormal(formId) {

        // Called when the form provider is notified that a temporary form is successfully
        // converted to a normal form.

        console.info("yzj: onCastToNormal");
    },

    onUpdate(formId) {
        // Called to notify the form provider to update a specified form.
    },

    onVisibilityChange(newStatus) {
        // Called when the form provider receives form events from the system.
    },

    onEvent(formId, message) {
        // Called when a specified message event defined by the form provider is triggered.
    },

    onDestroy(formId) {
        // Called to notify the form provider that a specified form has been destroyed.
    },

    onAcquireFormState(want) {
        // Called to return a {@link FormState} object.
        return formInfo.FormState.READY;
    }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.

方法2：帧动画
这里用到 2.3.1分解的动图来做素材，在逐帧播放。这样似乎绕了一个大圈，那其实反而可以变成一个生产方式。我们可以自由选择图片逐帧播放形成动画，比如制作定格动画。那就可以变成定格动画卡片了。通常一帧为1/12秒，差不多为83ms，这里只是用GIF分解出来的图片进行测试，所以时间间隔遵从了GIF本身的帧。

import formBindingData from '@ohos.application.formBindingData';
import formInfo from '@ohos.application.formInfo';
import formProvider from '@ohos.application.formProvider';
var obj={
    "pic_num":"1"
}
var formData=formBindingData.createFormBindingData(obj);
export default {
    onCreate(want) {
        // Called to return a FormBindingData object.
        // 获取卡片ID
        let formId = want.parameters["ohos.extra.param.key.form_identity"];
        obj.pic_num="1";
        formData=formBindingData.createFormBindingData(obj);
        //设置一个计时器，循环播放图片形成动画。
        //从第一张图片开始，这里的动图分解后只有10帧，那么我们的上限就是10
        let i=1;
        setInterval(()=>{
            //如果已经播放到第10帧了，那么切换回第一帧，实现循环播放
            if(i>10){
                i=1;
            }
            //修改pic_num的值，递增播放
            obj.pic_num=i.toString();
            //绑定数据
            formData = formBindingData.createFormBindingData(obj);
            //更新卡片
            formProvider.updateForm(formId,formData).catch((err)=>{
               console.info("yzj"+JSON.stringify(err));
                            })
            //播放下一帧
            i++;
        //每帧持续90ms，这里是根据实际情况设定的    
        },90);
        return formData;
    },
    onCastToNormal(formId) {

        // Called when the form provider is notified that a temporary form is successfully
        // converted to a normal form.

        console.info("yzj: onCastToNormal");
    },

    onUpdate(formId) {
        // Called to notify the form provider to update a specified form.
    },

    onVisibilityChange(newStatus) {
        // Called when the form provider receives form events from the system.
    },

    onEvent(formId, message) {
        // Called when a specified message event defined by the form provider is triggered.
    },

    onDestroy(formId) {
        // Called to notify the form provider that a specified form has been destroyed.
    },

    onAcquireFormState(want) {
        // Called to return a {@link FormState} object.
        return formInfo.FormState.READY;
    }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.