鸿蒙的js开发部模式12：鸿蒙的启动动画页的js构建与实践原创

六合李欣

发布于 2021-2-3 15:59

浏览

0收藏

1.app启动动画页的构建效果

中间使用了js的定时函数，上下使用了js控制animation的动画规则，大家可以在此基础上做到更好的效果。

鸿蒙的js开发部模式12：鸿蒙的启动动画页的js构建与实践-鸿蒙开发者社区

2.js的业务逻辑

import router from '@system.router';
import prompt from '@system.prompt';
export default {
    data: {
        title: 'World',
        startnum:10,
        an1:"",
        an2:""
    },
    onInit(){
        let  that  =this;
        //每隔1秒,startnum值减去1
        //到0的时候，定时函数(定时任务)结束，跳转页面
        //setInterval是定时函数,反复执行
        //表示反复执行的函数的逻辑，每隔多长时间 单位毫秒
       let  an1=setInterval(function(){
            that.startnum--;
            if(that.startnum==0)
            {
                //定时函数清除
                clearInterval(an1);

                prompt.showToast({
                    message:"欢迎您使用业务软件,新年好"

                });

                //setTimeout只执行一次
                setTimeout(function(){
                    //跳转页面
                    router.push({
                        uri:"pages/listgridmore/listgridmore"

                    });
                },2000);

            }
        },1000);

    },
    onShow(){

        this.loadan1();
        this.loadan2();


    },
    loadan1()
    {
        //动画选项
        let  options={
            duration:8000,
            easing:"linear",
            delay:500,
            fill:"forwards",
            iterations:1
        };

        //动画规则
        let  keyframes=[
            {transform:{translate:'480px -100px'},opacity:0.1},
            {transform:{translate:'480px 220px'},opacity:1.0}
        ];

        //作用于那个标记
        this.an1=this.$element("leftdiv").animate(keyframes,options);
        // 动画要去播放
        this.an1.play();


    },
    loadan2()
    {
        //动画选项
        let  options={
            duration:8000,
            easing:"linear",
            delay:500,
            fill:"forwards",
            iterations:1
        };

        //动画规则
        let  keyframes=[
            {transform:{translate:'0px 0px'},opacity:0.1},
            {transform:{translate:'0px -300px'},opacity:1.0}
        ];

        //作用于那个标记
        this.an2=this.$element("rightdiv").animate(keyframes,options);
        // 动画要去播放
        this.an2.play();
    }

}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.

3.页面标记构建

<div class="container">
   <div  class="topview">
       <div  id="leftdiv" class="leftview">
           <text  class="tv2">鸿蒙李欣</text>
       </div>
   </div>
    <div  class="contentview">
         <div  class="oneview">
            <text  class="tv1">{{startnum}}</text>
         </div>
    </div>

    <div  class="bottomview">
        <div  id="rightdiv" class="rightview">
            <text  class="tv2">敬请期待</text>
        </div>
    </div>
</div>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.

4.样式构建

.container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 1500px;
}
.topview{
    width: 100%;
    height: 20%;
    /**background-color: paleturquoise;**/
}
.contentview{
    width: 100%;
    height: 33%;
   /** background-color: cornflowerblue;**/
    display: flex;
    justify-content: center;
    align-items: center;
}
.bottomview{
    width: 100%;
    height: 46%;
   /** background-color: peru;**/
}
.oneview{
    width: 300px;
    height: 300px;
    border-radius: 150px;
    background-color: paleturquoise;
    display: flex;
    justify-content: center;
    align-items: center;
}
.tv1{
    font-size: 100px;
    font-weight: bold;
    font-family: sans-serif;
    color: darkgray;
}
.leftview{
    position: absolute;
    left: -250px;
    top:0px;
    width: 260px;
    height: 100px;
    background-color: snow;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
}
.tv2{
    font-size: 50px;
}
.rightview{
    position: absolute;
    left: 250px;
    bottom: 200px;
    width: 260px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
   /** background-color: cornflowerblue;**/
}

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.