|
|
鴻蒙應用開發(fā)-呼吸訓練app練習（完節(jié)）, ![]() 12.每次呼氣或吸氣logo都順時針轉(zhuǎn)動一圈
顯示效果：
點擊“點我開始”進入訓練頁面
代碼如下：
Jltfxunlian.hml中添加一個放圖片的標簽
Jltfxunlian.css中添加樣式
Jltfxunlian.css中添加樣式
Jltfxunlian.js
13.在倒計時頁面進行訓練指引的3秒倒計時
14.3秒倒計時結束后跳轉(zhuǎn)到訓練頁面并傳遞主頁面的數(shù)據(jù)
（最終效果）顯示效果：
選擇對應的模式然后點擊“點我開始”進行倒計時頁面
3秒后自動進入訓練頁面
最終堅持訓練完會顯示100%進度，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}}秒后跟隨訓練指引
</text>
<text class=“jltftxt“>
進行呼氣和吸氣
</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)主頁面時清除定時器并設置為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;/*倒計時結束時隱藏文本*/
}
},
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（“訓練頁面的onInit（）被調(diào)用“）;
console.log（“接收到的左邊選擇器的值：“+
this.data1）;
console.log（“接收到的右邊選擇器的值：“+
this.data2）;
picker1value =
this.key1;
picker2value =
this.key2;
/*判斷選擇的是幾分鐘然后進行賦值*/
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（“訓練頁面的onReady（）被調(diào)用“）;
},
onShow（）{
console.log（“訓練頁面的onShow（）被調(diào)用“）;
timer1=setInterval（
this.run1,1000）;/*定時器*/
timer2=setInterval（
this.run2,picker2seconds*1000）;
timer3=setInterval（
this.run3,picker2seconds/100*1000）;
},
onDestroy（）{
console.log（“訓練頁面的onDestroy（）被調(diào)用“）;
}
}
本部分參考了張榮超老師的課程和部分公開代碼 |
|
電子產(chǎn)業(yè)一站式賦能平臺
窺視卡
置頂卡
變色卡
