requestAnimationFrameについて

前提・実現したいこと

丸の図形をタッチイベントで動かした通りに動かすアニメーションを作りたいです。（開始ボタンを押すと動く）

発生している問題・エラーメッセージ

requestAnimationFrameでアニメーションを作りたいのですが、難しくてできません。
touchMoveEventの座標を配列に納めました。
その座標の通りに動くよう操作できればいいのですが、、

該当のソースコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, height=device-height">
    <link rel="stylesheet" href="css/style.css">
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  </head>
  <style>
    .draggable-elem{
      width:30px;
      height:30px;
      border-radius:50%;
      background-color:blue;
    }
    .draggable-elem2{
      width:30px;
      height:30px;
      border-radius:50%;
      background-color:red;
    }
  </style>
  <body onLoad="init()">
    <div id="canvas-container">
    <canvas id="canvas" style="background-color:green;"width="100%" height="100%"></canvas>
    <div class="draggable-elem"></div>
<script>
  //画面サイズ
  var theCanvas = document.getElementById('canvas');
  function canvas_resize(){
    var windowInnerWidth=window.innerWidth;
    var windowInnerHeight=window.innerHeight/1.2;
    theCanvas.setAttribute('width',windowInnerWidth);
    theCanvas.setAttribute('height',windowInnerHeight);
  }
  window.addEventListener('resize',canvas_resize,false);
  canvas_resize();

  //サッカーコート
  var container = document.getElementById("canvas-container");
  var canvas = document.getElementById("canvas");
  var context = canvas.getContext('2d');

  //親要素のサイズをCanvasに指定
  canvas.width = container.clientWidth;
  canvas.height = container.clientHeight;


  function init() {
    // オブジェクトを描画
    drawRect();
  }

  function drawRect() {
    //色を指定する
    context.strokeStyle = 'rgb(255,255,255)'; //枠線の色は白
    context.fillStyle = 'rgb(00,00,255)';

    context.strokeRect(canvas.width/2.5, canvas.height/13.5,canvas.width/4.5, canvas.height/18.5);
    context.strokeRect(canvas.width/3.65, canvas.height/13.4,canvas.width/2.1, canvas.height/9);
    context.strokeRect(canvas.width/2.155, canvas.height/16.5,canvas.width/11, canvas.height/70);
    context.strokeRect(canvas.width/11, canvas.height/2.142,canvas.width/1.17, 0);
    context.strokeRect(canvas.width/11, canvas.height/13.5,canvas.width/1.17, canvas.height/1.241);
    context.strokeRect(canvas.width/3.65, canvas.height/1.3,canvas.width/2.1, canvas.height/9);
    context.strokeRect(canvas.width/2.5, canvas.height/1.195,canvas.width/4.5, canvas.height/23);
    context.strokeRect(canvas.width/2.155, canvas.height/1.135,canvas.width/11, canvas.height/70);
    //円弧
    context.beginPath();
    context.arc(canvas.width/1.94, canvas.height/5.4,canvas.width/10,Math.PI*1,Math.PI*2,true);
    context.stroke();
    context.closePath();

    context.beginPath();
    context.arc(canvas.width/1.94, canvas.height/1.3,canvas.width/10,Math.PI*1,Math.PI*2,false);
    context.stroke();
    context.closePath();
    //円
    context.beginPath();
    context.arc(canvas.width/1.95, canvas.height/2.13,canvas.width/7,0,Math.PI*2,true);
    context.stroke();
    context.closePath();
  }

  //タッチ
  function touchStartEvent(event) {
    // タッチによる画面スクロールを止める
    event.preventDefault();
  }

  var positionAry = [];  /* グローバル変数として宣言 */

  function touchMoveEvent(event) {
    event.preventDefault();
    // ドラッグ中のアイテムをカーソルの位置に追従
    var draggedElem = event.target;
    var touch = event.changedTouches[0];
    var positionMap = {};
    event.target.style.position = "fixed";
    positionMap.x = event.target.styleLeft;  // 左から何pxか
    positionMap.y = event.target.styleTop;   // 上から何pxか
    event.target.style.top = (touch.pageY - window.pageYOffset - draggedElem.offsetHeight / 2) + "px";
    event.target.style.left = (touch.pageX - window.pageXOffset - draggedElem.offsetWidth / 2) + "px";
    positionAry.push(positionMap);
 }
  // ドラッグ可能アイテムへのタッチイベントの設定
  var draggableItems = $(".draggable-elem");
  for (var i = 0; i < draggableItems.length; ++i) {
      var item = draggableItems[i];
      item.addEventListener('touchstart', touchStartEvent, false);
      item.addEventListener('touchmove', touchMoveEvent, false);
      item.addEventListener('touchend', touchEndEvent, false);
  }
  // ドラッグ可能アイテムへのタッチイベントの設定
  var draggableItems = $(".draggable-elem2");
  for (var i = 0; i < draggableItems.length; ++i) {
      var item = draggableItems[i];
      item.addEventListener('touchstart', touchStartEvent, false);
      item.addEventListener('touchmove', touchMoveEvent, false);
      item.addEventListener('touchend', touchEndEvent, false);
  }
</script>
</body>
</html>

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Lhankor_Mhy

2019/09/14 00:46

過去の質問が解決していないようですが、なにかポリシーがあって放置しているのですか？

yamagutikaito

2019/09/14 06:03

すみません、使い方がよく分かっておらず、、以前は参考にさせていただきました。ありがとうございます。

行動規範の内容に同意します

回答1件

簡単にサンプルを書いてみました。

サンプル

js
1var target = document.querySelector('.draggable-elem');
2var positionAry = [
3  {x:0, y:0},
4  {x:1, y:0},
5  {x:2, y:0},
6  {x:3, y:0},
7  {x:4, y:0},
8  {x:5, y:1},
9  {x:6, y:2},
10  {x:7, y:3},
11  {x:8, y:4},
12  {x:9, y:5},
13];
14var i = 0;
15
16function step(){
17  target.style.top = positionAry[i].y + "px";
18  target.style.left = positionAry[i].x + "px";
19  i++;
20  requestAnimationFrame(step);
21}
22requestAnimationFrame(step);