倒计时滚动斜纹条的前端实现-基于jquery animation和css3
先上效果图:
0.HTML DOM结构
<div class="header"> <div class="left"> 积分:200 </div> <div class="right"> <div class="right__timebar__wrapper"> <div class="timebar"></div> </div> <div class="right__timeseconds"> 10s </div> </div> </div>
1. 斜纹条画法
线性渐变:
-webkit-linear-gradient(逆时针倾斜的角度, 颜色值 开始的位置, 颜色值 开始的位置,颜色值 开始的位置, 颜色值 开始的位置);
第一个参数除了使用倾斜角度,还可以使用“top right bottom left”,颜色值开始的位置可以用px也可以用百分数。
先随便填些数值,熟悉一下各个参数:
之后调整下渐变节点的宽度,把矩形条重复绘制(换成:-webkit-repeating-linear-gradient),再加入倾斜的角度就得到斜条纹了
.timebar { background: -webkit-repeating-linear-gradient(-36deg, #aabef9 0,#aabef9 0.2rem,#7c82eb 0.2rem,#7c82eb .4rem); }
2. 两个动画效果:
背景斜纹条在动(利用background-position)、timebar相对wrapper在动(通过absolute定位+left)
CSS部分
.right__timebar__wrapper { width: calc(100% - 80px); background-color: bisque; position: relative; overflow: hidden; }
.timebar{ background: repeating-linear-gradient(-36deg, #aabef9 0,#aabef9 0.2rem,#7c82eb 0.2rem,#7c82eb .4rem); position: absolute; left: 0px; height: 100%; /*有两个运动 1. 背景条纹 相对 bar运动; 2. bar相对 wrapper运动*/ /* width 200%是为了 1运动时 不显示出来 分隔线*/ width: 200%; }
JS部分
$('.timebar').animate({backgroundPositionX:totalWidth+'px',backgroundPositionY: '0px',left:totalWidth+'px'},10000,'linear');
3. 计时模块
let totalWidth = document.getElementsByClassName('right__timebar__wrapper')[0].clientWidth; let timebar = document.getElementsByClassName('timebar')[0]; let timeNum = document.getElementsByClassName('right__timeseconds')[0]; const totalTime = 10; let time = totalTime; let ctx; function GameStart(){ // 开始动画 //不是所有css属性都可以用Jquery动画(animate方法)来动态改变 background-position不识别 $('.timebar').animate({backgroundPositionX:totalWidth+'px',backgroundPositionY: '0px',left:totalWidth+'px'},totalTime*1000,'linear'); ctx = setInterval(()=>{ time--; timeNum.innerHTML=''+time+'s';if(time === 0){ clearInterval(ctx); time = totalTime; timebar.style.width = totalWidth+'px'; } },1000); }
4.jquery animate问题
jQuery 的 animate 虽然能直接使用 CSS 的方式来进行动画,但有些属性其实是不支持的。
该问题参考:
1.jquery的animate关于background-position属性
2.jQuery animate()方法 操作 background-position
5. 为什么使用了jq animate
5.1 transition
jq animation这里是按总倒计时时长=动画时长设置的 动画效果比较连续。
没有采用原生的transition是因为 transition结合计时器每秒触发过渡一次会有明显顿挫的感觉
附上transition写法
.timebar{ background: repeating-linear-gradient(-36deg, #aabef9 0,#aabef9 0.2rem,#7c82eb 0.2rem,#7c82eb .4rem); position: absolute; left: 0px; height: 100%; width: 200%; transition: all linear 2s; -moz-transition: all linear 2s; -webkit-transition: all linear 2s; -o-transition: all linear 2s; }
function GameStart(){ ctx = setInterval(()=>{ time--; timeNum.innerHTML=''+time+'s'; // 每秒触发 transition属性更新 barUpdate(time); if(time === 0){ clearInterval(ctx); time = totalTime; timebar.style.width = totalWidth+'px'; } },1000); } function stopInterval(){ clearInterval(ctx) } console.log(totalWidth); function barUpdate(time){ let updateLeft = totalWidth - time/totalTime * totalWidth; console.log(updateLeft) timebar.style.backgroundPositionX = totalWidth*(totalTime-time)/totalTime+'px'; timebar.style.left = updateLeft+'px'; }
5.2 原生的animation
animation 特征是无需触发 一上来就可以加载动画 写好关键帧能够自动进行动画效果
这里的需求是有个触发动作的,如果不需要,爱探索的小伙伴也可以尝试下animation写法。
// 参考
.animation { animation: move 10s linear; } @keyframes move{ 0% { width: 100%; } 100% { width: 0%; } }
ps:查到animation触发可以结合addClass,爱探索的小伙伴也可以自行尝试
5.3: 斜条纹也可以使用gif图片(如果你有==)
实现参照 jqueryUI链接 关键部分截图如下: