JavaScript动画工作原理之（完结篇）

stage.addEventListener(‘mousemove‘, stage_mousemove_listener, false);
robot.addEventListener(‘mouseover‘, robot_mouseover_listener, false);
stage.addEventListener(‘mouseout‘, stage_mouseout_listener, false);

if (stage.addEventListener){ // We will test to see if this command is available
  stage.addEventListener(‘mousemove‘, stage_mousemove_listener, false);
  robot.addEventListener(‘mouseover‘, robot_mouseover_listener, false);
  stage.addEventListener(‘mouseout‘, stage_mouseout_listener, false);
} else { // If not, we have to use IE commands
  stage.attachEvent(‘onmousemove‘, stage_mousemove_listener);
  robot.attachEvent(‘onmouseover‘, robot_mouseover_listener);
  stage.attachEvent(‘onmouseout‘, stage_mouseout_listener); 
}

// Inside of RobotMaker
 
// We will need to introduce a few extra variables to track
var mouseX; // For tracking horizontal mouse position
var running_dir = ‘‘; // For tracking if (and where) robot is currently running
var stageOffset; // For tracking the position of the stage
 
function stage_mousemove_listener(e){
   
  // Find the horizontal position of the mouse inside of the stage ...  
  // That position will be saved in ‘mouseX‘
   
  // Then we compare ‘mouseX‘ to the robot, and decide if we need to run differently
  if (((robot.offsetLeft + (15 * run_speed)) < (mouseX - robot.offsetWidth)) && running_dir !== ‘r‘ && (!jump_timer || jump_timer === undefined)){ 
    // If the mouse is in the stage and to the right of the robot, make run right, if not already
    running_dir = ‘r‘;
    clearTimeout(run_timer);
    run_r(1, robot.offsetLeft);
  } else if ((mouseX < robot.offsetLeft - (15 * run_speed)) && running_dir !== ‘l‘ && (!jump_timer || jump_timer === undefined)) {
    // If the mouse is in the stage and to the left of the robot, make run left, if not already
    running_dir = ‘l‘;
    clearTimeout(run_timer);
    run_l(1, robot.offsetLeft);
  } else if ((robot.offsetLeft < mouseX) && ((robot.offsetLeft + robot.offsetWidth) > mouseX) && running_dir !== ‘‘ && (!jump_timer || jump_timer === undefined)) {
    // If the mouse is in the stage and over a robot, stop and clear running_dir
    running_dir = ‘‘;
    clearTimeout(run_timer);
    if (face_right){
      robot.style.backgroundPosition = "0px 0px";
    } else {
      robot.style.backgroundPosition = "0px -50px";
    }
  }
  // If none of the above is true, then we let our current behavior continue
}

function stage_mousemove_listener(e){
  var posX = 0;
  if (!e){
    var e = window.event;
  }
  
  if (e.pageX) {
    posX = e.pageX;
  } else if (e.clientX) {
    posX = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
  }
  mouseX = posX - stageOffset.xpos; // 我们找到了mouseX！
}

// 在RobotMaker内
var x = 0;
var y = 0;
function find_stage_offset (el){
  x = el.offsetLeft;
  y = el.offsetTop;
  el = el.offsetParent;
     
  while(el !== null) {
    x = parseInt(x) + parseInt(el.offsetLeft);
    y = parseInt(y) + parseInt(el.offsetTop);
    el = el.offsetParent;
  }
 
  return {xpos: x, ypos: y};
}
var stageOffset = find_stage_offset(stage);

function robot_mouseover_listener(){
  if (!jump_timer || jump_timer === undefined){
    clearTimeout(run_timer);
    jmp(true, robot.offsetTop);
  }
}

function stage_mouseout_listener(){
  mouseX = undefined;
  running_dir = ‘‘;
  if (!jump_timer || jump_timer === undefined){
    clearTimeout(run_timer);
    if (face_right){
      robot.style.backgroundPosition = "0px 0px";
    } else {
      robot.style.backgroundPosition = "0px -50px";
    }
  }
}

动画函数

function run_r(phase, left){
  face_right = true;
  running_dir = ‘r‘;
  if ((left + (15 * run_speed)) < (mouseX - robot.offsetWidth)){ // if mouse is to the right, run
         
    left = left + (15 * run_speed);
    robot.style.left = left+"px";
    switch (phase){
      case 1:
        robot.style.backgroundPosition = "-40px 0px";
        run_timer = setTimeout(function(){run_r(2, left);}, 200);
        break;
      case 2:
        robot.style.backgroundPosition = "-80px 0px";
        run_timer = setTimeout(function(){run_r(3, left);}, 200);
        break;
      case 3:
        robot.style.backgroundPosition = "-120px 0px";
        run_timer = setTimeout(function(){run_r(4, left);}, 200);
        break;
      case 4:
        robot.style.backgroundPosition = "-80px 0px";
        run_timer = setTimeout(function(){run_r(1, left);}, 200);
        break;
    }
} else if ((left + (15 * run_speed)) < mouseX) { // if mouse if above, stop
    robot.style.backgroundPosition = "0px 0px";
    running_dir = ‘‘;
} else { // if mouse is to the left, run left
    running_dir = ‘l‘;
    run_l(1, robot.offsetLeft);
  }
}
 
