js运动框架逐渐递进版

2022-02-19 20:35:50

运动，其实就是在一段时间内改变left、right、width、height、opactiy的值，到达目的地之后停止。

现在按照以下步骤来进行我们的运动框架的封装:

  1. 匀速运动。
  2. 缓冲运动。
  3. 多物体运动。
  4. 任意值变化。
  5. 链式运动。
  6. 同时运动

（第一部分）：匀速运动

运动基础

思考：如何让div动起来?
如下：

  1. 设置元素为绝对定位，只有绝对定位后，left,top等值才生效。
  2. 定时器的使用（动态改变值），这里使用setInterval()每隔指定的时间执行代码。
  • 计时器setInterval(函数,交互时间(毫秒))：在执行时,从载入页面后每隔指定的时间执行代码。
  • 取消计时器clearInterval(函数) 方法可取消由 setInterval() 设置的交互时间。
  1. 获取当前的位置，大小等等。offsetLeft（当前元素相对父元素位置）获取左边距。
  2. 速度–控制物体运动的快慢
  • 定时器间隔时间
  • 改变值的大小

根据上面的信息我们就可以开始封装运动框架创建一个变化的div了。

1

2

3

4

5

6

7

8

9

10

/**

* 运动框架-1-动起来

* @param {HTMLElement} element 进行运动的节点

*/

var timer = null;

function startMove(element) {

timer = setInterval(function () {//定时器

element.style.left = element.offsetLeft + 5 + "px";

}, 30);

}

例如：window.onload = function()

{

var oBtn = document.getElementById('btn');  //元素的获取

oBtn.onclick = function()

{

var oDiv = document.getElementById('div1');  //设置定时器

setInterval(function()

{  //改变物体位置

oDiv.style.left = oDiv.offsetLeft + 10 + 'px';

},30)

}

}

你没看错，就是那么简单。但是等等， what？ 怎么不会停？

那是因为我们没有运动终止条件。好再还是比较简单。直接在定时器内部，判断到达目标值，清除定时器就行啦！

判断很重要

1

2

3

4

5

6

7

8

9

10

11

12

13

14

/**

* 运动框架-2-运动终止

* @param {HTMLElement} element 进行运动的节点

* @param {number}      iTarget 运动终止条件。

*/

var timer = null;

function startMove(element, iTarget) {

timer = setInterval(function () {

element.style.left = element.offsetLeft + 5 + "px";

if (element.offsetLeft === iTarget) {//停止条件

clearInterval(timer);

}

}, 30);

}

例如：window.onload = function()

{

var timer=null;

var oBtn = document.getElementById('btn');

oBtn.onclick = function()

{

var oDiv = document.getElementById('div1');  //设置定时器

var timer = setInterval(function()

{  //判断停止条件

if(oDiv.offsetLeft > 300)

{

clearInterval(timer);

}

else{  //改变物体位置

oDiv.style.left = oDiv.offsetLeft + 10 + 'px';

document.title = oDiv.offsetLeft;  //显示当前的边界值

}

},30);                                                                                                                                                                                                                  }

}

就这样是不是就完成了呢？已经ok了呢？
no。还有一些Bug需要处理。

运动中的Bug

  1. 速度取到某些值会无法停止
  2. 到达位置后再点击还会运动
  3. 重复点击速度加快
  4. 速度无法更改

