HarmonyOS鸿蒙Next征文：动画JS卡片，打造惊艳桌面

HarmonyOS鸿蒙Next征文：动画JS卡片，打造惊艳桌面 动画 JS 卡片，打造惊艳桌面

根据官方 Codelab 时钟服务卡片开发，我们得知一件事

服务卡片可以主动刷新了

OHHHHHHH

OHHHHHHH

OHHHHHHH

以秒刷新的时钟都可以，那动画是不是也可以呢？

我抱着试一试的心态，就做到了下面动图所示的。

下面开始描述实现过程

1.首先新建一个 JS 服务卡片

我当前的项目为 jsUI 项目为主导的项目，java 也一样。
在项目目录中选择 entry 文件夹 ==> New ==> Service Widget
进入卡片模板选择

其实选哪个都无所谓，反正页面也要自己写。这里我选择的是

Image With Information (图文模板)

继续下一步

上图中名字描述都可以先不写，直接选择类型为 JS

然后选择服务卡片的大小：4*4

(既然为了将动画放入卡片，那必须要大，要大，要最大的。)

然后我们就得到了一个最简单的 JS 卡片

2.书写 JS 卡片页面

用 JS 书写页面，自然是找前端三件套文件。

因为卡片是手机桌面应用的一部分，所以对性能又严格的要求。

这里我们不能用 js 书写页面逻辑，只能用 json 来书写页面中需要绑定的数据。

下面是需要书写的 hml，css，json 三个文件的代码。

小伙伴们看到这里应该明白我准备干嘛了吧，我要通过图片变换来达到动画的效果。

众所周知，一段视频是由一连串连贯的图片组成的。

前置常识：
1秒60帧 == 1秒60张图片
当然，这样的视频体积是巨大的，所以我们平常的视频是经过压缩的，
视频压缩应用最广泛的技术：H264 H265
原理：连贯动作图片，仅渲染变动的像素，所以可以大量减少视频体积

当然，我们只是几张本地图片，还用不上这样的优化。

不过后期可以考虑一下。

那么先看一下目前仅仅书写完卡片前端 hml css json ，做到什么效果吧。

3.通过java在AceAbility传递事件数据

在 JsUI 项目中的 Java Ace框架位置，在下图。

图中 onTriggerFormEvent 红框框起的，即为我们需要获取点击事件的生命周期。

当然，还有卡片相关的其他生命周期。

图中红框拉住的内容，data 中的键名 与 actions中params的键名，是一 一对应。

所以我们在 java 代码中使用 FormBindingData 可以将数据通过

updateForm(formId,bindingData);

即可对卡片进行内容刷新，那么下面你应该是得到了一个这样的结果。

4.通过ServiceAbility将事件放入后台自动化

手动流程走完，就开始写一个自动流程，让图片可以自动更换

这里需要新建一个HarmonyOS开发概念中三大Ability中最重要的一个PA，ServiceAbility。

如果你和我一样是一个 JS 鸿蒙开发者，那么对于ServiceAbility的利用简直太爱了。

下面是新建方法：

得到上面三张图片最后一个，就说明新建成功了。

在ServiceAbility中也同样有自己的生命周期，我们先要做的第一件事是启动它。

并且要从之前在AceAbility中的onTriggerFormEvent卡片事件上，传值到Service里面。

尽管官方codelab中使用了java的orm对象映射数据库，我们用更方便的办法吧。

我们选择用 intent 传值，下面是MainAbility代码：

我们通过 intent.setParam(“formId”,formId);

将卡片id传入Service，并且启动了它。那在Service里面哪里去获取呢？

小伙伴可能会去…

我们要去onCommand去继续intent获取后的代码书写，如下：

我们从 onCommand 获取到卡片的 formId，就可以在Service里面进行卡片的刷新。

为了更好的执行自动换图，按照官方codelab的方法，书写了定时器和卡片刷新的具体方法。

在 updateForms 函数中，我们同样是利用 FormBindingData 进行卡片数据更新。其中的params参数，我们当然是手写的字符串 json ，这样才能把自己需要的参数携带进去。

目前就两张图片，test1.jpg 和 test2.jpg。所以才有了如下代码：

按道理来说，如果你书写到这一步，应该会得到如下结果：

5.自定义素材(建议)

因为我个人是一个前端，对图形有一些常用工具和涂鸦基础。

所以我通过Spine就将之前水视频的素材导出做了测试。

图中的人物是BiliBili虚拟形象中的 33 娘（2021拜年祭）。

最后再来看一下效果：

6.未完待续 （本帖持续更新…）

目前已知的bug

1. 事件需要约束开启，不让定时器重复导致加速。
2. 背景没有，达不到真正的惊艳，原画素材需要分辨率增加。
3. 更复杂的动画绝对需要对图片进行压缩优化，所以可能会加入云服务或者java开源包，对序列图片进行类视频压缩。

B站个人主页：https://space.bilibili.com/22690066

昵称：九弓子

如需gitee源码，请马上点赞关注评论区放置gitee地址~~~~~~~hiahia