鴻蒙應(yīng)用開發(fā)-呼吸訓(xùn)練app練習(xí)（完節(jié)）

小嵌

鴻蒙應(yīng)用開發(fā)-呼吸訓(xùn)練app練習(xí)（完節(jié)）, 12.每次呼氣或吸氣logo都順時針轉(zhuǎn)動一圈

顯示效果：



點擊“點我開始”進(jìn)入訓(xùn)練頁面



代碼如下：

Jltfxunlian.hml中添加一個放圖片的標(biāo)簽

Jltfxunlian.css中添加樣式

Jltfxunlian.css中添加樣式





Jltfxunlian.js





13.在倒計時頁面進(jìn)行訓(xùn)練指引的3秒倒計時

14.3秒倒計時結(jié)束后跳轉(zhuǎn)到訓(xùn)練頁面并傳遞主頁面的數(shù)據(jù)

（最終效果）顯示效果：



選擇對應(yīng)的模式然后點擊“點我開始”進(jìn)行倒計時頁面







3秒后自動進(jìn)入訓(xùn)練頁面



最終堅持訓(xùn)練完會顯示100%進(jìn)度，logo會停止



（最終代碼）代碼如下：

Index.hml

<div class=“jltfcontainer1“>

     <div class=“jltfcontainer2“ >

         <picker-view class=“jltfpv1“ range=“{{picker1range}}“ selected=“0“ onchange=“jltfchangeAction1“/>

         <text class=“jltftxt“ >

             分

         </text>

         <image src=“/common/hm.png“ class=“jltfimg“/>

         <picker-view class=“jltfpv2“ range=“{{picker2range}}“ selected=“0“ onchange=“jltfchangeAction2“/>

     </div>

     <input type=“button“ value=“點我開始“ class=“jltfbtn“ onclick=“jltfclickAction“/>

</div>

Index.css

.jltfcontainer1 {

     flex-direction: column;

     justify-content: center;

     align-items: center;

     width: 454px;

     height: 454px;

}

.jltfcontainer2 {

     flex-direction: row;

     justify-content: center;

     align-items: center;

     margin-top: 50px;

     width: 454px;

     height: 250px;

}

.jltfpv1 {

     width: 30px;

     height: 250px;

}

.jltftxt {

     text-align: center;

     width: 50px;

     height: 36px;

}

.jltfpv2 {

     width: 80px;

     height: 250px;

}

.jltfimg {

     width: 208px;

     height: 208px;

     margin-left: 15px;

     margin-right: 15px;

}

.jltfbtn {

     width: 200px;

     height: 50px;

     font-size: 38px;

     background-color: #000000;

     border-color: #000000;

}

Index.js


import router
from \“@system.router\“




var picker1value =
null;


var picker2value =
null;




export default {

     data: {

         picker1range: [“1“, “2“, “3“],

         picker2range: [“較慢“, “舒緩“, “較快“]

     },

     jltfchangeAction1（pv）{

         console.log（“左邊的選中選“+pv.newValue）;

         picker1value=pv.newValue;

     },

     jltfchangeAction2（pv）{

         console.log（“右邊的選中選“+pv.newValue）;

         picker2value=pv.newValue;

     },

     jltfclickAction（）{

         router.replace（{

             uri:\“pages/jltfdaojishi/jltfdaojishi\“,

             params: {“data1“:picker1value,“data2“:picker2value}

         }）;

     },

     onInit（）{

         console.log（“主頁面的onInit（）被調(diào)用“）;

     },

     onReady（）{

         console.log（“主頁面的onReady（）被調(diào)用“）;

     },

     onShow（）{

         console.log（“主頁面的onShow（）被調(diào)用“）;

     },

     onDestroy（）{

         console.log（“主頁面的onDestroy（）被調(diào)用“）;

     }

}

Jltfdaojishi.hml

<div class=“container“>

     <image class=“jltfimg“ src=“{{jltfimgsrc}}“ />

     <text class=“jltftxt“>

        請保持靜止

     </text>

     <text class=“jltftxt“>

         {{jltfseconds}}秒后跟隨訓(xùn)練指引

     </text>

     <text class=“jltftxt“>

         進(jìn)行呼氣和吸氣

     </text>

</div>

Jltfdaojishi.css

.
container {

     flex-direction: column;

     justify-content: center;

     align-items: center;

     width: 454px;

     height: 454px;

}

.jltftxt {

     font-size: 38px;

     text-align: center;

     width: 484px;

     height: 50px;

     margin-top: 10px;

}

.jltfimg {

     width: 100px;

     height: 100px;

     margin-bottom: 30px;

}

Jltfdaojishi.js


import router
from \“@system.router\“


var counter = 3;




var timer =
null;


var jltfpv1 =
null;


var jltfpv2 =
null;




export default {

     data: {

         jltfimgsrc:““,

         jltfseconds:““

     },

     onInit（）{

         /*接收主頁面來的值*/

         jltfpv1=
this.data1;

         jltfpv2=
this.data2;



         
this.jltfimgsrc = “/common/“ + counter.toString（） + “.png“;

         
this.jltfseconds = counter.toString（）;

     },

     run（）{

         counter = counter - 1;

         
if （counter != 0） {

              
this.jltfimgsrc = “/common/“ + counter.toString（） + “.png“;

              
this.jltfseconds = counter.toString（）;

         }
else{

              
this.jltfimgsrc = ““;

              
this.jltfseconds = ““;



             clearInterval（timer）;

             timer =
null;



             router.replace（{

                 uri: \“pages/jltfxunlian/jltfxunlian\“,

                 params: {“key1“:jltfpv1,“key2“:jltfpv2}

         }）;

         }

     },

     onShow（）{

         timer = setInterval（
this.run,1000）;

     }

}