解决BUG

      1. 速度取到某些值会无法停止（这个Bug稍后解决，在进化过程中自然解决）
      2. 把运动和停止隔开(if/else)
      3. 在开始运动时,关闭已有定时器
      4. 把速度用变量保存
      5. 运动框架-3-解决Bug

      6. var timer = null;

        function startMove(element, iTarget) {

        clearInterval(timer);//在开始运动时,关闭已有定时器

        timer = setInterval(function () {

        var iSpeed = 5;//把速度用变量保存

        //把运动和停止隔开(if/else)

        if (element.offsetLeft === iTarget) {//结束运动

        clearInterval(timer);

        } else {

        element.style.left = element.offsetLeft + iSpeed + "px";

        }

        }, 30);

      7. 例如：
 
  
  1. var timer = null;
  2. function startMove(){
  3. var oDiv = document.getElementById('div1');
  4. clearInterval(timer);
  5. //计算速度
  6. var iSpeed = 10;
  7. //设置定时器
  8. timer = setInterval(function(){
  9. //判断停止条件
  10. if(oDiv.offsetLeft > 300){
  11. clearInterval(timer);
  12. }else{
  13. //改变物体位置
  14. oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px';
  15. document.title = oDiv.offsetLeft;
  16. }
  17. },30);
  18. }
       

这样一个简单的运动框架就完成了。但是，再等等。只能向右走？别急，我们不是定义了把速度变成为了变量吗？只需要对它进行一些处理就行啦！
var iSpeed = 5;–>

1

2

3

4

5

6

7

//判断距离目标位置，达到自动变化速度正负

var iSpeed = 0;

if (element.offsetLeft < iTarget) {

iSpeed = 5;

} else {

iSpeed = -5;

}

例如：

  1. window.onload = function(){
  2. var oDiv = document.getElementById('div1');
  3. oDiv.onmouseover = function(){
  4. startMove(0);
  5. }
  6. oDiv.onmouseout = function(){
  7. startMove(-100);
  8. }
  9. }
  10. var timer = null;
  11. var iSpeed;
  12. function startMove(iTatget){
  13. var oDiv = document.getElementById('div1');
  14. clearInterval(timer);
  15. timer = setInterval(function(){
  16. //计算速度
  17. if(iTatget -oDiv.offsetLeft > 0){
  18. iSpeed = 10;
  19. }else{
  20. iSpeed = -10;
  21. }
  22. if(oDiv.offsetLeft == iTatget){
  23. clearInterval(timer);
  24. }else{
  25. oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px';
  26. }
  27. document.title = oDiv.offsetLeft;
  28. },30)
  29. }

透明度动画

  1. 用变量alpha储存当前透明度。
  2. 把上面的element.offsetLeft改成变量alpha。
  3. 运动和停止条件部分进行更改。如下：

1

2

3

4

5

6

7

8

//透明度浏览器兼容实现

if (alpha === iTarget) {

clearInterval(time);

} else {

alpha += speed;

element.style.filter = 'alpha(opacity:' + alpha + ')'; //兼容IE

element.style.opacity = alpha / 100;//标准

}

例如：

  1. window.onload = function(){
  2. var oImg = document.getElementById('img1');
  3. oImg.onmouseover = function(){
  4. startMove(100);
  5. }
  6. oImg.onmouseout = function(){
  7. startMove(30);
  8. }
  9. }
  10. var timer = null;
  11. //保存透明度的数字值
  12. var alpha = 30;
  13. function startMove(iTarget){
  14. var oDiv = document.getElementById('img1');
  15. clearInterval(timer);
  16. timer = setInterval(function(){
  17. var iSpeed = 0;
  18. if(alpha > iTarget){
  19. iSpeed = -1;
  20. }else{
  21. iSpeed = 1;
  22. }
  23. if(alpha == iTarget){
  24. clearInterval(timer);
  25. }else{
  26. //改变透明度速度值
  27. alpha += iSpeed;
  28. oDiv.style.filter = 'alpha(opacity:'+ alpha+')';
  29. oDiv.style.opacity = alpha/100;
  30. document.title = alpha;
  31. }
  32. },30)
  33. }

（二）缓冲动画

思考：怎么样才是缓冲动画？

应该有以下几点：

  • 逐渐变慢,最后停止
  • 距离越远速度越大
    • 速度由距离决定
    • 速度=(目标值-当前值)/缩放系数
  • Bug :速度取整(使用Math方法)，不然会闪
    • 向上取整。Math.ceil(iSpeed)
    • 向下取整。Math.floor(iSpeed)

还是对速度作文章：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

/**

* 运动框架-4-缓冲动画

*/

function startMove(element, iTarget) {

clearInterval(timer);

timer = setInterval(function () {

//因为速度要动态改变，所以必须放在定时器中

var iSpeed = (iTarget - element.offsetLeft) / 10; //(目标值-当前值)/缩放系数=速度

iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); //速度取整

if (element.offsetLeft === iTarget) {//结束运动

clearInterval(timer);

} else {

element.style.left = element.offsetLeft + iSpeed + "px";

}

}, 30);

}
  • 做到这里，（速度取到某些值会无法停止)这个Bug就自动解决啦！
  • 例子:缓冲菜单
  • 跟随页面滚动的缓冲侧边栏

潜在问题目标值不是整数时

例如：

  1. window.onload = function(){
  2. var btn = document.getElementsByTagName('input')[0];
  3. btn.onclick = function(){
  4. startMove(300);
  5. }
  6. }
  7. var timer = null;
  8. function startMove(iTarget){
  9. var oDiv = document.getElementById('div1');
  10. clearInterval(timer);
  11. timer = setInterval(function(){
  12. //求出带有变化的速度
  13. var iSpeed = (iTarget - oDiv.offsetLeft) / 8;
  14. if(oDiv.offsetLeft == iTarget){
  15. clearInterval(timer);
  16. }else{
  17. oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px';
  18. }
  19. document.title = oDiv.offsetLeft + '...' + iSpeed;
  20. },30);
  21. }

上述方法可以得到缓冲运动，但是实际运行效果，物体并没有在 300的位置停掉，而是在 293的位置就停掉了。究其原因。因为当物体的速度小于1 的时候。物体位置为293。此时计算的速度是 0.875.通过 oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px'; 物体的位置为 293.875.可是计算机不能识别小数，将小数省略了。此时的 位置offsetLeft仍然是 293.再计算一次，还是同样的结果。定时器没有关掉，但是物体的位置却再也无法改变，故停留在了 293的位置。解决方案，就是将速度进行向上取整。但是，像上述运动，速度是正的，可是，当速度是负的时候，就同样会有相同的结果，因此需要在速度为负的时候，向下取整。

  1. function startMove(iTarget){
  2. var oDiv = document.getElementById('div1');
  3. clearInterval(timer);
  4. timer = setInterval(function(){
  5. var iSpeed = (iTarget - oDiv.offsetLeft) / 8;
  6. //对正的速度向上取整，负的速度向下取整
  7. iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
  8. if(oDiv.offsetLeft == iTarget){
  9. clearInterval(timer);
  10. }else{
  11. oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px';
  12. }
  13. document.title = oDiv.offsetLeft + '...' + iSpeed;
  14. },30);
  15. }

（三）多物体运动

思考：如何实现多物体运动？

  • 单定时器，存在问题。每个div一个定时器
  • 定时器作为对象的属性
    • 直接使用element.timer把定时器变成对象上的一个属性。
  • 参数的传递:物体/目标值
    比较简单把上面框架的进行如下更改：timer–>element.timer

