JavaScriptで円運動

  • Updated: 2023.07.04
  • Published: 2022.12.14
  • 800views
  • JavaScript

概要

JavaScriptで円を描くように要素が移動するアニメーションを実装します。


サンプル


ソース

<div class="circular-motion">
  <div class="circular-motion-center">
    <div class="circular-motion-circle"></div>
  </div>
</div>
.circular-motion{
  background-color: #000000;
  aspect-ratio: 1/1;
  position:relative;
}
.circular-motion-center{
  position:absolute;
  left:50%;
  top:50%;
}
.circular-motion-circle:after{
  content:"";
  display:block;
  width:20px;
  height:20px;
  border-radius:50%;
  background-color:#f00;
  transform:translate(-50%,-50%);
}
window.addEventListener('load',function(){

  let deg =  0;
  let r = 100;

  let $circle = document.querySelector('.circular-motion-circle');

  function onresize(){
    let $bg = document.querySelector('.circular-motion');
    r = $bg.getBoundingClientRect().width/2 * 0.7;
  }

  function anim(){
    let x = Math.cos(deg * Math.PI/180) * r;
    let y = Math.sin(deg * Math.PI/180) * r;
    $circle.style.transform = `translate(${x}px,${y}px)`;
    deg+=3;
    requestAnimationFrame(anim);
  }

  window.addEventListener('resize',onresize);
  onresize();
  requestAnimationFrame(anim);

});

解説

let x = Math.cos(deg * Math.PI/180) * r;
let y = Math.sin(deg * Math.PI/180) * r;
$circle.style.transform = `translate(${x}px,${y}px)`;

x軸はCOSカーブ、y軸をSINカーブで実装します。degは角度、rは半径になります。

関連記事

人気の投稿

最新の投稿

タグ

月別アーカイブ

Contact

WEB制作の依頼など気軽にお問い合わせください。

お問い合わせ