CSS、canvas、SVGで円周上をアニメーションさせる方法

おじいちゃん

2015.08.10

Web制作

canvasでアニメーション

canvasを使って円を沿うアニメーションの実装する方法です。

まずは円に沿ったアニメーションを実装させたい場合、どのような考え方、計算をすればいいのかをご紹介します。

回転させたい要素を赤い円、回転させたい軌道を青い円の破線にして何を計算すべきか見てみましょう。

sample03

上記の図からわかるように円周上を回転させる場合は、赤い円を青い円の破線上をアニメーションさせればいいわけですね。つまり青い円上のx座標とy座標を取得する計算式を考えれば、アニメーションさせることができます。円周上のx座標とy座標は、三角関数を利用することで計算ができます。

また、円周上のx座標とy座標は、円のx座標（cosθ）とy座標（sinθ）を計算することができます。

JavaScriptにはsin,cosを計算できるMath.cosメソッド、Math.sinメソッドがあるので、それらを利用して引数にラジアンを渡すことでx座標とy座標を取得することができます。上記メソッドに渡す場合、角度ではなくラジアンを渡す必要があります。
角度をラジアンに変換するには下記の計算が必要になります。

角度をラジアンに変換角度 * (Math.PI / 180)

x座標を取得する Math.cos( 角度 * (Math.PI / 180))

y座標を取得する Math.sin( 角度 * (Math.PI / 180))

取得したx座標、y座標に任意の円の半径をかけることで、描きたい円の軌道をアニメーションさせることができます。

三角関数については下記URLに詳しく説明されています。

東大生が教えるビジュアル数学
http://www24.atpages.jp/venvenkazuya/math1/trigonometric_ratio1.php

var winW = window.innerWidth;
var winH = window.innerHeight;

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var degree = 0;     //中心点からの角度
var drawRadius = 10;   //動かしたい円の半径
var moveRadius = 100;	//動いてもらいたい円の半径

canvas.width = winW;
canvas.height = winH;

var CENTER_X = 200;
var CENTER_Y = 200;

function loop(){

  ctx.clearRect(0,0,winW,winH);
  
  ctx.fillStyle = '#FFFFFF';
  ctx.fillRect(0,0,winW,winH);
  ctx.beginPath();
  ctx.moveTo(CENTER_X,CENTER_Y);		
  
  //x座標とy座標を計算
  var x = Math.cos( Math.PI / 180 * degree) * moveRadius + CENTER_X;
  var y = Math.sin( Math.PI / 180 * degree) * moveRadius + CENTER_Y;
  
  ctx.arc(x,y,drawRadius, 0 * (Math.PI / 180), 360 * (Math.PI / 180),true);
  ctx.fillStyle = '#FF0000';
  ctx.fill();
  ctx.closePath();
  degree++;
  
  window.requestAnimationFrame(loop);
}
loop();

sample02