曲线救国，JS表情卡！

(2)index.json这里可以初始化卡片的变量，定义一些具体的事件（可以为卡片分配一些事件绑定，比如点击卡片打开应用程序）。但是我在官网上没有找到json中实现更多方法的方法，所以不会，但至少我们可以给html样式的变量赋初值。{"data":{"mini":false,"pic_num":"1"},"actions":{}}我们也可以一张一张的拍照，一帧一帧的播放，形成动画。这个是为了测试效果，所以素材是从动画中找来的。这里我们需要将动画一张一张分解成图片，标记为1、2、3、4……，然后在JS端一张一张切换，得到动态效果，即逐帧动画片。3.Form.js这里我们实现动效。(1)分解运动图片这里我们首先选择一个运动图片，将其分解成一帧一帧的图片，标记并存储。比如这个：然后我们用一些工具来分解。这里推荐一个在线工具，可以对图片进行分解，并标注每帧图片持续多少秒，方便后续制作。门户网站。这样我们就得到了一张10帧的图片。每帧持续0.09s，即90ms。(2)曲线救国基本结构首先了解一下Form.js的基本结构：接口名称说明onCreate(want:Want):formBindingData.FormBindingData卡片提供者接收创建卡片的通知接口。onCastToNormal(formId:string):void卡片提供者收到临时卡片转普通卡片的通知接口。onUpdate(formId:string):void卡片提供者收到更新卡片的通知接口。onVisibilityChange(newStatus:{[key:string]:number}):voidCardprovider收到改变可见性的通知接口。onEvent(formId:string,message:string):void卡片提供者接收和处理卡片事件的通知接口。onDestroy(formId:string):void卡片提供者收到卡片销毁通知接口。onAcquireFormState?(want:Want):formInfo.FormState卡片提供者接收查询卡片状态的通知接口。那么，曲线救国的思路就是：在onCreate方法中，用同一张GIF图片来回切换。在onCreate方法中，启动一个定时器，逐帧切换图片，合成动画。这个方法好像可以帮我们自由拼图，或者自己制作动画？切换图片就是更新卡片，那么如何更新卡片呢？卡片更新onUpdate(formId){//如果卡片支持定时更新/定点更新/卡片用户主动请求更新功能，提供者需要重写此方法以支持数据更新console.log('FormAbilityonUpdate');让obj={"title":"titleOnUpdate","detail":"detailOnUpdate"};让formData=formBindingData.createFormBindingData(obj);formProvider.updateForm(formId,formData).catch((error)=>{console.log('FormAbilityupdateForm,error:'+JSON.stringify(error));});},分析官网给出的教程，可以得到如下信息：formId，每张卡片的“身份证”。obj中的数据就是我们在卡片的hml文件中打开的路径。我们这里只有一个，就是{{pic_num}}，卡片数据绑定类，formBindingData，我们需要将修改后的obj信息绑定到它上面。卡片管理和更新类formProvider可以通过将卡片ID和卡片数据传入updateForm方法来更新卡片。曲线救国方法一：来回切换={"pic_num":"1"}varformData=formBindingData.createFormBindingData(obj);exportdefault{onCreate(want){//调用以返回一个FormBindingData对象。//获取卡片IDletformId=want.parameters["ohos.extra.param.key.form_identity"];obj.pic_num="temp";formData=formBindingData.createFormBindingData(obj);//设置一个定时器来回切换同一张GIF图片letflag=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)返回表单数据；},onCastToNormal(formId){//当通知表单提供者临时表单已成功转换为普通表单时调用。console.info("yzj:onCastToNormal");},onUpdate(formId){//调用以通知表单提供者更新指定的表单。},onVisibilityChange(newStatus){//当表单提供者从系统接收到表单事件时调用。},onEvent(formId,message){//当表单提供者定义的指定消息事件被触发时调用。},onDestroy(formId){//调用以通知表单提供者指定的表单已被销毁。},onAcquireFormState(want){//被调用以返回一个{@linkFormState}对象。返回formInfo.FormState.READY；}}方法二：帧动画这里使用2.3.1分解的动画作为素材，逐帧播放。这看似绕了一个大圈，其实可以成为一种制作方法。我们可以自由选择图片逐帧播放，形成动画，比如制作定格动画。那可以变成定格动画卡。通常一帧是1/12秒，差不多是83ms。这里我们只使用GIF分解出来的图片进行测试，所以时间间隔遵循GIF本身的帧。从“@ohos.application.formBindingData”导入formBindingData；从“@ohos.application.formInfo”导入formInfo；从“@ohos.application.formProvider”导入formProvider；varobj={"pic_num":"1"}varformData=formBindingData.createFormBindingData(obj);exportdefault{onCreate(want){//调用以返回一个FormBindingData对象。//获取卡片IDletformId=want.parameters["ohos.extra.param.key.form_identity"];obj.pic_num="1";formData=formBindingData.createFormBindingData(obj);//设置一个定时器，循环播放图片，形成动画。//从第一张图开始，这里的动画图片分解后只有10帧，所以我们的上限是10leti=1;setInterval(()=>{//如果第10帧已经播放完毕，则切换回第一帧，实现循环播放if(i>10){i=1;}//修改pic_num的值并播放incrementallyobj.pic_num=i.toString();//绑定数据formData=formBindingData.createFormBindingData(obj);//更新卡片formProvider.updateForm(formId,formData).catch((err)=>{console.info("yzj"+JSON.stringify(err));})//播放下一帧i++;//每帧持续90ms，这里根据实际情况设置},90);返回表单数据；},onCastToNormal(formId){//当通知表单提供者临时表单已成功转换为普通表单时调用。console.info("yzj:onCastToNormal");},onUpdate(formId){//调用以通知表单提供者更新指定的表单。},onVisibilityChange(newStatus){//当表单提供者从系统接收到表单事件时调用。},onEvent(formId,message){//当表单提供者定义的指定消息事件被触发时调用。},onDestroy(formId){//调用以通知表单提供者指定的表单已被销毁。},onAcquireFormState(want){//被调用以返回一个{@linkFormState}对象。返回formInfo.FormState.READY；}}两种方式生成的效果效果差不多。4.有问题。重启板子后，需要重启卡，否则会卡死。关闭应用程序本身后，卡片只会循环一次。4.更多5.尾声应该是可以用gif结束的东西，现在好像有点bug？曲线救国勉强能实现功能，但如果换个角度想做，说不定可以自动生成图片或定格动画？可以点击下方链接下载文章相关附件：https://ost.51cto.com/resource/2211https://ost.51cto.com/resource/2212了解更多开源信息，请访问：开源基础软件社区https://ost.51cto.com。