HTML5のcanvasを使用して、マウス座標からの直線を引くアニメーション【CreateJS】

P1030538_EDIT_TP_V

HTML5のCanvas機能を使用してマウスの座標から線を引くというアニメーションを作りました。

ただ、マウスから外側に伸びている線の速度が一定になりません。

キャッシュなどの問題なのでしょうか・・・?

右側の結果の場所にマウスをホバーしてみてください。

アニメーションの処理速度の問題からCreateJSを使用して同じ処理をする

上記の方法では処理落ちが発生してしまいアニメーションの速度が一定ではなかったのでCreateJSを使用し、同じアニメーションを実行することにしました。

マウスに追従する線が引けない問題

CreateJSでマウスに追従する線を引くのに苦労しました。 最初の方法では毎フレームカンバスをクリアしていたので問題なかったのですが、CreateJSではオブジェクトをremoveChildしてもインスタンスが残るので新たにnewする必要がありました。 毎フレーム新たなインスタンスを作成してることになりますが、問題ないのでしょうか? でもCreateJSでは4.0でメモリの扱いが変更したらしいのでガーベジコレクションに期待したいと思います。

See the Pen NrxYEp by Atushi (@Yoshikawa) on CodePen.

CreateJSで同じアニメーションを実装

結果、なんとか同じ処理をすることができました。

今回は簡単な実装ですが今後画像のアニメーションなども追加して装飾をしていきたいです。

シェアする

  • このエントリーをはてなブックマークに追加