webmanab.html

menu

三角関数(sinθ)を使った丸のモーション -『Create.js』　

　

demo

  • サイン波に沿って丸を動かす

window.addEventListener("load", init);

function init() {
  var stage = new createjs.Stage("myCanvas");
  //
  var ball = new createjs.Shape();
  ball.graphics.beginFill('#aaaaaa').drawCircle(0, 0, 30);
  stage.addChild(ball);
  var angle = 0;
  var centerY = 100; // 中心座標
  var range = 50; // 変化幅
  var xSpeed = 1;
  var ySpeed = 0.05;
  // 時間経過
  createjs.Ticker.addEventListener("tick", handleTick);
  function handleTick() {
    ball.x += xSpeed;
    ball.y = centerY + Math.sin(angle) * range;
    angle += ySpeed;
    // 画面端
    if (ball.x > stage.canvas.width) {
      ball.x = 0;
    }
    stage.update();
  }
  createjs.Ticker.timingMode = createjs.Ticker.RAF;
}

share
ー

tag
ー

related
ー

lab