function run_l(phase, left){
  face_right = false;
  running_dir = ‘l‘;
  if (mouseX < robot.offsetLeft - (15 * run_speed)){ // if mouse is to the left, run
     
    left = left - (15 * run_speed);
    robot.style.left = left+"px";
    switch (phase){
      case 1:
        robot.style.backgroundPosition = "-40px -50px";
        run_timer = setTimeout(function(){run_l(2, left);}, 200);
        break;
      case 2:
        robot.style.backgroundPosition = "-80px -50px";
        run_timer = setTimeout(function(){run_l(3, left);}, 200);
        break;
      case 3:
        robot.style.backgroundPosition = "-120px -50px";
        run_timer = setTimeout(function(){run_l(4, left);}, 200);
        break;
      case 4:
        robot.style.backgroundPosition = "-80px -50px";
        run_timer = setTimeout(function(){run_l(1, left);}, 200);
        break;
    }
} else if (mouseX < (robot.offsetLeft + robot.offsetWidth - (15 * run_speed))){ // if mouse overhead, stop
    robot.style.backgroundPosition = "0px -50px";
    running_dir = ‘‘;
} else { // if mouse is to the right, run right
    running_dir = ‘r‘;
    run_r(1, robot.offsetLeft);
  }
}
                 
function jmp(up, top){
  running_dir = ‘‘;
  if (face_right){
    robot.style.backgroundPosition = "-160px 0px";
  } else {
    robot.style.backgroundPosition = "-160px -50px";
  }
 
  if (up && (robot.offsetTop > (20 * (1 / jump_height)))){
    top = top - (top * 0.1);
    robot.style.top = top+"px";
    jump_timer = setTimeout(function(){jmp(up, top);}, 60);
  } else if (up) {
    up = false;
    jump_timer = setTimeout(function(){jmp(up, top);}, 60);
  } else if (!up && (robot.offsetTop < 115)){
    top = top + (top * 0.1);
    robot.style.top = top+"px";
    jump_timer = setTimeout(function(){jmp(up, top);}, 60);
  } else {
    robot.style.top = "120px";
    if (face_right){
      robot.style.backgroundPosition = "0px 0px";
    } else {
      robot.style.backgroundPosition = "0px -50px";
    }
     
    jump_timer = false;
    if (mouseX !== undefined){
      if (((robot.offsetLeft + (15 * run_speed)) < (mouseX - robot.offsetWidth)) && running_dir !== ‘r‘){ 
        // make run right, if not already
        running_dir = ‘r‘;
        clearTimeout(run_timer);
        run_r(1, robot.offsetLeft);
      } else if ((mouseX < robot.offsetLeft - (15 * run_speed)) && running_dir !== ‘l‘) {
        // make run left, if not already
        running_dir = ‘l‘;
        clearTimeout(run_timer);
        run_l(1, robot.offsetLeft);
      }
    }
  }
}

(function (){
  if (stage.addEventListener){
    stage.addEventListener(‘touchstart‘, stage_mousemove_listener, false);
    stage.addEventListener(‘touchmove‘, stage_mousemove_listener, false);
    stage.addEventListener(‘touchend‘, stage_mouseout_listener, false);
         
    stage.addEventListener(‘mousemove‘, stage_mousemove_listener, false);
    robot.addEventListener(‘mouseover‘, robot_mouseover_listener, false);
    stage.addEventListener(‘mouseout‘, stage_mouseout_listener, false);
  } else {
    stage.attachEvent(‘onmousemove‘, stage_mousemove_listener);
    robot.attachEvent(‘onmouseover‘, robot_mouseover_listener);
    stage.attachEvent(‘onmouseout‘, stage_mouseout_listener);
  }
})();

function stage_mousemove_listener(e){   
/*
 * First we check if this is a touch screen device (if it has e.touches)
 */
  if (e.touches){
    e.preventDefault(); // we want to cancel what the browser would usually do if touched there
    // If the touch was within the boundaries of the stage...
    if ((e.touches[0].pageX > stageOffset.xpos) 
    && (e.touches[0].pageX < (stageOffset.xpos + stage.offsetWidth))
    && (e.touches[0].pageY > stageOffset.ypos)
    && (e.touches[0].pageY < (stageOffset.ypos + stage.offsetHeight))){
      // we set the mouseX to equal the px location inside the stage
      mouseX = e.touches[0].pageX - stageOffset.xpos; 
    } else { // if the touch was outside the stage, we call the mouseout listener
      stage_mouseout_listener();
    }
     
    /*
     * If the touch is directly on the robot, then we stop the run timer and make the robot jump
     */
    if ((e.touches[0].pageX > robot.offsetLeft) && (e.touches[0].pageX < (robot.offsetLeft + robot.offsetWidth))
    && (e.touches[0].pageY > (stageOffset.ypos + stage.offsetHeight - robot.offsetHeight))
    && (e.touches[0].pageY < (stageOffset.ypos + stage.offsetHeight))
    && (!jump_timer || jump_timer === undefined)){
      clearTimeout(run_timer);
      jmp(true, robot.offsetTop);
    }
     
  } else { // Finding the mouseX for non-touch devices...
    // All of our non-touch device code here
  }
}

#stage, .character {
  -webkit-user-select: none;
}

(function(){
  var j = RobotMaker(document.getElementById(‘j‘), 1, 1);
  var j2 = RobotMaker(document.getElementById(‘j2‘), .8, 5);
  var j3 = RobotMaker(document.getElementById(‘j3‘), 1.1, .5);
  var j4 = RobotMaker(document.getElementById(‘j4‘), .5, .75);
})();