Huawei Hongmeng watch achieves fireworks display effect on New Year's Eve

Preface

After more than a year of popularization and Application , Hongmeng system has already involved various terminal equipment of Huawei , Like mobile phone. 、 Loudspeaker box 、 Watch and so on . The blogger just got Huawei WATCH GT Runner, Then use it to write the knowledge of Hongmeng watch development .

image-animator Components

Because it is the first blog post to explain , In order to let everyone know about Hongmeng watch App More interested in development , We will not explain any components separately . here , On New Year's Eve, Huawei watch dial displays fireworks , To make everyone more interested in development .

First , Fireworks bloom on the dial of the watch , It must be a dynamic process , It can be used video Component to implement , It can also be done through gif To achieve .

But it's a pity. , Hongmeng watch development component , Huawei did not provide video Components . Because no one can watch videos with a watch , Then you can only rotate pictures frame by frame , To achieve dynamic fireworks blooming effect .

and JS In the component , Huawei Hongmeng provides a image-animator. seeing the name of a thing one thinks of its function , Picture frame animation player , Through it, we can realize the rotation playback of pictures at a specified interval of seconds .

Realize the fireworks bloom on the dial

because , Since it is GIF Decomposed frame by frame pictures , Then it must be stored in the resource folder of the project , That is to say entry-src-mian-js-default-common In the folder , As shown in the figure below ：

next , We need to be in js An array referencing this image is defined in the code ：m_images, The specific code is as follows （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"}]
    }
}

Because Huawei WATCH GT Runner The dial of is 466*466 Resolution screen , We can directly set the width of all pictures of fireworks to 466, This just shows up on the screen . Of course , It can also be defined directly css Style file settings are also ok .

however , Too many pictures, the bigger the packaged application , It cannot be installed beyond a certain size .index.css The code is as follows ：

.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;
}

here , Bloggers directly set the width and height of the image to 466px. After the style definition and the reference array of the image resource file are set , You can directly design the layout file of the dial ,index.hml The code is as follows ：

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

among ,duration Property indicates the duration of a single playback , this 3s Divide by the number of pictures , Is the interval time of each frame .

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

The project code download address of this blog ： Click to download