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

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

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

related