javascript运动应用

Posted 2020-07-16 早安.晚安

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript运动应用相关的知识，希望对你有一定的参考价值。

多物体运动框架：

1.多个盒子同时运动：move（obj，target）多一个参数

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div{
width: 100px;
height: 50px;
background-color: red;
margin: 10px;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<script type="text/javascript">
window.onload=function(){
var aDiv=document.getElementsByTagName(‘div‘);

for (var i = 0; i < aDiv.length; i++) {
aDiv[i].timer=null;
aDiv[i].onmouseover=function(){
move(this,400);
}
aDiv[i].onmouseout=function(){
move(this,100);
}
}
}
//var timer=null;
function move(obj,target){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var speed =(target-obj.offsetWidth)/6;
speed=speed>0?Math.ceil(speed):Math.floor(speed);

if(obj.offsetWidth==target)
{
clearInterval(obj.timer);
}
else
{
obj.style.width=obj.offsetWidth+speed+‘px‘;
}
},30)
}
</script>
</body>
</html>

2.多个盒子淡入淡出

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div{
width: 200px;
height: 200px;
margin: 20px;
background-color: red;
float: left;
filter: alpha(opacity:30);
opacity: 0.3;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<script type="text/javascript">
window.onload=function(){
var aDiv=document.getElementsByTagName(‘div‘);
for (var i = 0; i < aDiv.length; i++) {
aDiv[i].timer=null;
aDiv[i].alpha=30;
aDiv[i].onmouseover=function(){
move(this,100);
};
aDiv[i].onmouseout=function(){
move(this,30);
};
}
}
// var alpha=30; //有问题，不能共用一边移出时，变小一边移入，变大解决方法：作为属性加到物体身上
function move(obj,target){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var speed=(target-obj.alpha)/6;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if (obj.alpha==target)
{
clearInterval(obj.timer);
}
else{
obj.alpha+=speed;

obj.style.filter=‘alpha(opacity:‘+obj.alpha+‘)‘;
obj.style.opacity=obj.alpha/100;
}
},30);
}
</script>
</body>
</html>

多开几个定时器，任何东西都不能共用（如alpha）。

任意值运动框架：move（obj，attr，target）

1.通过一套框架对盒子设置不同的变化

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
height: 200px;
width: 200px;
background-color: yellow;
float: left;
margin: 20px;
border: 5px solid black;
filter: alpha(opacity:30);
opacity: 0.3;
}
</style>
</head>
<body>
<div id="div1">变不透明</div>
<div id="div2">变长</div>
<script type="text/javascript">
window.onload=function(){
var oDiv1=document.getElementById(‘div1‘);
var oDiv2=document.getElementById(‘div2‘);
oDiv1.onmouseover=function(){
move(this,‘opacity‘,100);
}
oDiv1.onmouseout=function(){
move(this,‘opacity‘,30);
}
oDiv2.onmouseover=function(){
move(this,‘height‘,500);
}
oDiv2.onmouseout=function(){
move(this,‘height‘,200);
}
}
function getStyle(obj,name){ //获取不在行间的样式
if (obj.currentStyle) {
return obj.currentStyle[name];
}
else{
return getComputedStyle(obj,false)[name];
}
}
function move(obj,arrt,target){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
//var cur=parseInt(getStyle(obj,arrt)); //parseInt 转换为整数直接将opacity转换为0
var cur=0;
if(arrt==‘opacity‘){
cur=Math.round(parseFloat(getStyle(obj,arrt))*100); //针对透明度
}
else{
cur=parseInt(getStyle(obj,arrt));
}
var speed=(target-cur)/6;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if (cur==target)
{
clearInterval(obj.timer);
}
else{
if(arrt==‘opacity‘)
{
obj.style.filter=‘alpha(opacity:‘+(cur+speed)+‘)‘;
obj.style.opacity=(cur+speed)/100;
}
else
{
obj.style[arrt]=cur+speed+‘px‘; //透明度不能+px
}

}
},30)
}
</script>
</body>
</html>

由于透明度在原框架中会有bug，因此对于透明度要另做判断。

eg：仿flash动画

github地址：https://github.com/hhhxy/jsFlash

链式运动：move（obj，attr，target，fn）加一个函数参数

if(fnEnd) fnEnd();
}
else{
if(arrt==‘opacity‘)
{
obj.style.filter=‘alpha(opacity:‘+(cur+speed)+‘)‘;
obj.style.opacity=(cur+speed)/100;
}
else
{
obj.style[arrt]=cur+speed+‘px‘; //透明度不能+px
}
}
},30)
}

应用：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>运动框架</title>
<style type="text/css">
#div1{
width: 100px;
height: 100px;
background-color: red;
filter: alpha(opacity:30);
opacity: 0.3;
}
</style>
</head>
<body>
<div id="div1"></div>
<script src="move1.js"></script>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById(‘div1‘);
oDiv.onmouseover=function(){
move(oDiv,‘width‘,300,function()
{
move(oDiv,‘height‘,300,function(){
move(oDiv,‘opacity‘,100)
});
});
};
oDiv.onmouseout=function(){
move(oDiv,‘opacity‘,30,function(){
move(oDiv,‘height‘,100,function(){
move(oDiv,‘width‘,100);
});
});
};
}
</script>
</body>
</html>

完美运动框架：

透明度，大小一起走传json move（obj，json，fn）

for(arrt in json) //做一个循环,每次循环取决于json中的数据
{
var cur=0;
if(arrt==‘opacity‘){
cur=Math.round(parseFloat(getStyle(obj,arrt))*100); //针对透明度
}
else{
cur=parseInt(getStyle(obj,arrt));
}
var speed=(json[arrt]-cur)/6;
speed=speed>0?Math.ceil(speed):Math.floor(speed);

if(cur!=json[arrt])
bStop=false;

if(arrt==‘opacity‘)
{
obj.style.filter=‘alpha(opacity:‘+(cur+speed)+‘)‘;
obj.style.opacity=(cur+speed)/100;
}
else
{
obj.style[arrt]=cur+speed+‘px‘; //透明度不能+px
}
}
if(bStop==true)
{
clearInterval(obj.timer);
if(fnEnd) fnEnd();
}
},30)
}

应用

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>完美运动</title>
<style type="text/css">
#div1{
width: 100px;
height: 100px;
background-color: red;
filter: alpha(opacity:30);
opacity: 0.3;
}
</style>
</head>
<body>
<input id="btn" type="button" value="click"></input>
<div id="div1"></div>
<script src="move2.js"></script>
<script type="text/javascript">
var oDiv1=document.getElementById(‘div1‘);
var oBtn=document.getElementById(‘btn‘);

oBtn.onclick=function(){
move(oDiv1,{width:101,height:300,opacity:100});//bug 当width值为101时。变到101直接关定时器，不会等到高和透明度到达目标值。
}
</script>
</body>
</html>

以上是关于javascript运动应用的主要内容，如果未能解决你的问题，请参考以下文章

前端课程目录LEVE ONE

原生JavaScript运动功能系列：定时定点运动

JavaScript 基础入门11 - 运动框架的封装

javascript运动系列第一篇——运动函数

关于javascript的运动教程

Javascript运动基础