处理多物体运动，运动函数里面每次都要选取一个元素加事件。如果需要对多个物体进行同样的运动， 需要将运动对象作为参数传进来。

  1. window.onload = function(){
  2. var aDiv = document.getElementsByTagName('div');
  3. for(var i=0;i<aDiv.length;i++){
  4. aDiv[i].onmouseover = function(){
  5. startMove(this,300);
  6. }
  7. aDiv[i].onmouseout = function(){
  8. startMove(this,100);
  9. }
  10. }
  11. }
  12. var timer = null;
  13. function startMove(obj,iTarget){
  14. clearInterval(timer);
  15. timer = setInterval(function(){
  16. var iSpeed = (iTarget - obj.offsetWidth) / 8;
  17. iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
  18. if(obj.offsetWidth == iTarget){
  19. clearInterval(timer);
  20. }else{
  21. obj.style.width = obj.offsetWidth + iSpeed + 'px';
  22. }
  23. },30)
  24. }
  25. 通过循环物体，将物体的 this传给运动函数，使得多物体可以运动。但是这样有一个弊端，即当滑入第一个运动的时候，开启了定时器。如果此时，滑入另外一个物体，将会清理上一个定时器。这就造成了，上一次运动，很有可能还没完成结束，定时器就没关闭了。解决的方法，每个运动的物体，都能开了一个属于自己的定时器。因此，把定时器当成物体的属性。清理的时候也就是清理自己的定时器
  1. window.onload = function(){
  2. var aDiv = document.getElementsByTagName('div');
  3. for(var i=0;i<aDiv.length;i++){
  4. aDiv[i].onmouseover = function(){
  5. startMove(this,300);
  6. }
  7. aDiv[i].onmouseout = function(){
  8. startMove(this,100);
  9. }
  10. }
  11. }
  12. function startMove(obj,iTarget){
  13. //将定时器，变成物体的属性，类似给物体添加索引
  14. clearInterval(obj.timer);
  15. obj.timer = setInterval(function(){
  16. var iSpeed = (iTarget - obj.offsetWidth) / 8;
  17. iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
  18. if(obj.offsetWidth == iTarget){
  19. clearInterval(obj.timer);
  20. }else{
  21. obj.style.width = obj.offsetWidth + iSpeed + 'px';
  22. }
  23. },30)
  24. }

（四）任意值变化

咳咳。我们来给div加个1px的边框。boder :1px solid #000

然后来试试下面的代码

1

2

3

setInterval(function () {

oDiv.style.width = oDiv.offsetWidth - 1 + "px";

}, 30)

嗯，神奇的事情发生了！what？我设置的不是宽度在减吗？怎么尼玛增加了！ 不对啊，大兄弟。

究竟哪里出了问题呢？

一起找找资料，看看文档，原来offset这一系列的属性都会存在，被其他属性干扰的问题。

好吧，既然不能用，那么我们就顺便把任意值变化给做了吧。

第一步：获取实际样式

使用offsetLeft..等获取样式时, 若设置了边框, padding, 等可以改变元素宽度高度的属性时会出现BUG..

  • 通过查找发现element.currentStyle(attr)可以获取计算过之后的属性。
  • 但是因为兼容性的问题，需封装getStyle函数。（万恶的IE）
  • 当然配合CSS的box-sizing属性设为border-box可以达到一样的效果 ? (自认为，未验证)。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

/**

* 获取实际样式函数

* @param   {HTMLElement}   element  需要寻找的样式的html节点

* @param   {String]} attr 在对象中寻找的样式属性

* @returns {String} 获取到的属性

*/

function getStyle(element, attr) {

//IE写法

if (element.currentStyle) {

return element.currentStyle[attr];

//标准

} else {

return getComputedStyle(element, false)[attr];

}

}

第二步：改造原函数

  1. 添加参数，attr表示需要改变的属性值。
  2. 更改element.offsetLeft为getStyle(element, attr)。
  • 需要注意的是：getStyle(element, attr)不能直接使用，因为它获取到的字符串,例：10px。
  • 变量iCurrent使用parseInt(),将样式转成数字。
  1. element.style.left为element.style[attr]。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

/**

* 运动框架-4-任意值变化

* @param {HTMLElement} element 运动对象

* @param {string}      attr    需要改变的属性。

* @param {number}      iTarget 目标值

*/

function startMove(element, attr, iTarget) {

clearInterval(element.timer);

element.timer = setInterval(function () {

//因为速度要动态改变，所以必须放在定时器中

var iCurrent=0;

iCurrent = parseInt(getStyle(element, attr));//实际样式大小

var iSpeed = (iTarget - iCurrent) / 10; //(目标值-当前值)/缩放系数=速度

iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); //速度取整

if (iCurrent === iTarget) {//结束运动

clearInterval(element.timer);

} else {

element.style[attr] = iCurrent + iSpeed + "px";

}

}, 30);

}

试一试，这样是不是就可以了呢？

还记得上面我们写的透明度变化吗? 再试试

果然还是不行， （废话，你见过透明度有”px”单位的么? - -白眼 ）

第三步：透明度兼容处理

思考：需要对那些属性进行修改？

  1. 判断attr是不是透明度属性opacity 。
  2. 对于速度进行处理。
  • 为透明度时，由于获取到的透明度会是小数，所以需要 * 100
  • 并且由于计算机储存浮点数的问题，还需要将小数，进行四舍五入为整数。使用： Math.round(parseFloat(getStyle(element, attr)) * 100)。
  • 否则，继续使用默认的速度。
  1. 对结果输出部分进行更改。
  • 判断是透明度属性，使用透明度方法
  • 否则，使用使用默认的输出格式。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

/**

* 运动框架-5-兼容透明度

* @param {HTMLElement} element 运动对象

* @param {string}      attr    需要改变的属性。

* @param {number}      iTarget 目标值

*/

