js让页面动起来 互动版

在线工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

实现思路:

先进行某个运动,该运动完成后,再进行下一步运动,就达到了链式运动的效果

效果

logo运动


链式运动

  1. 在链式运动编写中呢,我们将运用到简单的异步,如果有学习了nodejs的同学,你们将见到在nodejs中常见的一种写法,用一个callback函数做参数,当前面运动执行完后我们将调用下一步要执行的运动的函数。
  2. 在右方回调(callback)函数中,使用this,它指向的是Window
  3. 这次我们运用到了第一小节写的getStyle函数,注意不同之处,由于我们我们之前的getStyle函数获取width返回的是带单位的字符串,因此在此我们对取得的width值转换为浮点数。

function startMove(obj,target,attr,fn)
{
  clearInterval(timer);
  timer=setInterval(function(){
      var speed=(target - getStyle(obj,attr))/20;
      speed = speed>0?Math.ceil(speed):Math.floor(speed);
      if(getStyle(obj,attr) == target){
          clearInterval(timer);
        if(fn) {
            fn();
        }
      }
      else{
          obj.style[attr]=getStyle(obj,attr) + speed + 'px';
      }
      },30)
}
function getStyle(obj,attr){
  if(obj.currentStyle){
      return parseFloat(obj.currentStyle[attr]);
  }
  else{
      return parseFloat(getComputedStyle(obj,false)[attr]);
  }
}
根据第二点的提示修改右方JavaScript代码框中的this