• JavaScript中的匀速运动和变速(缓冲)运动详细介绍


     
    一个div的运动其实就是它与浏览器边框的距离在变动。如果他变化的速率一定,那就是匀速运动;如果变化的速率不一定,那么就是变速运动。当,变化率与聚离浏览器边框的距离成比例的话,那么就可以说是div在做缓冲运动。 
    其实,很简单,就是用一个定时器(timer),每隔一段时间来改变div聚浏览器边框的距离。 

    比如匀速运动: 

    进入定时器:(每隔30ms做) 
    if(是否到达终点) 
    { 停止定时器} 
    else do{ 改变距离} 

    改变距离的方法决定是匀速还是变速(缓冲)运动。 

    匀速的比如: 
    复制代码代码如下:
     1 var timer=null; 
     2 function startMove() 
     3 { 
     4 
     5 var oDiv=document.getElementById('div1'); 
     6 clearInterval(timer); 
     7 timer=setInterval(function () { 
     8 var iSpeed=1; 
     9 
    10 if(oDiv.offsetLeft>=300) 
    11 { 
    12 clearInterval(timer); 
    13 } 
    14 else 
    15 { 
    16 oDiv.style.left=oDiv.offsetLeft+iSpeed+'px'; 
    17 } 
    18 },30); 
    19 }; 

    缓冲运动: 
    复制代码代码如下:
     1 var timer=null; 
     2 function startMove() 
     3 { 
     4 var iTarget=300; 
     5 
     6 var oDiv=document.getElementById('div1'); 
     7 
     8 clearInterval(timer); 
     9 timer=setInterval(function () { 
    10 var iSpeed=(iTarget-oDiv.offsetLeft)/8; 
    11 
    12 iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); 
    13 
    14 iSpeed=Math.ceil(iSpeed); 
    15 if(oDiv.offsetLeft==iTarget) 
    16 { 
    17 clearInterval(timer); 
    18 } 
    19 else 
    20 { 
    21 oDiv.style.left=oDiv.offsetLeft+iSpeed+'px'; 
    22 } 
    23 document.title=oDiv.style.left+' '+iSpeed; 
    24 },30); 
    25 }; 
    这样,一个运动框架就写好了!原理很简单,不过还有待完善。慢慢来吧!
  • 相关阅读:
    Thread+Handler 线程 消息循环(转载)
    android开发之Fragment加载到一个Activity中
    Android应用程序框架之无边界设计意图
    windows系统下安装MySQL
    Java 性能优化技巧集锦
    功能完善的Java连接池调用实例
    Unicode 与 UTF 字符标准
    java内存配置
    Java Map 简介
    nginx 学习笔记(9) 配置HTTPS服务器--转载
  • 原文地址:https://www.cnblogs.com/hl-520/p/4244089.html
走看看 - 开发者的网上家园