运动框架基础

Posted distant-遥远

tags:

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

运动基础
•让Div运动起来
•速度——物体运动的快慢
•运动中的Bug
–不会停止
–速度取某些值会无法停止
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#div1 {width:100px; height:100px; position:absolute; background:red; left:0; top:50px;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function startMove()
{
    var oDiv=document.getElementById(\'div1\');
    
    setInterval(function (){
        oDiv.style.left=oDiv.offsetLeft+10+\'px\';
    }, 30);
}

</script>
</head>

<body>
<input type="button" value="开始运动" onclick="startMove()" />
<div id="div1"></div>
</body>
</html>
not stop
–到达位置后再点击还会运动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#div1 {width:100px; height:100px; position:absolute; background:red; left:0; top:50px;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
var timer=null;

function startMove()
{
    var oDiv=document.getElementById(\'div1\');
    //开启定时器
    timer=setInterval(function (){
        if(oDiv.offsetLeft==300)
        {
            //判断oDiv离浏览器的距离是300不
            //为真则关闭定时器
            clearInterval(timer);
        }
        //在定时器内每次left加10，
        oDiv.style.left=oDiv.offsetLeft+10+\'px\';
    }, 30);
}

</script>
</head>

<body>
<input type="button" value="开始运动" onclick="startMove()" />
<div id="div1"></div>
</body>
</html>
movable div
–重复点击速度加快
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#div1 {width:100px; height:100px; position:absolute; background:red; left:0; top:50px;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
var timer=null;

function startMove()
{
    var oDiv=document.getElementById(\'div1\');
    
    timer=setInterval(function (){
        var iSpeed=7;
        
        if(oDiv.offsetLeft>=300)
        {
            clearInterval(timer);
        }
        oDiv.style.left=oDiv.offsetLeft+iSpeed+\'px\';
    }, 30);
}

</script>
</head>

<body>
<input type="button" value="开始运动" onclick="startMove()" />
<div id="div1"></div>
</body>
</html>
repeated onclick
匀速运动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#div1 {width:100px; height:100px; position:absolute; background:red; left:0; top:50px;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
var timer=null;

function startMove()
{
    var oDiv=document.getElementById(\'div1\');
    
    clearInterval(timer);
    timer=setInterval(function (){
        var iSpeed=5;
        
        if(oDiv.offsetLeft>=300)    //是否到达终点
        {
            clearInterval(timer);    //到达终点
        }
        else
        {
            oDiv.style.left=oDiv.offsetLeft+iSpeed+\'px\';    //到达之前
        }
    }, 30);
}

</script>
</head>

<body>
<input type="button" value="开始运动" onclick="startMove()" />
<div id="div1"></div>
</body>
</html>
regular moving
•速度不变
 
运动框架
•在开始运动时，关闭已有定时器
•把运动和停止隔开(if/else)
l运动框架实例
•例子1：“分享到”侧边栏
–通过目标点，计算速度值
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#div1 {width:100px; height:200px; background:#CCC; position:absolute; left:-100px;}
#div1 span {width:20px; height:60px; line-height:20px; text-align:center; left:100px; top:70px; background:yellow; position:absolute;}

</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
window.onload=function ()
{
    var oDiv=document.getElementById(\'div1\');
    
    oDiv.onmouseover=function ()
    {
        startMove(0);
    }
    
    oDiv.onmouseout=function ()
    {
        startMove(-100);
    }
}
var timer=null;

function startMove(iTarget)
{
    var oDiv=document.getElementById(\'div1\');
    //关闭  开启定时器
    clearInterval(timer);
    timer=setInterval(function (){
        var iSpeed=0;
        //判断left 是否小于目标距离
        if(oDiv.offsetLeft<iTarget)
        {
            iSpeed=10;
        }
        else
        {
            iSpeed=-10;
        }
        
        if(oDiv.offsetLeft==iTarget)
        {
            clearInterval(timer);
        }
        else
        {
            oDiv.style.left=oDiv.offsetLeft+iSpeed+\'px\';
        }
    }, 30);
}
</script>
</head>

<body>
<div id="div1">
    <span>分享到</span>
</div>
</body>
</html>
share to
•例子2：淡入淡出的图片
–用变量存储透明度
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#img1 {filter:alpha(opacity:30); opacity:0.3;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
window.onload=function ()
{
    var oImg=document.getElementById(\'img1\');
    
    oImg.onmouseover=function ()
    {
        startMove(100);
    }
    
    oImg.onmouseout=function ()
    {
        startMove(30);
    }
}
var timer=null;

var alpha=30;

function startMove(iTarget)
{
    var oImg=document.getElementById(\'img1\');
    
    clearInterval(timer);
    timer=setInterval(function (){
        var iSpeed=0;
        //判断现在值和目标值
        if(alpha<iTarget)
        {
            iSpeed=1;
        }
        else
        {
            iSpeed=-1;
        }
        
        if(alpha==iTarget)
        {
            clearInterval(timer);
        }
        else
        {
            alpha+=iSpeed;
            
            oImg.style.filter=\'alpha(opacity:\'+alpha+\')\';
            oImg.style.opacity=alpha/100;
            
            document.title=alpha;
        }
    }, 30);
}
</script>
</head>

<body>
<img id="img1" src="Desert.jpg" />
</body>
</html>
filter opacity
缓冲运动
•逐渐变慢，最后停止
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#div1 {width:100px; height:100px; position:absolute; background:red; left:0; top:50px;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
var timer=null;

function startMove(iTarget)
{
    var oDiv=document.getElementById(\'div1\');
    
    clearInterval(timer);
    timer=setInterval(function (){
        var iSpeed=(iTarget-oDiv.offsetLeft)/8;
        iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
        /*if(iSpeed>0)
        {
                       //向上取整
            iSpeed=Math.ceil(iSpeed);
        }
        else
        {    向下取整
            iSpeed=Math.floor(iSpeed);
        }*/
        
        if(oDiv.offsetLeft==iTarget)    //是否到达终点
        {
            clearInterval(timer);    //到达终点
        }
        else
        {
            oDiv.style.left=oDiv.offsetLeft+iSpeed+\'px\';    //到达之前
        }
        
        document.title=oDiv.offsetLeft+\',speed=\'+iSpeed;
    }, 30);
}

</script>
</head>

<body>
<input type="button" value="开始运动" onclick="startMove(300)" />
<div id="div1"></div>
<span style="width:1px; height:300px; background:black; position:absolute; left:300px; top:0;"></span>
</body>
</html>
wind down
•距离越远速度越大
–速度由距离决定
–速度=(目标值-当前值)/缩放系数
•例子：缓冲菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>侧边栏</title>
<style>
#div1 {width:100px; height:100px; background:red; position:absolute; right:0;}
</style>
<script>
window.onscroll=function()
{
    var oDiv=document.getElementById(\'div1\');
    var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
    oDiv.style.top=scrollTop+(document.documentElement.clientHeight-oDiv.offsetHeight)/2+\'px\';
    }
</script>
</head>

<body style="height:2000px;">
<div id="div1"></div>
</body>
</html>
menu bar one
–Bug：速度取整
–跟随页面滚动的缓冲侧边栏
»潜在问题：目标值不是整数时
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>侧边栏</title>
<style>
#div1 {width:100px; height:100px; background:red; position:absolute; right:0;}
</style>
<script>
window.onscroll=function()
{
    var oDiv=document.getElementById(\'div1\');
    var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
    var t=scrollTop+(document.documentElement.clientHeight-oDiv.offsetHeight)/2+\'px\';
    startMove(parseInt(t));
    }
var timer=null;
function startMove(iTarget)
{
    var oDiv=document.getElementById(\'div1\');
    clearInterval(timer)
    timer=setInterval(function(){
        //算速度 取整
        var iSpeed=(iTarget-oDiv.offsetTop)/8;
        iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
        
        //判断当前速度是否等于目标速度
        if(oDiv.offsetTop==iTarget)
        {
            clearInterval(timer);
            }
        else
        {
            oDiv.style.top=oDiv.offsetTop+iSpeed+\'px\';
            }
            //在txt打印出来
            txt1.value=oDiv.offsetTop+\'目标\'+iTarget;        
        },30);
    }
</script>
</head>

<body style="height:2000px;">
<input id="txt1" type="text" style="position:fixed; top:20px;" />
<div id="div1"></div>
</body>
menu bar two
运动终止条件
•匀速运动：距离足够近
•缓冲运动：两点重合
本节内容
l运动框架
l匀速运动
l缓冲运动

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

运动框架基础

第八节 JS运动基础

js运动框架逐渐递进版

简易运动框架

Javascript运动基础

（43）JS运动之链式运动框架