このページはJavaScriptを使用しています、ブラウザーの設定からJavascriptを有効にしてください。見ていて気持ちの良い動きのアニメーションコンテンツを作りたい。気持ちの良い動きにするには1秒あたりのフレーム数(絵の数)が大事だと思います。id=”title-02′′]アニメーションのFPS[/style-referencing-01]って幾つくらいに設定するのが適当なんでしょうか。id=”title-04′′]1秒間に24フレームに設定、現在公開しています。id=”title-05′′]パフォーマンスチェック[/style-referencing-01]を行いましたが、AndroidではFPSが14程度でしか動きませんでした。iPhoneはFPS24で動きました。別のアニメーションでiPhoneの方がFPSが下がったので得手不得手があるのでしょう。(OSでなくブラウザーの違いかもしれません)FPS24設定したFPSで動かないとコマ落ちしたアニメーションのようで見苦しい。ハードルを下げてFPSを12で動くように設定しましたが、アニメーションの動きが何かぎこちない。FPSが12では気持ちの良い動きにならない。何とかFPSが24で動くようにチューニングすることにしました。ここではFPSが24で動く為に行ったポイントを記載して行こうと思います。id=”title-06′′]コンテンツのイメージ[/style-referencing-01]はハワイアンのメロディーにのせてフラダンスを踊る女の子です。時間の経過を表現する為に雲を大きくしたり、ハワイらしさをだしたくてヤシの木を揺らしたりしましたが、まずはフラダンスをきちんと見せる事を優先して、時間の経過は空の色で、ヤシの木は揺らさない事にしました。日が暮れて夜空になると星がきらめき流れ星が見れます、とても重い処理なので女の子は座ってもらって動きを止めました。無数の星のきらめきをCreateJSのフィルターを使って表現しましたが、通常の処理では好調だったiPhoneが旧に重くなります、この処理はAndroidの方がFPSは良かったです。イラストのパスの数を減らす矩形や丸といった単純な図形は、直接CreateJSのGraphicsメソッドをコーディングしましたが、女の子やヤシの木といったイラストはソフトを使ってコードを書き出しました。CreateJS[/style-referencing-01]で書き出しました。Illustoratorでの作業の時に調子に乗ってパスを多く指定すると書き出されるCreateJSのコードが増え描写も重くなります。そこで見えない部分は省略し、カーブもなるたけ少ないパスで描くようにします。今回は女の子の髪の毛と腰蓑を簡略化して顔の輪郭も正円に近くしました。まとまった感じになったと思います。キャッシュを使って描写を軽減イラストの描画はCreateJSのShapeにGraphicsメソッドを使ってパスを指定して描画します。id=”title-08′′]キャッシュ[/style-referencing-01]する事で処理を軽減出来るようです。透過や位置の移動に関してはShapeにかけるので画像化しても有効なようです。空、芝生、ヤシの木、貝殻とヘッダー・フッターのイラスト等々、cache(キャッシュ)しました。cacheすると図形がにじむものもあるのでその都度調整します。これからスマートフォンでFPS24で動くのを確認出来ました、他にページが開かれていたり、アプリが起動しているとFPSが落ちるのでギリギリでしょうか。仕掛けを入れて行きたいのですが、入れすぎてFPSを落としてもしょうがないので程々にして、次のアニメーションコンテンツを考えて行きたいです。Skinner氏作成のJavaScriptライブラリー、野中文雄氏がサンプル付きで説明しています。–アニメから学ぶアニメーショントランジスタ・スタジオの森江康太氏のブログでアニメーションのFPSについての説明をされています。FPS12CreateJSを使用したアニメーションページのFPS12設定版です。現在はFPS24版を公開したので退避したコンテンツです。GIRLCreateJSを使用したアニメーションページのFPS24設定版です。見ていてリラックス出来るコンテンツをテーマにしています。パフォーマンスチェックをされる場合はパフォーマンスチェックからどうぞ。使い方メモパフォーマンスチェックにはMr.doob氏のStats.jsを使用しました。使い方は「tmlife.net」を参考にしました。r9で使用方法が変わった旨の記事(2012.04.29)が有りましたが、最新(r11)では再度戻っている気がするので古い方の記事をリンクしました。–gorieハワイの芝生でダンスをするイメージがあり、それっぽい素材がないかを探していたらガレッジセールのゴリさんの昔のPV「Mickey」がそれっぽかったので参考にしました。リンク先のYoutubeでは1分15秒辺りのシーンです。クラスメッソドの記事です。CCの人はこちらが参考になります。(第4回)cacheと描画の関係性について説明されています。cacheメソッドの基本的な使い方はActionScript入門WikiのEaselJS関係のページが参考になります。