function startMove(element, attr, iTarget) {

clearInterval(element.timer);

element.timer = setInterval(function () {

//因为速度要动态改变，所以必须放在定时器中

var iCurrent = 0;

if (attr === "opacity") { //为透明度时执行。

iCurrent = Math.round(parseFloat(getStyle(element, attr)) * 100);

} else { //默认情况

iCurrent = parseInt(getStyle(element, attr)); //实际样式大小

}

var iSpeed = (iTarget - iCurrent) / 10; //(目标值-当前值)/缩放系数=速度

iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); //速度取整

if (iCurrent === iTarget) {//结束运动

clearInterval(element.timer);

} else {

if (attr === "opacity") { //为透明度时，执行

element.style.filter = "alpha(opacity:" + (iCurrent + iSpeed) + ")"; //IE

element.style.opacity = (iCurrent + iSpeed) / 100; //标准

} else { //默认

element.style[attr] = iCurrent + iSpeed + "px";

}

}

}, 30);

}

到这里，这个运动框架就基本上完成了。但是，我们是追求完美的不是吗？

继续进化！

多物体的淡入淡出的时候，也有类似的问题。因为修改透明度的时候，是先用一个变量保存透明度，必须针对每个物体设立透明度值属性。

  1. window.onload = function(){
  2. var aDiv = document.getElementsByTagName('div');
  3. for(var i=0;i<aDiv.length;i++){
  4. //将透明度值当初属性
  5. aDiv[i].alpha = 30;
  6. aDiv[i].onmouseover = function(){
  7. startMove(this,100);
  8. }
  9. aDiv[i].onmouseout = function(){
  10. startMove(this,30);
  11. }
  12. }
  13. }
  14. function startMove(obj,iTarget){
  15. clearInterval(obj.timer);
  16. obj.timer = setInterval(function(){
  17. var iSpeed = (iTarget - obj.alpha) / 8;
  18. iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
  19. if(obj.alpha == iTarget){
  20. clearInterval(obj.timer);
  21. }else{
  22. obj.alpha += iSpeed;
  23. obj.style.filter = 'alpha(opacity:'+obj.alpha+')';
  24. obj.style.opacity = obj.alpha / 100;
  25. }
  26. document.title = obj.alpha;
  27. },30);
  28. }


4.1  位置属性的bug


offsetWidth 或者 offsetHeight 等位置属性，一旦给他们加上 border。则会有诡异的现象出现。




    

  1. window.onload = function(){
    2. 

  2. var oDiv = document.getElementById('div1');
    3. 

  3. setInterval(function(){
    4. 

  4. oDiv.style.width = oDiv.offsetWidth - 1 + "px";
    5. 

  5. },30)
    6. 

  6. }
    7. 







例如 oDiv.style.width = oDiv.offsetWidth - 1 + 'px'; 如果给 oDiv 的width 为一百，border 为 1.则这个物体的 width是100px；offsetWidth 为102px；带入公式之后，即减一之后。100 = 102 - 1 ，反而等于101；即 物体本来要减小，事实却增大了。解决的方案就是，加减的时候，必须使用物体的内联样式。但是 火狐 和 IE 又有兼容模式。解决方案如下：




    

  1. window.onload = function(){
    2. 

  2. var oDiv = document.getElementById('div1');
    3. 

  3. setInterval(function(){
    4. 

  4. oDiv.style.width = parseInt(getStyle(oDiv,'width')) - 1 + 'px';
    5. 

  5. },30)
    6. 

  6. }
    7. 

  7. function getStyle(obj,attr){
    8. 

  8. if(obj.currentStyle){
    9. 

  9. return obj.currentStyle[attr];
    10. 

  10. }else{
    11. 

  11. return getComputedStyle(obj,false)[attr];
    12. 

  12. }
    13. 

  13. }
    14. 







其中，getStyle函数，传入一个元素对象，和其 css 属性，获取的是元素的样式，即 witdh 100px；因此需要parseInt转换


5.任意值运动


通过 getStyle 函数，可以获取元素的样式，还可也通过 attr 制定需要修改的 css属性。这样就能是物体有不同的运动形式。




    

  1. window.onload = function(){
    2. 

  2. var aDiv = document.getElementsByTagName('div');
    3. 

  3. aDiv[0].onmouseover = function(){
    4. 

  4. startMove(this,'width',300);
    5. 

  5. }
    6. 

  6. aDiv[0].onmouseout = function(){
    7. 

  7. startMove(this,'width',100);
    8. 

  8. }
    9. 

  9. aDiv[1].onmouseover = function(){
    10. 

  10. startMove(this,'height',100);
    11. 

  11. }
    12. 

  12. aDiv[1].onmouseout = function(){
    13. 

  13. startMove(this,'height',50);
    14. 

  14. }
    15. 

  15. }
    16. 

  16. function getStyle(obj,attr){
    17. 

  17. if(obj.currentStyle){
    18. 

  18. return obj.currentStyle(attr);
    19. 

  19. }else{
    20. 

  20. return getComputedStyle(obj,false)[attr];
    21. 

  21. }
    22. 

  22. }
    23. 

  23. function startMove(obj,attr,iTarget){
    24. 

  24. clearInterval(obj.timer);
    25. 

  25. obj.timer = setInterval(function(){
    26. 

  26. var iCur = parseInt(getStyle(obj,attr));
    27. 

  27. var iSpeed = (iTarget - iCur) / 8;
    28. 

  28. iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
    29. 

  29. if(iCur == iTarget){
    30. 

  30. clearInterval(obj.timer);
    31. 

  31. }else{
    32. 

  32. obj.style[attr] = iCur + iSpeed + 'px';
    33. 

  33. }
    34. 

  34. },30)
    35. 

  35. }
    36. 







