preface

After more than a year of popularization and application, Hongmeng system has already involved huawei’s various terminal devices, such as mobile phones, speakers, watches and so on. Just as the blogger got huawei WATCH GT Runner, he used it to write knowledge about the development of Hongmeng Watches.

Image – animator component

Because this is the first blog, in order to make you more interested in the development of Hongmeng Watch App, we will not explain any components alone. Here, we use huawei watch dial fireworks effect on New Year’s Eve to make you more interested in development.

First of all, fireworks in the watch dial, is certainly a dynamic process, can use the video component to achieve, can also be achieved through GIF.

However, it is a pity that Huawei does not provide video component in the development component of Hongmeng Watch. Since no one would watch a video with a watch, the only way to achieve dynamic fireworks is to rotate images frame by frame.

In JS component, Huawei Hongmeng provides an image-Animator. As the name implies, it is the picture frame animation player, through which we can achieve a specified number of seconds interval picture rotation playback.

Realize dial fireworks bloom

Since the images are decomposed frame by frame in GIF, they must be stored in the resource folder of the project, namely the entry- Src-mian-js-default-common folder, as shown below:

Next, we need to define an array of references to this image in our js code: m_images, as shown below (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"}]    }}
Copy the code

Since the Huawei WATCH GT Runner has a 466 x 466 resolution screen, we could simply set all the fireworks images to 466 wide to fit on the screen. Of course, you can also define the CSS style file Settings directly.

However, apps with too many images and larger packages cannot be installed over 18MB. The index.css code looks like this:

.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; }Copy the code

In this case, the blogger simply set the width and height of each image to 466px. With the style definition and the array of references to the image resource file set, you can directly design the layout file for the dial. The code for index.hml looks like this:

<div class="container">    <image-animator images="{{m_images}}" duration="3s" class="image-mode"></image-animator></div>
Copy the code

Where, the duration property represents the single playback duration. The 3s divided by the number of pictures is the interval of each picture frame.

In this way, the fireworks effect can be fully realized, and the final effect is exactly the same as the first picture.

Download the project code of this blog post: Click download [1]

Reference links

[1] Click download: gitee.com/liyuanjingl…