曲线救国，JS表情包卡片！

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

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

    }
}

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

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

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