2,383 views

この記事は最終更新から 929日 が経過しています。

前回の (22) CREATEJSでアニメーション (#1) を改造し、マウスの動きにボールを追従させてみる。

実行サンプルはこちらです。

■プログラム

プログラムの変更箇所は１関数だけ。

test.js

CjTest::moveBall()内に記述している移動先座標の算出処理をまるまる変更する。
便利なことに、stage内に入ったカーソルポインタの座標が stage.mouseX, stage.mouseY に格納されている。ボールはこの座標を目指して1回のtick関数実行時に
　カーソルポインタまでの距離 x 0.1 [pixel]
だけ移動させる。カーソルポインタまでの距離が短くなると 1回の移動距離も短くなり、まるで加速度がついているように見える。

moveBall: function(){
  this.sprite.x += (this.stage.mouseX - this.sprite.x) * 0.1;
  this.sprite.y += (this.stage.mouseY - this.sprite.y) * 0.1;
  this.stage.update();
}

実行サンプルはこちらです。
何だかペットのようでかわいいｗ

追記 : 2022年2月28日

もっと簡単に実装できる方法をこちらに記しました。こちらの方がよいかもしれない…
(114) CSSの translateで要素を動かすアニメーションができる。