Jltfxunlian.hml

<div class=“jltfcontainer“>

     <!--animation-duration LOGO旋轉(zhuǎn)一次的時間 animation-iteration-count LOGO旋轉(zhuǎn)次數(shù)-->

     <image class=“jltfimg“ src=“/common/hm.png“

             style=“animation-duration:{{jltfduration}};animation-iteration-count:{{jltfcount}};“></image>

     <text class=“jltftxt1“>

       {{jltfhuxi}}（{{jltfpercent}}%）

     </text>

     <text class=“jltftxt2“ show=“{{jltfshow}}“>

           再堅持{{jltfseconds}}秒

     </text>

     <input type=“button“ value=“點擊重新開始“ class=“jltfbtn“ onclick=“jltfclickAction“/>

</div>

Jltfxunlian.css

.jltfcontainer {

     flex-direction: column;

     width: 454px;

     height: 454px;

     justify-content: center;

     align-items: center;

}

.jltftxt1 {

     font-size: 38px;

     text-align: center;

     width: 454px;

     height: 40px;

     margin-bottom: 10px;

}

.jltftxt2 {

     width: 400px;

     height: 40px;

     font-size: 30px;

     text-align: center;

}

.jltfimg {

     width: 208px;

     height: 208px;

     margin-bottom: 10px;

     animation-name: aniname;

}

@keyframes aniname {

         from {

             transform: rotate（0deg）;

         }

         to {

             transform: rotate（360deg）;

         }

}

.jltfbtn{

     width: 300px;

     height: 50px;

     font-size: 38px;

     background-color: #000000;

     border-color: #000000;

     margin-top: 40px;

}

Jltfxunlian.js


import router
from \“@system.router\“




var picker1value =
null;/*保存來自主頁面的值*/


var picker2value =
null;




var picker2seconds =
null;/*保存轉(zhuǎn)換后的秒數(shù)*/


var picker1seconds =
null;

/*初始化值*/


var timer1 =
null;


var timer2 =
null;


var timer3 =
null;

/*計數(shù)器*/


var counter = 0;




export default {

     data: {

         jltfseconds:0,

         jltfshow:
true,

         jltfhuxi: “吸氣“,

         jltfpercent: “0“,

         jltfduration:““,

         jltfcount:““

     },

     jltfclickAction（）{

         clearInterval（timer1）;

         timer1 =
null;

         /*點擊重新開始跳轉(zhuǎn)主頁面時清除定時器并設(shè)置為null*/

         clearInterval（timer2）;

         timer2 =
null;



         clearInterval（timer3）;

         timer3 =
null;



        router.replace（{

            uri:\“pages/index/index\“

        }）;

     },

     run1（）{

         
this.jltfseconds--;/*自減1*/

         
if （
this.jltfseconds == 0） {

             clearInterval（timer1）;/*清除定時器*/

             timer1 =
null;

              
this.jltfshow =
false;/*倒計時結(jié)束時隱藏文本*/

         }

     },

     run2（）{

         counter++;

         
if （counter == picker1seconds/picker2seconds） {

             clearInterval（timer2）;

             timer2 =
null;

              
this.jltfhuxi = “已完成“;

         }
else{

              
if （
this.jltfhuxi == “吸氣“） {

                 
this.jltfhuxi = “呼氣“;

             }
else if （
this.jltfhuxi == “呼氣“） {

                 
this.jltfhuxi = “吸氣“;

             }

         }

     },

     run3（）{

         /*this.jltfpercent轉(zhuǎn)化為整數(shù)加1再轉(zhuǎn)化為字符串*/

        
this.jltfpercent = （ parseInt（
this.jltfpercent）+1）.toString（）;

        
if （parseInt（
this.jltfpercent） < 10） {

           
this.jltfpercent = “0“ +
this.jltfpercent;

       }

        
if （parseInt（
this.jltfpercent） == 100） {

           
this.jltfpercent = “0“;

       }

        
if （timer2 ==
null） {

           clearInterval（timer3）;

           timer3 =
null;

           
this.jltfpercent = “100“;

       }

     },

     onInit（）{

         console.log（“訓(xùn)練頁面的onInit（）被調(diào)用“）;



         console.log（“接收到的左邊選擇器的值：“+
this.data1）;

         console.log（“接收到的右邊選擇器的值：“+
this.data2）;



         picker1value =
this.key1;

         picker2value =
this.key2;

         /*判斷選擇的是幾分鐘然后進(jìn)行賦值*/

         
if （picker1value == “1“） {

             picker1seconds = 60;

         }
else if（picker1value == “2“）{

             picker1seconds = 120;

         }
else if（picker1value == “3“）{

             picker1seconds = 180;

         }



         
if （picker2value == “較慢“） {

             picker2seconds = 6;

         }
else if（picker2value == “舒緩“）{

             picker2seconds = 4;

         }
else if（picker2value == “較快“）{

             picker2seconds = 2;

         }



         
this.jltfseconds = picker1seconds;

          /*“s“  指定單位*/

         
this.jltfduration = picker2seconds + “s“;

         
this.jltfcount = （picker1seconds / picker2seconds）.toString（）;

     },

     onReady（）{

         console.log（“訓(xùn)練頁面的onReady（）被調(diào)用“）;

     },

     onShow（）{

         console.log（“訓(xùn)練頁面的onShow（）被調(diào)用“）;



         timer1=setInterval（
this.run1,1000）;/*定時器*/

         timer2=setInterval（
this.run2,picker2seconds*1000）;

         timer3=setInterval（
this.run3,picker2seconds/100*1000）;

     },

     onDestroy（）{

         console.log（“訓(xùn)練頁面的onDestroy（）被調(diào)用“）;

     }

}

本部分參考了張榮超老師的課程和部分公開代碼