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


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

こんにちは、おじいちゃんです。

今回はCSS、canvas、SVGで円周上をアニメーションさせる方法をいくつかご紹介したいと思います。

CSSでアニメーション

CSSで円に沿ったアニメーションを実装したい場合、transformのrotationを使用することでアニメーションさせることができます。

transformのrotationを使った回転方法

transformのrotationは、要素を回転させることができるプロパティです。

入れ子の構造を持った親のDOMに使用することで、円周に沿ったアニメーションを作ることができます。

HTML

<html>
<div class="box">
  <div class="circle"></div>
</div>
</html>

CSS

.box{
  width: 320px;
  height: 100px;
  margin: 230px auto 0;
  background-color: rgba(200,200,200,0.2);
  position: relative;
  transition: 1.4s all;
}
.circle{
  width: 10px;
  height: 10px;
  border-radius: 5px;
  position: absolute;
  top: 50%;
  left: 30px;
  transform: translateY(-50%);
  background-color: red;
}
.rotation{
  transform: rotate(360deg);
  transition: 1.4s all;
}

わかりやすく入れ子の親要素に背景色をつけています。赤い円の軌道を見れば、回転しているアニメーションを実装できることがわかりますね。

sample01

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に詳しく説明されています。

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

SVGでアニメーション

SVGで円周上をアニメーションさせるには、パスでcircleを描画して、そのパス上の値をモーションパスさせます。

モーションパスについては以前に記事を書いているので、下記を参考にしてみてください。

まとめ

以上になります。

「円周上に沿ったアニメーションさせたいけど、どれ使って何したらええねんー!」という方のお助けになれたら幸いです。

ほな、さいならー。

この記事を書いた人

おじいちゃん
おじいちゃん フロントエンドエンジニア 2014年入社
フロントエンドエンジニアのおじいちゃんと言います。本当は24歳です。よろしくお願いします。