除夕夜烟花燃放效果目录
前言image-animator组件实现表盘烟花绽放
前言
经过一年多的普及与应用，鸿蒙系统早已经涉及华为的各个终端设备，比如手机、音箱、手表等等。正好博主拿到了华为WATCH GT Runner，那就用它来写鸿蒙手表开发的知识。
image-animator组件
因为是第一篇博文讲解，为了让大家对鸿蒙手表App开发更感兴趣，我们不单独讲解任何组件。这里，我们通过除夕夜华为手表表盘绽放烟花效果，来让大家更有开发兴趣。
首先，在手表表盘绽放烟花，肯定是一个动态过程，可以用video组件去实现，也可以通过gif去实现。
但很遗憾，鸿蒙手表开发组件中，华为并没有提供video组件。因为没有谁会用手表看视频，那么只能通过一帧一帧的去轮换图片，来实现动态的烟花绽放效果。
而JS组件中，华为鸿蒙提供了一个image-animator。顾名思义，就是图片帧动画播放器，通过它我们可以间隔指定的秒数实现图片的轮换播放。
实现表盘烟花绽放
因为，既然是GIF分解的一帧一帧的图片，那么其必然都存储在项目的资源文件夹中，也就是entry-src-mian-js-default-common文件夹中，如下图所示：
接着，我们需要在js代码中定义一个引用这个图片的数组：m_images，具体代码如下所示（index.js）：
export default {
data: {
m_images:[ {src: "/common/8.png"}, {src: "/common/9.png"}
, {src: "/common/10.png"}, {src: "/common/11.png"}, {src: "/common/12.png"}
, {src: "/common/13.png"}, {src: "/common/14.png"}, {src: "/common/15.png"}
, {src: "/common/16.png"}, {src: "/common/17.png"}, {src: "/common/18.png"}
, {src: "/common/19.png"}, {src: "/common/20.png"}, {src: "/common/21.png"}
, {src: "/common/22.png"}, {src: "/common/23.png"}, {src: "/common/24.png"}]
}
}
因为华为WATCH GT Runner的表盘是466*466的分辨率屏幕，我们可以直接把烟花的所有图片的宽都设置为466，这样刚好显示在屏幕上。当然，也可以直接定义css样式文件设置也行。
不过，图片太多打包的应用越大，超过一定大小都不能安装。index.css代码如下所示：
.container {
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
}
.title {
width: 200px;
font-size: 30px;
text-align: center;
}
.image-mode {
width: 466px;
height: 466px;
}
这里，博主直接将图片的宽高都设置为466px。样式定义以及图片资源文件的引用数组都设置完成之后，就可以直接设计表盘的布局文件，index.hml代码如下所示：
其中，duration属性表示单次播放时长，这3s除以图片张数，就是每帧图片的间隔时间。
这样烟花效果就能完全实现，最后实现的效果如首图效果一模一样。
本博文的项目代码下载地址：点击下载
精彩文章
您阅读本篇文章共花了：
发表评论