create.js - beat

by uto usui

HTML

<div class="wrap">

  <h1>create.js</h1>
  <p>三角関数を使ったモーション<br>sin(angle)で-1〜+1の値を得る</p>
  <canvas id="myCanvas" width="250" height="250"></canvas>

</div>

SCSS

body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  font-family: Helvetica, 'Helvetica';
  text-align: center;
}

h1 {
  font-size: 42px;
  font-weight: bold;
  color: #32355a;
}

canvas {
  margin: 20px auto;
  border: 3px dashed rgba(#32355a, .55);
}

JavaScript

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 = 0.05;
      // 時間経過
      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;
    }