<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) {
        // 若卡片支持定時更新/定點更新/卡片使用方主動請求更新功能，則提供方需要覆寫該方法以支持數(shù)據(jù)更新
        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);
        //設置一個計時器，循環(huán)播放圖片形成動畫。
        //從第一張圖片開始，這里的動圖分解后只有10幀，那么我們的上限就是10
        let i=1;
        setInterval(()=>{
            //如果已經(jīng)播放到第10幀了，那么切換回第一幀，實現(xiàn)循環(huán)播放
            if(i>10){
                i=1;
            }
            //修改pic_num的值，遞增播放
            obj.pic_num=i.toString();
            //綁定數(shù)據(jù)
            formData = formBindingData.createFormBindingData(obj);
            //更新卡片
            formProvider.updateForm(formId,formData).catch((err)=>{
               console.info("yzj"+JSON.stringify(err));
                            })
            //播放下一幀
            i++;
        //每幀持續(xù)90ms，這里是根據(jù)實際情況設定的    
        },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;
    }
}