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('#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

lab