HTML5+CSS3+JavaScript 实现按键令小女孩移动，改变动画效果

新闻资讯老翟笔记小编 2024-03-04 22:50:35 53 0

老翟笔记今日分享的是:HTML5+CSS3+JavaScript 实现按键令小女孩移动，改变动画效果

素材图片 1.将小女孩图片截出来，在浏览器中居中显示，一个小女孩是96px <body><div class="box"></div> </body> body{ margin: 0;}.box{ background-image: url(images/run.jpg);width: 96px;height: 96px;position: absolute;left:50%;top: 50%;/*仅仅是左上角那一点居中*/transform: translate(-50%,-50%);/*向x,y轴（左上）移动自身的百分之50*/} 2.然后实现小女孩移动的逐帧动画效果动画就是从一个样式过渡到另一个样式，这里从坐标上可以看出来，从一个黄色框过渡到第二个，但是这样只是从图一平移到图四，并不能实现想要的逐帧动画效果。1个女孩是96px，四个女孩就是384px，animation-timing-function: steps(4);把384px分为四等分，动一次96px，所以background-position要从（0，0）到（0，-384）编写动画效果 @keyframes forward { from{ background-position: 0 0;}to{ background-position: -384px 0;}}@keyframes backward { from{ background-position: 0 -288px;}to{ background-position: -384px -288px;}}@keyframes turnleft { from{ background-position: 0 -96px;}to{ background-position: -384px -96px;}}@keyframes turnright { from{ background-position: 0 -192px;}to{ background-position: -384px -192px;}} 引用动画，在.box里添加代码 animation-name: backward;/*供测试*/animation-duration:0.5s;animation-timing-function: steps(4);animation-iteration-count:infinite; 3.实现按下按键令小女孩改变移动方向给小女孩绑定键盘按下事件，再根据键码判断上下左右来改变小女孩的朝向。添加js代码： let girl=document.querySelector('.box');document.onkeydown=function(event){ switch(event.keyCode){ //向上移动 backwardcase 87:case 38:girl.style.animationName='backward';break;//向下移动 forwardcase 83:case 40:girl.style.animationName='forward';break;//向左移动case 65:case 37:girl.style.animationName='turnleft';break;//向右移动case 68:case 39:girl.style.animationName='turnright';break;}} 4.实现小女孩按键盘朝向前进按上述操作小女孩只是原地踏步，现在要来实现小女孩按朝向前进。定一个定时器，每0.1s小女孩前进5个像素。 let moveTimer=null;document.onkeydown=function(event){ switch(event.keyCode){ //向上移动 backwardcase 87:case 38:girl.style.animationName='backward';if(moveTimer==null){ moveTimer=setInterval(()=>{ if(girl.offsetTop-5-25>0){ //25相当于小女孩图片的人头上方的空白girl.style.top=girl.offsetTop-5+"px";}else{ girl.style.top=25+"px";clearInterval(moveTimer);//到浏览器顶部之后就停下来moveTimer=null;}},100);}break; 这是只有向上走的部分。剩下的方向照着来就可以了。这里我将代码调成了0.05秒动5个像素，让小女孩走快点。四个方向的移动代码如下： let girl=document.querySelector('.box');let moveTimer=null;document.onkeydown=function(event){ switch(event.keyCode){ //向上移动 backwardcase 87:case 38:girl.style.animationName='backward';if(moveTimer==null){ moveTimer=setInterval(()=>{ if(girl.offsetTop-5-25>0){ //35相当于小女孩图片的人头上方的空白girl.style.top=girl.offsetTop-5+"px";}else{ girl.style.top=25+"px";clearInterval(moveTimer);//到浏览器顶部之后就停下来moveTimer=null;}},50);}break;//向下移动 forwardcase 83:case 40:girl.style.animationName='forward';if(moveTimer==null){ moveTimer=setInterval(()=>{ if(girl.offsetTop+5<document.documentElement.clientHeight-55){ girl.style.top=girl.offsetTop+5+"px";}else{ girl.style.top=document.documentElement.clientHeight-55;//屏幕的可见高度clearInterval(moveTimer);moveTimer=null;}},50);}break;//向左移动case 65:case 37:girl.style.animationName='turnleft';if(moveTimer==null){ moveTimer=setInterval(()=>{ if(girl.offsetLeft-5-25>0){ girl.style.left=girl.offsetLeft-5+"px";}else{ girl.style.left=25+"px";clearInterval(moveTimer);moveTimer=null;}},50);}break;//向右移动case 68:case 39:girl.style.animationName='turnright';if(moveTimer==null){ moveTimer=setInterval(()=>{ if(girl.offsetLeft+5<document.documentElement.clientWidth-45){ girl.style.left=girl.offsetLeft+5+"px";}else{ girl.style.left=document.documentElement.clientWidth-45;clearInterval(moveTimer);moveTimer=null;}},50);}break;}} document.documentElement.clientWidth屏幕可见宽度，如： 5.实现按下键盘小女孩才移动，松开键盘停止即键盘松开时，消除动画，停止定时器，并且要改变小女孩的朝向（positionY）。不然会出现按了向下走，松开键盘时，小女孩的朝向立马变成了向上。因为朝向还没有随之改变。所以需要再定义一个变量，标记上下左右的朝向。 document.onkeyup=function(){ girl.style.animationName="";//消除动画，小女孩不动了girl.style.backgroundPositionY=distance;clearInterval(moveTimer);moveTimer=null; } 全部代码如下： <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{ margin: 0;}.box{ background-image: url(images/run.jpg);width: 96px;height: 96px;position: absolute;left:50%;top: 50%;/*仅仅是左上角那一点居中*/transform: translate(-50%,-50%);/*向x,y轴（左上）移动自身的百分之50*//* animation-name: backward; */animation-duration:0.5s;animation-timing-function: steps(4);animation-iteration-count:infinite;}@keyframes forward { from{ background-position: 0 0;}to{ background-position: -384px 0;}}@keyframes backward { from{ background-position: 0 -288px;}to{ background-position: -384px -288px;}}@keyframes turnleft { from{ background-position: 0 -96px;}to{ background-position: -384px -96px;}}@keyframes turnright { from{ background-position: 0 -192px;}to{ background-position: -384px -192px;}}</style> </head> <body><div class="box"></div><script>let girl=document.querySelector('.box');let moveTimer=null;let distance=0;document.onkeydown=function(event){ switch(event.keyCode){ //向上移动 backwardcase 87:case 38:distance="-288px";girl.style.animationName='backward';if(moveTimer==null){ moveTimer=setInterval(()=>{ if(girl.offsetTop-5-25>0){ //35相当于小女孩图片的人头上方的空白girl.style.top=girl.offsetTop-5+"px";}else{ girl.style.top=25+"px";clearInterval(moveTimer);//到浏览器顶部之后就停下来moveTimer=null;}},50);}break;//向下移动 forwardcase 83:case 40:distance=0;girl.style.animationName='forward';if(moveTimer==null){ moveTimer=setInterval(()=>{ if(girl.offsetTop+5<document.documentElement.clientHeight-55){ girl.style.top=girl.offsetTop+5+"px";}else{ girl.style.top=document.documentElement.clientHeight-55;//屏幕的可见高度clearInterval(moveTimer);moveTimer=null;}},50);}break;//向左移动case 65:case 37:distance="-96px";girl.style.animationName='turnleft';if(moveTimer==null){ moveTimer=setInterval(()=>{ if(girl.offsetLeft-5-25>0){ girl.style.left=girl.offsetLeft-5+"px";}else{ girl.style.left=25+"px";clearInterval(moveTimer);moveTimer=null;}},50);}break;//向右移动case 68:case 39:distance="-192px";girl.style.animationName='turnright';if(moveTimer==null){ moveTimer=setInterval(()=>{ if(girl.offsetLeft+5<document.documentElement.clientWidth-45){ girl.style.left=girl.offsetLeft+5+"px";}else{ girl.style.left=document.documentElement.clientWidth-45;clearInterval(moveTimer);moveTimer=null;}},50);}break;}}document.onkeyup=function(){ girl.style.animationName="";//消除动画，小女孩不动了girl.style.backgroundPositionY=distance;clearInterval(moveTimer);moveTimer=null;}</script> </body> </html> 重复代码有很多，要优化代码，设置带参函数，暂时懒得想。。

本文结束，感谢您的阅读和支持，希望以上内容能给你带来帮助。本文章来自网络，由老翟笔记小编团队整理发布。