前言

经过一年多的普及与应用,鸿蒙系统早已经涉及华为的各个终端设备,比如手机、音箱、手表等等。正好博主拿到了华为WATCH GT Runner,那就用它来写鸿蒙手表开发的知识。

image-animator组件

因为是第一篇博文讲解,为了让大家对鸿蒙手表App开发更感兴趣,我们不单独讲解任何组件。这里,我们通过除夕夜华为手表表盘绽放烟花效果,来让大家更有开发兴趣。

首先,在手表表盘绽放烟花,肯定是一个动态过程,可以用video组件去实现,也可以通过gif去实现。

但很遗憾,鸿蒙手表开发组件中,华为并没有提供video组件。因为没有谁会用手表看视频,那么只能通过一帧一帧的去轮换图片,来实现动态的烟花绽放效果。

而JS组件中,华为鸿蒙提供了一个image-animator。顾名思义,就是图片帧动画播放器,通过它我们可以间隔指定的秒数实现图片的轮换播放。

实现表盘烟花绽放

因为,既然是GIF分解的一帧一帧的图片,那么其必然都存储在项目的资源文件夹中,也就是entry-src-mian-js-default-common文件夹中,如下图所示:

接着,我们需要在js代码中定义一个引用这个图片的数组:m_images,具体代码如下所示(index.js):

因为华为WATCH GT Runner的表盘是466*466的分辨率屏幕,我们可以直接把烟花的所有图片的宽都设置为466,这样刚好显示在屏幕上。当然,也可以直接定义css样式文件设置也行。

不过,图片太多打包的应用越大,超过一定大小都不能安装。index.css代码如下所示:

这里,博主直接将图片的宽高都设置为466px。样式定义以及图片资源文件的引用数组都设置完成之后,就可以直接设计表盘的布局文件,index.hml代码如下所示:

其中,duration属性表示单次播放时长,这3s除以图片张数,就是每帧图片的间隔时间。

这样烟花效果就能完全实现,最后实现的效果如首图效果一模一样。

本博文的项目代码下载地址: