#2020征文-手表#鸿蒙应用开发-呼吸训练app练习（完节）

12.每次呼气或吸气logo都顺时针转动一圈

显示效果：

点击“点我开始”进入训练页面

代码如下：

Jltfxunlian.hml中添加一个放图片的标签

Jltfxunlian.css中添加样式

Jltfxunlian.js

13.在倒计时页面进行训练指引的3秒倒计时

14.3秒倒计时结束后跳转到训练页面并传递主页面的数据

（最终效果）显示效果：

选择对应的模式然后点击“点我开始”进行倒计时页面

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()被调用");
    },
    onReady(){
        console.log("主页面的onReady()被调用");
    },
    onShow(){
        console.log("主页面的onShow()被调用");
    },
    onDestroy(){
        console.log("主页面的onDestroy()被调用");
    }
}

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旋转一次的时间 animation-iteration-count LOGO旋转次数-->
    <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;/*保存转换后的秒数*/
var picker1seconds = null;
/*初始化值*/
var timer1 = null;
var timer2 = null;
var timer3 = null;
/*计数器*/
var counter = 0;

export default {
    data: {
        jltfseconds:0,
        jltfshow: true,
        jltfhuxi: "吸气",
        jltfpercent: "0",
        jltfduration:"",
        jltfcount:""
    },
    jltfclickAction(){
        clearInterval(timer1);
        timer1 = null;
        /*点击重新开始跳转主页面时清除定时器并设置为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转化为整数加1再转化为字符串*/
      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()被调用");

        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()被调用");
    },
    onShow(){
        console.log("训练页面的onShow()被调用");

        timer1=setInterval(this.run1,1000);/*定时器*/
        timer2=setInterval(this.run2,picker2seconds*1000);
        timer3=setInterval(this.run3,picker2seconds/100*1000);
    },
    onDestroy(){
        console.log("训练页面的onDestroy()被调用");
    }
}

本部分内容参考了张荣超老师的课程和公开的代码。