例如：


多物体的淡入淡出的时候，也有类似的问题。因为修改透明度的时候，是先用一个变量保存透明度，必须针对每个物体设立透明度值属性




    

  1. window.onload = function(){
    2. 

  2. var aDiv = document.getElementsByTagName('div');
    3. 

  3. for(var i=0;i<aDiv.length;i++){
    4. 

  4. //将透明度值当初属性
    5. 

  5. aDiv[i].alpha = 30;
    6. 

  6. aDiv[i].onmouseover = function(){
    7. 

  7. startMove(this,100);
    8. 

  8. }
    9. 

  9. aDiv[i].onmouseout = function(){
    10. 

  10. startMove(this,30);
    11. 

  11. }
    12. 

  12. }
    13. 

  13. }
    14. 

  14. function startMove(obj,iTarget){
    15. 

  15. clearInterval(obj.timer);
    16. 

  16. obj.timer = setInterval(function(){
    17. 

  17. var iSpeed = (iTarget - obj.alpha) / 8;
    18. 

  18. iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
    19. 

  19. if(obj.alpha == iTarget){
    20. 

  20. clearInterval(obj.timer);
    21. 

  21. }else{
    22. 

  22. obj.alpha += iSpeed;
    23. 

  23. obj.style.filter = 'alpha(opacity:'+obj.alpha+')';
    24. 

  24. obj.style.opacity = obj.alpha / 100;
    25. 

  25. }
    26. 

  26. document.title = obj.alpha;
    27. 

  27. },30);
    28. 

  28. }
    29. 

  29. 位置属性的bug
    30. 



offsetWidth 或者 offsetHeight 等位置属性，一旦给他们加上 border。则会有诡异的现象出现。


    

  1. window.onload = function(){
    2. 

  2. var oDiv = document.getElementById('div1');
    3. 

  3. setInterval(function(){
    4. 

  4. oDiv.style.width = oDiv.offsetWidth - 1 + "px";
    5. 

  5. },30)
    6. 

  6. }
    7. 

  7. 例如 oDiv.style.width = oDiv.offsetWidth - 1 + 'px'; 如果给 oDiv 的width 为一百，border 为 1.则这个物体的 width是100px；offsetWidth 为102px；带入公式之后，即减一之后。100 = 102 - 1 ，反而等于101；即 物体本来要减小，事实却增大了。解决的方案就是，加减的时候，必须使用物体的内联样式。但是 火狐 和 IE 又有兼容模式。解决方案如下：
    8. 





    

  1. window.onload = function(){
    2. 

  2. var oDiv = document.getElementById('div1');
    3. 

  3. setInterval(function(){
    4. 

  4. oDiv.style.width = parseInt(getStyle(oDiv,'width')) - 1 + 'px';
    5. 

  5. },30)
    6. 

  6. }
    7. 

  7. function getStyle(obj,attr){
    8. 

  8. if(obj.currentStyle){
    9. 

  9. return obj.currentStyle[attr];
    10. 

  10. }else{
    11. 

  11. return getComputedStyle(obj,false)[attr];
    12. 

  12. }
    13. 

  13. }
    14. 



其中，getStyle函数，传入一个元素对象，和其 css 属性，获取的是元素的样式，即 witdh 100px；因此需要parseInt转换


任意值运动


通过 getStyle 函数，可以获取元素的样式，还可也通过 attr 制定需要修改的 css属性。这样就能是物体有不同的运动形式。






    

  1. window.onload = function(){
    2. 

  2. var aDiv = document.getElementsByTagName('div');
    3. 

  3. aDiv[0].onmouseover = function(){
    4. 

  4. startMove(this,'width',300);
    5. 

  5. }
    6. 

  6. aDiv[0].onmouseout = function(){
    7. 

  7. startMove(this,'width',100);
    8. 

  8. }
    9. 

  9. aDiv[1].onmouseover = function(){
    10. 

  10. startMove(this,'height',100);
    11. 

  11. }
    12. 

  12. aDiv[1].onmouseout = function(){
    13. 

  13. startMove(this,'height',50);
    14. 

  14. }
    15. 

  15. }
    16. 

  16. function getStyle(obj,attr){
    17. 

  17. if(obj.currentStyle){
    18. 

  18. return obj.currentStyle(attr);
    19. 

  19. }else{
    20. 

  20. return getComputedStyle(obj,false)[attr];
    21. 

  21. }
    22. 

  22. }
    23. 

  23. function startMove(obj,attr,iTarget){
    24. 

  24. clearInterval(obj.timer);
    25. 

  25. obj.timer = setInterval(function(){
    26. 

  26. var iCur = parseInt(getStyle(obj,attr));
    27. 

  27. var iSpeed = (iTarget - iCur) / 8;
    28. 

  28. iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
    29. 

  29. if(iCur == iTarget){
    30. 

  30. clearInterval(obj.timer);
    31. 

  31. }else{
    32. 

  32. obj.style[attr] = iCur + iSpeed + 'px';
    33. 

  33. }
    34. 

  34. },30)
    35. 

  35. }
    36. 



任意值完美版


