RE : 球体波浪倒计时

背景：

移动端需要做一个倒计时球体水波的效果。主要用到了CSS的SVG瞄点动画和JS的计时器。该动画原型来自于  使用球体水面波动显示进度动画 http://wow.techbrood.com/fiddle/27745

 

效果展示：

 

 

 

 

<div class="homepage">
    <div class="timeboxout  ball">
        <div class="timeboxmiddle ball">
            <div class="timeboxin">
                <div class="box">
                    <div class="percent">
                        <p id="prompt1">第<span id="nw"></span>周</p>
                        <p id="prompt2">本周剩余时间</p>
                        <p id="prompt3">
                            //JS获取时间信息
                            <span id="days"></span>
                            <span id="hours"></span>
                            <span id="minutes"></span>
                            <span id="seconds"></span>
                        </p>
                     </div>
                     <div id="water" class="water ball"> //最底层水量
                          //后面的水波
                          <svg viewBox="0 0 560 20" class="water_wave water_wave_back ball">
                               <use xlink:href="#wave"></use>
                          </svg>
                          //水波前面的波浪
                          <svg viewBox="0 0 560 20" class="water_wave water_wave_front ball">
                               <use xlink:href="#wave"></use>
                          </svg>
                     </div>
                 </div>
            </div>
      </div>
    </div>
    //SVG波浪瞄点
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink"; x="0px" y="0px" style="display: none;">
            <symbol id="wave">
                <path d="M420,20c21.5-0.4,38.8-2.5,51.1-4.5c13.4-2.2,26.5-5.2,27.3-5.4C514,6.5,518,4.7,528.5,2.7c7.1-1.3,17.9-2.8,31.5-2.7c0,0,0,0,0,0v20H420z"></path>
                <path d="M420,20c-21.5-0.4-38.8-2.5-51.1-4.5c-13.4-2.2-26.5-5.2-27.3-5.4C326,6.5,322,4.7,311.5,2.7C304.3,1.4,293.6-0.1,280,0c0,0,0,0,0,0v20H420z"></path>
                <path d="M140,20c21.5-0.4,38.8-2.5,51.1-4.5c13.4-2.2,26.5-5.2,27.3-5.4C234,6.5,238,4.7,248.5,2.7c7.1-1.3,17.9-2.8,31.5-2.7c0,0,0,0,0,0v20H140z"></path>
                <path d="M140,20c-21.5-0.4-38.8-2.5-51.1-4.5c-13.4-2.2-26.5-5.2-27.3-5.4C46,6.5,42,4.7,31.5,2.7C24.3,1.4,13.6-0.1,0,0c0,0,0,0,0,0l0,20H140z"></path>
            </symbol>
      </svg>
</div>

 

.homepage .box{
      width: 56%;
      height: 100%;
      /*ackground-color: #f2f2f2;*/  /*球体内部背景色*/
}

.homepage .timeboxout{
      width: 11.5625rem;
      height: 11.5625rem;
      box-sizing: border-box;
      border: 1px solid #2edb75;
      border-radius: 50%;
      position: relative;
      margin-left: auto;margin-right: auto;
      margin-bottom: 1rem;
}
.homepage .timeboxmiddle{
      width: 10.9375rem;height: 10.9375rem;
      box-sizing: border-box;
      background: -webkit-linear-gradient(top,#ffffff,#f8cd51);
      border-radius: 50%;
      position: absolute;
      top: 50%;left: 50%;
      transform: translate(-50%, -50%);
      overflow: hidden;
}
.homepage .timeboxin{
      background-color: #ffffff;
      width: 10.875rem;height: 10.875rem;
      box-sizing: border-box;
      border-radius: 50%;
      position: absolute;
      top: 50%;left: 50%;
      transform: translate(-50%, -50%);
      overflow: hidden;
}

.homepage .box {
    height: 10.875rem;
    width: 10.875rem;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border-radius: 100%;
    overflow: hidden;
}
.homepage .box .percent {
   text-align: center;
   color: black;
   margin-top: 2.03125rem;
   z-index:;
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   height: 100%;width: 100%;
}
/*.homepage p{margin-bottom: 0.5625rem;}*/
#prompt1{
      font-size: 1.1875rem;
}
#prompt2{
      font-size: 0.8125rem;
}
#prompt3{
      font-size: 1.125rem;
}
.homepage .box .water {
      position: absolute;
      left:;
      top:;
      z-index:;
      width: 100%;
      height: 100%;
      -webkit-transform: translate(0, 100%);
      transform: translate(0, 100%);
      background: #2edb75;
}
.homepage .box .water_wave {
      width: 200%;
      position: absolute;
      bottom: 100%;
}
.homepage .box .water_wave_back {               /*后面的波纹*/
      right:;
      fill: #7befaa;
      -webkit-animation: wave-back 1.4s infinite linear;
      animation: wave-back 1.4s infinite linear;
}
.homepage .box .water_wave_front {              /*前面的波纹*/
      left:;
      fill: #2edb75;
      margin-bottom: -1px;
      -webkit-animation: wave-front .7s infinite linear;
      animation: wave-front .7s infinite linear;
}

