RE： 球体波浪倒计时
2017-09-24 本文已影响0人
宀茧
背景：
移动端需要做一个倒计时球体水波的效果。主要用到了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"](http://www.w3.org/2000/svg%22);
xmlns:xlink="[http://www.w3.org/1999/xlink"](http://www.w3.org/1999/xlink%22);
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: 3;
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: 0;
top: 0;
z-index: 2;
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: 0;
fill: #7befaa;
-webkit-animation: wave-back 1.4s infinite linear;
animation: wave-back 1.4s infinite linear;
}
.homepage .box .water_wave_front { /*前面的波纹*/
left: 0;
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);
