質問: パチスロのようにボタンを押すとスロットが回転し、再度ボタンを押すと止まるゲームを作成中です。 スロット部分に関しては上から下に流れるように、スロットの目を複数用意してそのラッパー要素のtop値をjqueryのanimationで動かしコールバック関数でラッパーの高さだけtop値を戻して、あたかも無限に回っているようにしています。 ですがcpuに頼る描画のせいかどうしても動きががくつきます。とくにtop値を戻すときが悪いです。 なのでgpuに頼ろうとtranslateYを使おうと思うのですが、jqueryのanimationでは操作できない?ようなので構成に戸惑っています。 何かよい作り方はないでしょうか?
回答: 携帯電話からなのであまり書けませんが、CSSアニメーションを駆使すれば出来ると思います。transitionというプロパティを使うとアニメーションの時間を決めることが出来ます。例えば、transtion: 3s;のときtransform: translateY(0px);をtransform: translateY(300px);にすると、3秒かけて滑らかに0pxから300pxまで移動します(アニメーションの種類はtransition-timing-functionで変えられる)。また、繰り返しについてはanimation-itaration-count: infinite;で無限に繰り返すことが出来ます。 これらのアニメーションの開始・終了をJavaScriptで制御すれば滑らかなスロットになると思います。その際のjQueryについては...toggleClass()とかが便利でしょうか。 アニメーションについて詳しく知りたい場合はcssアニメーションで検索してみてください。