/*是波浪匀速移动*/
@-webkit-keyframes wave-front {
      100% {
            -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
      }
}
@keyframes wave-front {
      100% {
            -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
      }
}
@-webkit-keyframes wave-back {
      100% {
            -webkit-transform: translate(50%, 0);
            transform: translate(50%, 0);
      }
}
@keyframes wave-back {
      100% {
            -webkit-transform: translate(50%, 0);
            transform: translate(50%, 0);
      }
}

 

 

var days = document.getElementById("days"),
hour = document.getElementById("hours"),
minutes = document.getElementById("minutes"),
seconds = document.getElementById("seconds");
var nwweek = document.getElementById("prompt1");
var countdown = document.getElementById("prompt3");
var water = document.getElementById("water");
var ballchange = document.getElementsByClassName("ball");

var timeRate;
var interval;

//计算累积第几周
function weeknum(){
      var nw = document.getElementById("nw");
      // 获取当前时间
      var currentTime = new Date();
      // 这里写的是2015年11月2日0时0分0秒   Javascript中月份是实际数字减1，故指定日期月份减一，另获取到毫秒。
      var targetTime = (new Date(2015, 10, 2, 0, 0, 0)).getTime();
      var offsetTime =currentTime - targetTime;

      // 将时间转位天数
      var offsetDays =Math.floor((offsetTime / (3600 * 24 * 1000))/7);
      nw.innerHTML=offsetDays+1;
}               

//计算剩余的时间并更新
function residueTime () {
    var newtime = new Date();
    var day = newtime.getDay(); //得到今天周几
    var hours = newtime.getHours(); //得到现在时间的小时
    var minuter = newtime.getMinutes(); //得到现在时间的分数
    var second = newtime.getSeconds(); //得到现在时间的秒数

    day = 7 - (day ? day : 7);
    hours = 23 - hours;
    minuter = 59 - minuter;
    second = 59 - second;
    if (day==0) {
        countdown.innerHTML = hours  + "时" + minuter + "分" + second + "秒" ;
    } else{
        countdown.innerHTML =  day + "天" + hours  + "时" + minuter + "分" + second + "秒" ;

    }

    return (day * 24 * 60 * 60 + hours * 60 * 60 + minuter * 60 + second) / 604800 * 100;

}     

//球面颜色变化
interval = setInterval(function () {
    timeRate = residueTime();
    water.style.transform = 'translate(0' + ',' + (100 - timeRate) + '%)';
    if (timeRate == 0) {
        document.getElementsByTagName("svg")[0].innerHTML = "";
        document.getElementsByTagName("svg")[1].innerHTML = "";
        clearInterval(interval);
    }
    else if(timeRate >50) {
        ballchange[0].style.border = "1px solid #2edb75";
        ballchange[1].style.background = "-webkit-linear-gradient(top,#ffffff,#2edb75)";
        ballchange[2].style.background = "#2edb75";
        ballchange[3].style.fill = "#7befaa";
        ballchange[4].style.fill = "#2edb75";
     }
     else if(timeRate <= 50 && timeRate > 20) {
        ballchange[0].style.border = "1px solid #fbbc05";
        ballchange[1].style.background = "-webkit-linear-gradient(top,#ffffff,#fbbc05)";
        ballchange[2].style.background = "#fbbc05";
        ballchange[3].style.fill = "#ffd762";
        ballchange[4].style.fill = "#fbbc05";
     }
     else{
        ballchange[0].style.border = "1px solid #fe6c0d";
        ballchange[1].style.background = "-webkit-linear-gradient(top,#ffffff,#fe6c0d)";
        ballchange[2].style.background = "#fe6c0d";
        ballchange[3].style.fill = "#ff9753";
        ballchange[4].style.fill = "#fe6c0d";
      }
},500);