monacaでエフェクトやアニメーションを作りたい

Question

お世話になっております。

平面上で、自分が作ったキャラクターが動いたり、
最近のデザインに多いヌルッとしたエフェクトやアニメーションを作るようにするには何の言語でどのようにすればできますでしょうか？

HTMLとCSSしかできないプログラミング初心者ですが、自分で作ってみたいので、
どんなことでも構いませんのでアドバイスをいただければと思います。

よろしくお願いいたします。

Answer 1

monacaというよりはJavaScriptの話になりますね。
CSSでもある程度のアニメーションはできますが、
それを「ユーザーがクリックしたとき」とか「フォームを送信したとき」みたいに、
なにかのイベントをきっかけにして実行するためにはJavaScriptが必要になってきます。

jQueryのライブラリがいろいろあるので、自分のやりたいことと近いことができるライブラリを実装するのが手っ取り早いですが、勉強のためにある程度自分でJavaScriptを書いてみるのもいいかもしれません。

自作のキャラクターなどを動かしたいという場合は、canvasを利用したり、
3DならWebGL（jThreeとか）、Three.jsなんかを使ったりします。

Googleのマテリアルデザインみたいなものがよければmaterializeというフレームワークもあります。

Comments

[退会済みユーザー]

ご丁寧にありがとうございます！！

キャラクターは画像で用意してあるのですが、その場合もJavaScriptやjQueryなんでしょうか？

[NatsumiOki]

画像ですか。規則的に動かすだけならCSSでできなくもないですが、いずれにしてもimg要素か、または背景画像をつけたdivなどを動かすことになるとおもうので、複雑な動きをさせるならJavaScript（jQuery）が必要になってきます。

ゲームみたいに決まった画面の中で動かすなら、canvasを利用して領域を作り、JavaScriptで操作したりしますね。

[退会済みユーザー]

なるほど、やってみます！！
とても参考になりました、ご丁寧にどうもありがとうございました！！m(._.)m

Answer 2

エフェクトやアニメーションを作るようにするには
何の言語でどのようにすればできますでしょうか？

静的なアニメならCSSでもできる場合がありますが、
動的、つまりユーザの操作に対応して動かすには力不足です。

「Monaca」で作るなら「HTML5ハイブリッドアプリ」ですが、
そこでは選択の余地がほぼなく、「JavaScript」一択です。
しかし、このJavaScriptのライブラリは百択です。

まあ「jQuery」が一番無難で潰しが利くと思いますが、
たとえばゲームならゲームに特化したライブラリがあるので、
自分の作りたいジャンルに合わせて選択してください。

たとえれば、ラーメンに麺があるのは一択だけど、
具やスープで差別化している「ラーメン戦争」みたいな状況です。
だいぶアプリの味が違って来るので、ライブラリは模索してみてください。