上述版本，还不能处理透明度的任意值，因此需要增加额外的兼容hack。


    

  1. window.onload = function(){
    2. 

  2. var aDiv = document.getElementsByTagName('div');
    3. 

  3. aDiv[0].onmouseover = function(){
    4. 

  4. startMove(this,'opacity',100);
    5. 

  5. }
    6. 

  6. aDiv[0].onmouseout = function(){
    7. 

  7. startMove(this,'opacity',30);
    8. 

  8. }
    9. 

  9. }
    10. 

  10. function getStyle(obj,attr){
    11. 

  11. if(obj.currentStyle){
    12. 

  12. return obj.currentStyleattr[attr];
    13. 

  13. }else{
    14. 

  14. return getComputedStyle(obj, false)[attr];
    15. 

  15. }
    16. 

  16. }
    17. 

  17. function getStyle(obj, attr){
    18. 

  18. if(obj.currentStyle)    {
    19. 

  19. return obj.currentStyle[attr];
    20. 

  20. }else{
    21. 

  21. return getComputedStyle(obj, false)[attr];
    22. 

  22. }
    23. 

  23. }
    24. 

  24. function startMove(obj,attr,iTarget){
    25. 

  25. clearInterval(obj.timer);
    26. 

  26. obj.timer = setInterval(function(){
    27. 

  27. var iCur = 0;
    28. 

  28. if(attr == 'opacity'){
    29. 

  29. iCur = parseInt(parseFloat(getStyle(obj, attr))*100);
    30. 

  30. }else{
    31. 

  31. iCur = parseInt(getStyle(obj,attr));
    32. 

  32. }
    33. 

  33. var iSpeed = (iTarget - iCur) / 8;
    34. 

  34. iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
    35. 

  35. if(iCur == iTarget){
    36. 

  36. clearInterval(obj.timer);
    37. 

  37. }else{
    38. 

  38. if(attr=='opacity'){
    39. 

  39. iCur += iSpeed
    40. 

  40. obj.style.filter='alpha(opacity:' + iCur + ')';
    41. 

  41. obj.style.opacity=iCur / 100;
    42. 

  42. }
    43. 

  43. else{
    44. 

  44. obj.style[attr]=iCur+iSpeed+'px';
    45. 

  45. }
    46. 

  46. document.title = obj.style[attr];
    47. 

  47. }
    48. 

  48. },30)
    49. 

  49. }
    50. 



链式动画（运动）


链式动画：顾名思义，就是在该次运动停止时，开始下一次运动。（我们的运动框架到目前为止，基本功能都能实现了。现在拓展。所谓链式运动，即运动接着运动。当运动停止的时候，如果回调一个函数。回调一个运动函数，就能出现这样的效果。因此传入一个函数作为回调函数。）


如何实现呢？


    

  • 使用回调函数：运动停止时,执行函数
    • 

  • 添加func形参（回调函数）。
    • 



在当前属性到达目的地时iCurrent === iTarget，判断是否有回调函数存在，有则执行。





1


2


3


4


5


6




if (iCurrent === iTarget) {//结束运动


clearInterval(element.timer);


if (func) {


func();//回调函数


}


}





链式动画完成！距离完美还差一步！


例如：




    

  1. window.onload = function(){
    2. 

  2. var oDiv = document.getElementById('div1');
    3. 

  3. oDiv.onclick = function(){
    4. 

  4. startMove(this,'width',300,function(){
    5. 

  5. startMove(oDiv,'height',300,function(){
    6. 

  6. startMove(oDiv,'opacity',100)
    7. 

  7. })
    8. 

  8. })
    9. 

  9. }
    10. 

  10. }
    11. 

  11. function getStyle(obj,attr){
    12. 

  12. if(obj.currentStyle){
    13. 

  13. return obj.currentStyleattr[attr];
    14. 

  14. }else{
    15. 

  15. return getComputedStyle(obj, false)[attr];
    16. 

  16. }
    17. 

  17. }
    18. 

  18. function startMove(obj,attr,iTarget,fn){
    19. 

  19. clearInterval(obj.timer);
    20. 

  20. obj.timer = setInterval(function(){
    21. 

  21. var iCur = 0;
    22. 

  22. if(attr == 'opacity'){
    23. 

  23. iCur = parseInt(parseFloat(getStyle(obj, attr))*100);
    24. 

  24. }else{
    25. 

  25. iCur = parseInt(getStyle(obj,attr));
    26. 

  26. }
    27. 

  27. var iSpeed = (iTarget - iCur) / 8;
    28. 

  28. iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
    29. 

  29. if(iCur == iTarget){
    30. 

  30. clearInterval(obj.timer);
    31. 

  31. //回调函数
    32. 

  32. if(fn) fn();
    33. 

  33. }else{
    34. 

  34. if(attr=='opacity'){
    35. 

  35. iCur += iSpeed
    36. 

  36. obj.style.filter='alpha(opacity:' + iCur + ')';
    37. 

  37. obj.style.opacity=iCur / 100;
    38. 

  38. }
    39. 

  39. else{
    40. 

  40. obj.style[attr]=iCur+iSpeed+'px';
    41. 

  41. }
    42. 

  42. document.title = obj.style[attr];
    43. 

  43. }
    44. 

  44. },30)
    45. 

  45. }
    46. 





同时运动


思考：如何实现同时运动？


    

  1. 使用JSON传递多个值
    2. 

  2. 使用for in循环，遍历属性，与值。
    3. 

  3. 定时器问题!(运动提前停止)
    4. 



    

  • 在循环外设置变量,假设所有的值都到达了目的值为true
    • 

  • 在循环中检测是否到达目标值,若没有值未到则为false
    • 

  • 在循环结束后,检测是否全部达到目标值.是则清除定时器
    • 



