HTML5+javascript 动画基础（阅读笔记）

阅读更多

1.1.使用requestAnimationFrame的动画循环

(function drawFrame () {
  window.requestAnimationFrame(drawFrame,canvas);
  //animation code...
}());

1.2交互事件
1.2.1 鼠标常见的一些事件：
● mousedown
● mouseup
● click
● dblclick
● mousewheel
● mousemove
● mouseover
● mouseout
1.2.2 触摸事件
● touchstart
● touchend
● touchmove

1.3 获取位置
1.3.1 鼠标位置
鼠标事件的两个属性确定鼠标的当前位置：pageX和pageY。兼容属性clientX与clientY。
封装获取鼠标位值到函数utils.captureMouse中

utils.captureMouse = function(element){
  var mouse = {x:0,y:0};
  element.addEventListener('mousemove',function(event){
    var x,y;
    if(event.pageX || event.pageY){
      x = event.pageX;
      y = event.pageY;
    }else{
      x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
      y = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
    }
    x -= element.offsetLeft;
    y -= element.offsetTop;
   
    mouse.x = x;
    mouse.y = y;
  },false);
  return mouse;
}

1.3.2 触摸位置

utils.captureTouch = function(element){
  var touch = {x:null,y:null,isPressed:false};
  element.addEventListener('touchstart',function(event){
    touch.idPressed = true;
  },false);
  element.addEventListener('touchend',function(event)){
    touch.isPressed = false;
    touch.x = null;
    touch.y = null;
  }
  element.addEventListener('touchmove',function(event){
    var x,y,touch_event = event.touches[0];//first touch
    if(touch_event.pageX || touch_event.pageY){
      x = touch_event.pageX;
      y = touch_event.pageY;
    }else{
      x = touch_event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
      y = touch_event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
    }
    x -= offsetLeft;
    y -= offsetTop;
    touch.x = x;
    touch.y = y;
  },false);
  return touch;
};

2.1弧度与角度的转换

radians = degrees * Math.PI / 180;
degrees = radians * 180 / Math.PI;