<!DOCTYPE html> <html> <!-- 简述：做一个可控动画，能够根据用户输入判断是逐帧播放还是完全播放，同时也能够根据输入前进或者后退。 要点分析： 监听交互：单击，触摸，滚动等等 识别临界值：位移等。临界值内逐帧并且放弃交互时回退到交互前的状态；临界值外则动画完全播放。 动画：可在前进和后退之间切换（可通过传参）;可逐帧播放（帧可以是小动画） 优化效率 相关交互： 下拉时：逐帧退和整节退 上拉时：逐帧前进和整节前进 放弃操作：超过临界值（动画完成）和未超过临界值（动画回退）。 动画关键点：帧和节都可进退，同时进退皆可控。 --> <head> <meta charset="UTF-8"> <title>可控动画</title> </head> <style> ul, li { list-style: none; padding: 0; margin: 0; } ul { font-size: 0; } .btn-wrap{ text-align: center; margin-top: 20px; } .window { width: 300px; height: 200px; overflow: hidden; margin: 60px auto; border: 1px solid red; } .canvas { width: 1200px; height: 200px; } .canvas img { height: 200px; width: 300px; } ul li { display: inline-block; width: 300px; text-align: center; background-color: greenyellow; } </style> <body> <div> <div class="btn-wrap"> <button id="move">逐帧前进</button> <button id="single-reverse">逐帧后退</button> <button id="play">整节前进</button> <button id="reverse">整节后退</button> </div> <div class="window"> <div class="canvas" id="main"> <ul> <li class="item"><img draggable="false" src="img/img1.jpg"></li> <li class="item"><img draggable="false" src="img/img2.jpg"></li> <li class="item"><img draggable="false" src="img/img3.jpg"></li> </ul> </div> </div> </div> </body> <script> //变量定义 var canvas = document.getElementsByClassName('canvas')[0], main=document.getElementById("main"),//画布元素，也就是移动主体。 items=document.getElementsByClassName('item'), item_len=items.length, value = false,//是否在临界值之外，true为在临界值之外，false为临界值之内。 key=false,//鼠标是否按下 index=0,//当前是第几节动画 reverse = false,//节动画是否反方向播放 single_reverse=false,//帧动画是否反方向播放 frameTime = 13,//帧与帧之间播放间隔 stepDistance = (300 / (3000 / 30)), //每次移动的小距离,也就是每帧位移，单位为像素。 stepDistanceSum = 0; //移动的总距离 //交互 //顺序播放 document.getElementById('play').onclick = function() { index++;//每单击一次播放一节 if(index>item_len){ index=0;//如果节动画完全播放完毕，从头开始播放 }; reverse = false; value = true; littleMove(index); }; //倒叙播放 document.getElementById('reverse').onclick = function() { index--;//每单击一次后退一节 if(index<0){ index=0; }; value = true; reverse = true; littleMove(index); }; //正向移动帧，没有实际意义，用于临界值之内的帧移动 document.getElementById('move').onclick = function() { value = false; reverse = false; single_reverse=false; littleMove(index); }; //反向移动帧，没有实际意义，用于临界值之内的帧后退 document.getElementById('single-reverse').onclick = function() { value = false; reverse = false; single_reverse=true; littleMove(index); }; main.onmousedown=function(e){ var e = e || event; key=true; }; main.onmouseup=function(){ key=false; }; main.addEventListener('mousemove',function(e){ var e = e || event; if(key){ //鼠标被按下 if(stepDistanceSum<50){ //并且小于临界值，一帧一帧播放动画 value = false; reverse = false; single_reverse=false; littleMove(index); }else{ //临界值之外，播放完整节动画 reverse = false; value = true; littleMove(index); } } }); //动画函数 function littleMove(index) { // console.log('进入littleMove函数'); if(!value) { if(stepDistanceSum<=300*(item_len-1)){ //临界值之内，每次交互移动一次 if((stepDistanceSum-(300*index))<300) {//如果小于300则一直可以帧移动 if(single_reverse){ stepDistanceSum -= stepDistance; canvas.style.marginLeft = -stepDistanceSum + 'px'; }else{ stepDistanceSum += stepDistance; canvas.style.marginLeft = -stepDistanceSum + 'px'; } } else { } }else{ clearInterval(interval); } } else { //临界值外,小节动画一次性播放完毕 var interval = setInterval(function() { if(stepDistanceSum<=300*(item_len-1)){//未超过边界 // console.log('边界之内'); if(stepDistanceSum%300==0){ clearInterval(interval); }; if(reverse) { if(stepDistanceSum<0){ clearInterval(interval); }else{ canvas.style.marginLeft = +stepDistanceSum + 'px'; console.log(stepDistanceSum); stepDistanceSum -= stepDistance; console.log(stepDistanceSum); } } else { canvas.style.marginLeft = -stepDistanceSum + 'px'; stepDistanceSum += stepDistance; } }else{//超过边界，从头开始 clearInterval(interval); stepDistanceSum=0; } }, frameTime) } }; </script> </html>