实现：


    

  1. 删除attr与iTarget两个形参，改为json
    2. 

  2. 在函数开始时，设置一个标记var flag = true; //假设所有运动到达终点.
    3. 

  3. 在定时器内使用for in，遍历属性与目标，改写原来的attr与iTarget，为json的属性与值
    4. 

  4. 修改运动终止条件，只有每一项的实际属性值iCurrent，等于目标值json[attr]时，flag才为true。清除定时器，判断是否回调。
    5. 



否则，继续执行代码，直到所有属性值等于目标值。





1


2


3


4


5


6


7


8


9


10


11


12


13


14


15


16


17


18


19


20


21


22


23


24


25


26


27


28


29


30


31


32


33


34


35


36


37


38


39


40


41


42


43


44


45


46


47


48


49


50


51


52


53


54


55


56


57


58


59


60


61




/**


* 获取实际样式函数


* @param   {HTMLElement}   element  需要寻找的样式的html节点


* @param   {String]} attr 在对象中寻找的样式属性


* @returns {String} 获取到的属性


*/


function getStyle(element, attr) {


//IE写法


if (element.currentStyle) {


return element.currentStyle[attr];


//标准


} else {


return getComputedStyle(element, false)[attr];


}


}


/**


* 完美运动框架


* @param {HTMLElement} element 运动对象


* @param {JSON}        json    属性：目标值


*   @property {String} attr    属性值


*   @config   {Number} target  目标值


* @param {function}    func    可选，回调函数，链式动画。


*/


function startMove(element, json, func) {


var flag = true; //假设所有运动到达终点.


clearInterval(element.timer);


element.timer = setInterval(function () {


for (var attr in json) {


//1.取当前的属性值。


var iCurrent = 0;


if (attr === "opacity") { //为透明度时执行。


iCurrent = Math.round(parseFloat(getStyle(element, attr)) * 100);


} else { //默认情况


iCurrent = parseInt(getStyle(element, attr)); //实际样式大小


}


//2.算运动速度,动画缓冲效果


var iSpeed = (json[attr] - iCurrent) / 10; //(目标值-当前值)/缩放系数=速度


iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); //速度取整


//3.未到达目标值时，执行代码


if (iCurrent != json[attr]) {


flag = false; //终止条件


if (attr === "opacity") { //为透明度时，执行


element.style.filter = "alpha(opacity:" + (iCurrent + iSpeed) + ")"; //IE


element.style.opacity = (iCurrent + iSpeed) / 100; //标准


} else { //默认


element.style[attr] = iCurrent + iSpeed + "px";


}


} else {


flag = true;


}


//4. 运动终止，是否回调


if (flag) {


clearInterval(element.timer);


if (func) {


func();


}


}


}


}, 30);


}





（目前为止，我们的运动框架还有个小缺点，就是不能同时该两个属性进行运动，比如同时更改宽和高。这个要求传入的属性是不同的几个值。则考虑传入一个 json用来保存需要更改的属性。）


