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

  • サイン波で作るリズムに脈打つ丸

window.addEventListener("load", init);

function init() {
  var stage = new createjs.Stage("myCanvas");
  //
  var ball = new createjs.Shape();
  ball.graphics.beginFill('#888888').drawCircle(0, 0, 30);
  ball.x = stage.canvas.width / 2; // 画面中央に配置
  ball.y = stage.canvas.height / 2;
  stage.addChild(ball);
  var angle = 0;
  var centerScale = 1.0;
  var range = 0.5;
  var speed = .1;
  // 時間経過
  createjs.Ticker.addEventListener("tick", handleTick);
  function handleTick() {
    // スケールを変化
    ball.scaleX = ball.scaleY = centerScale + Math.sin(angle) * range;
    angle += speed;
    stage.update();
  }
  createjs.Ticker.timingMode = createjs.Ticker.RAF;
}

share
ー

related
ー