【JavaScript動畫基礎】學習筆記（一）-- 旋轉箭頭

隨着鼠標的移動旋轉箭頭。

requestAnimationFrame

在requestAnimationFrame以前咱們能夠用setInterval來實現動畫的循環：

  function drawFrame(){
       ball.x+=1;
       ball.draw(context);
     }
     window.setInterval(drawFrame,1000/60)

而html5中增長了window.requestAnimationFrame，它接收一個回調函數，確保在重繪前執行該函數，第二個參數能夠指定一個html元素做爲動畫的執行區域。能夠這樣調用：

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

}());

旋轉：

旋轉的根本在於求出鼠標位置相對於箭頭中心座標的角度：

求出dy的對角就能肯定旋轉的角度，而dy和dx構成了tan，能夠經過反正切函數獲得，JavaScript提供了兩個反正切函數，一個是Math.atan,一個是Math.atan2,區別以下。

atan接收一個參數，獲得弧度，atan2接收兩個參數，分別是對邊y和底邊x。

因而獲得代碼：

      window.onload=function(){
       var canvas=document.getElementById('canvas'),
       context=canvas.getContext('2d'),
       mouse=utils.captureMouse(canvas),
       arrow=new Arrow();
       var arrow1=new Arrow();

       arrow.x=canvas.width/3;
       arrow.y=canvas.height/2;
       

       arrow1.x=canvas.width/1.5;
       arrow1.y=canvas.height/2;
       

(function drawFrame(){
 window.requestAnimationFrame(drawFrame,canvas);
 context.clearRect(0, 0, canvas.width, canvas.height)
 var dx=mouse.x-arrow.x; 
 dy=mouse.y-arrow.y;
 arrow.rotation=Math.atan2(dy,dx);
 arrow.draw(context);

 var dx1=mouse.x-arrow1.x;
 dy1=mouse.y-arrow1.y;
 arrow1.rotation=-Math.atan2(dy,dx);
 arrow1.draw(context);

}());

     }

captureMouse：

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

View Code

箭頭：

function Arrow () {
  this.x = 0;
  this.y = 0;
  this.color = "#ffff00";
  this.rotation = 0;
}

Arrow.prototype.draw = function (context) {
  context.save();
  context.translate(this.x, this.y);
  context.rotate(this.rotation);
  
  context.lineWidth = 2;
  context.fillStyle = this.color;
  context.beginPath();
  context.moveTo(-50, -25);
  context.lineTo(0, -25);
  context.lineTo(0, -50);
  context.lineTo(50, 0);
  context.lineTo(0, 50);
  context.lineTo(0, 25);
  context.lineTo(-50, 25);
  context.lineTo(-50, -25);
  context.closePath();//完成軌跡
  context.fill();//填充
  context.stroke();//畫出邊線
  
   context.restore();//使得canvas原點回到save以前
};

View Code