例如：




    

  1. window.onload = function(){
    2. 

  2. var oDiv = document.getElementById('div1');
    3. 

  3. oDiv.onclick = function(){
    4. 

  4. startMove(this,{'width':300,'height':400});
    5. 

  5. }
    6. 

  6. }
    7. 

  7. function getStyle(obj, attr){
    8. 

  8. if(obj.currentStyle)    {
    9. 

  9. return obj.currentStyle[attr];
    10. 

  10. }else{
    11. 

  11. return getComputedStyle(obj, false)[attr];
    12. 

  12. }
    13. 

  13. }
    14. 

  14. function startMove(obj,json,fn){
    15. 

  15. clearInterval(obj.timer);
    16. 

  16. obj.timer = setInterval(function(){
    17. 

  17. // 循环json
    18. 

  18. for(var attr in json){
    19. 

  19. var iCur = 0;
    20. 

  20. if(attr == 'opacity'){
    21. 

  21. iCur = parseInt(parseFloat(getStyle(obj, attr))*100);
    22. 

  22. }else{
    23. 

  23. iCur = parseInt(getStyle(obj,attr));
    24. 

  24. }
    25. 

  25. var iSpeed = (json[attr] - iCur) / 8;
    26. 

  26. iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
    27. 

  27. if(iCur == json[attr]){
    28. 

  28. clearInterval(obj.timer);
    29. 

  29. if(fn) fn();
    30. 

  30. }else{
    31. 

  31. if(attr=='opacity'){
    32. 

  32. iCur += iSpeed
    33. 

  33. obj.style.filter='alpha(opacity:' + iCur + ')';
    34. 

  34. obj.style.opacity=iCur / 100;
    35. 

  35. }
    36. 

  36. else{
    37. 

  37. obj.style[attr]=iCur+iSpeed+'px';
    38. 

  38. }
    39. 

  39. document.title = obj.style[attr];
    40. 

  40. }
    41. 

  41. }
    42. 

  42. },30)
    43. 



上述代码，可以解决了同时运动的问题。但是还是有一个bug。比如，同时运动的某个属性，如果变化很小，马上就停止了，即关掉了定时器。那么会造成其他属性的变化也停止。因为这些属性都共用了一个定时器。因此需要判断，假设有三个人要来，然后一起去爬山。三个人有的先来，有的后来，只要三个人都到齐了，才出发。也就是只有三个属性都到了目标值，才关定时器。一开始，设立一个检查量，为真。假设所有人都到了，然后循环，只有有一个人没有到，检查就为假。直到所有的都到了，检测为真。则停止定时器。


    

  1. window.onload = function(){
    2. 

  2. var oDiv = document.getElementById('div1');
    3. 

  3. oDiv.onclick = function(){
    4. 

  4. startMove(this,{'width':102,'height':400,'opacity':100});
    5. 

  5. }
    6. 

  6. }
    7. 

  7. function getStyle(obj, attr){
    8. 

  8. if(obj.currentStyle)    {
    9. 

  9. return obj.currentStyle[attr];
    10. 

  10. }else{
    11. 

  11. return getComputedStyle(obj, false)[attr];
    12. 

  12. }
    13. 

  13. }
    14. 

  14. function startMove(obj,json,fn){
    15. 

  15. clearInterval(obj.timer);
    16. 

  16. obj.timer = setInterval(function(){
    17. 

  17. var bStop = true;
    18. 

  18. for(var attr in json){
    19. 

  19. //取当前值
    20. 

  20. var iCur = 0;
    21. 

  21. if(attr == 'opacity'){
    22. 

  22. iCur = parseInt(parseFloat(getStyle(obj, attr))*100);
    23. 

  23. }else{
    24. 

  24. iCur = parseInt(getStyle(obj,attr));
    25. 

  25. }
    26. 

  26. //计算速度
    27. 

  27. var iSpeed = (json[attr] - iCur) / 8;
    28. 

  28. iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
    29. 

  29. //检测停止
    30. 

  30. if(iCur != json[attr]){
    31. 

  31. bStop = false;
    32. 

  32. }
    33. 

  33. if(attr=='opacity'){
    34. 

  34. iCur += iSpeed
    35. 

  35. obj.style.filter='alpha(opacity:' + iCur + ')';
    36. 

  36. obj.style.opacity=iCur / 100;
    37. 

  37. }
    38. 

  38. else{
    39. 

  39. obj.style[attr]=iCur+iSpeed+'px';
    40. 

  40. }
    41. 

  41. }
    42. 

  42. if(bStop){
    43. 

  43. clearInterval(obj.timer);
    44. 

  44. if(fn) fn();
    45. 

  45. }
    46. 

  46. },30)
    47. 

  47. }
    48. 



再循环外定义一个 标志变量 bStop = true。用来表示所有属性到达目标值。等循环结束了，如果这个值是真的，则停止定时器。因为，每次运行定时器，都会初始化这个值。循环的过程中，只要有一个没有到，bStop就被设定为 false。如果某个到了，此时 iCur != json[attr]，表示速度为0 后面执行的结果，也不会有变化。只有所有的都达到目标值。循环则不再改变 bStop的值。此时，只要下一次运行定时器。就是初始化 bStop为真。而循环因为都到了，所以速度为0 也就再也没有变化。循环结束，sBstop还是真，表示所有都到了。因此此时结束定时器。


最后附上完美运动框架，封装成 move.js 就可以调用了。




    

  1. /**
    2. 

  2. * @author rsj217
    3. 

  3. * getStyle 获取样式
    4. 

  4. * startMove 运动主程序
    5. 

  5. */
    6. 

  6. function getStyle(obj, attr){
    7. 

  7. if(obj.currentStyle)    {
    8. 

  8. return obj.currentStyle[attr];
    9. 

  9. }else{
    10. 

  10. return getComputedStyle(obj, false)[attr];
    11. 

  11. }
    12. 

  12. }
    13. 

  13. function Move(obj,json,fn){
    14. 

  14. //停止上一次定时器
    15. 

  15. clearInterval(obj.timer);
    16. 

  16. //保存每一个物体运动的定时器
    17. 

  17. obj.timer = setInterval(function(){
    18. 

  18. //判断同时运动标志
    19. 

  19. var bStop = true;
    20. 

  20. for(var attr in json){
    21. 

  21. //取当前值
    22. 

  22. var iCur = 0;
    23. 

  23. if(attr == 'opacity'){
    24. 

  24. iCur = parseInt(parseFloat(getStyle(obj, attr))*100);
    25. 

  25. }else{
    26. 

  26. iCur = parseInt(getStyle(obj,attr));
    27. 

  27. }
    28. 

  28. //计算速度
    29. 

  29. var iSpeed = (json[attr] - iCur) / 8;
    30. 

  30. iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
    31. 

  31. //检测同时到达标志
    32. 

  32. if(iCur != json[attr]){
    33. 

  33. bStop = false;
    34. 

  34. }
    35. 

  35. //更改属性，获取动画效果
    36. 

  36. if(attr=='opacity'){
    37. 

  37. iCur += iSpeed
    38. 

  38. obj.style.filter='alpha(opacity:' + iCur + ')';
    39. 

  39. obj.style.opacity=iCur / 100;
    40. 

  40. }
    41. 

  41. else{
    42. 

  42. obj.style[attr]=iCur+iSpeed+'px';
    43. 

  43. }
    44. 

  44. }
    45. 

  45. //检测停止
    46. 

  46. if(bStop){
    47. 

  47. clearInterval(obj.timer);
    48. 

  48. if(fn) fn();
    49. 

  49. }
    50. 

  50. },30)
    51. 

  51. }
    52. 



运动框架总结


  • 运动框架演变过程







框架




变化








startMove(element)




运动








startMove(element,iTarget)




匀速–>缓冲–>多物体








startMove(element,attr,iTargrt)




任意值








startMove(element,attr,iTargrt,func)




链式运动








startMove(element,json,func)




多值(同时)–>完美运动框架













上一篇：kafka-分布式消息系统

下一篇：【BZOJ】【1565】【NOI2009】PVZ 植物大战僵尸