ガジェット通信

見たことのないものを見に行こう

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

DATE:
  • ガジェット通信を≫

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

今回は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;
}

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

canvasでアニメーション

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

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

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

上記の図からわかるように円周上を回転させる場合は、赤い円を青い円の破線上をアニメーションさせればいいわけですね。つまり青い円上の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();

SVGでアニメーション

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

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

まとめ

以上になります。

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

ほな、さいならー。

カテゴリー : 生活・趣味 タグ :
LIGの記事一覧をみる ▶
  • 誤字を発見した方はこちらからご連絡ください。
  • ガジェット通信編集部への情報提供はこちらから
  • 記事内の筆者見解は明示のない限りガジェット通信を代表するものではありません。

TOP