CSSアニメーションをAdobeEdgeAnimateでも作ってみた感想

この間お話しさせてもらった Creators MeetUp でアニメーションのデモを作ってみたんですが、ボールがポンポン跳ねるのが割と気持ち良かったので、じゃあせっかくだし最近気になってる Adobe Edge Animate を使って同じものをつくってみたらどうだろうね、作りやすさ・動きがどう違うのかなぁと思ったのでとりあえず作ってみました。

cssアニメーション版についてはこちらです。

• Creators MeetUpでCSSアニメーションについて登壇しました

デモ2パターン

• cssアニメーション版
• Adobe Edge Animate版

作ってる途中に体調が悪くなったりして一週間くらい寝込んだりしたんですけどとりあえず何とか Edge Animate に慣れる事は出来たかなぁという印象です。というかアニメーションの作り方は基本的にFlashと一緒かなぁ、と。Flashあんまり触ったことないけど。

作り方はとりあえずそんなに変わらないんですけど、何て言うんでしょ、完成度はまだやっぱりそんなに高くはないかなぁとも思いました。Edge Animateは初めて触ったアプリだしまだベータ版なはずだし、まぁとりあえず試してみるか的な感じだったんでもしかしたら僕がちゃんと理解していないだけなのかも知れませんが、とりあえずやはりFlash程の作りやすさにはまだまだ達していないかなぁという印象でした。

動きの違いについて

両者ともマウスホバーイベントでアニメーションを開始するようにしてるんですが、cssアニメーションの方がEdge Animetaよりも感度が良い気がします。この辺は調整のしようがあるのかどうかも今はよく分かっていません。

この辺はスクラッチで各CSSアニメーションだと調整も自分でやれる事が多いけど、オーサリングツールだとどう書かれているかを把握しづらいから調整もしづらいようになるのかなぁと思いますね。

作り方の違いについて

Edgeで作る場合、Flashを使ったことがあるか否かで随分変わってくると思いました。AfterEffectsに似ているインターフェイスだと言っていた人もいましたが、僕はAfterEffectsは触ったことがないので分かりません。

今回みたいに同じ動きをするオブジェクトを複数置く場合は、Flashのようにアニメーションを設定したオブジェクトを一つ作って、それをシンボル化して、シンボルのインスタンスを複数配置する、といった使い方になるんじゃないかと思います。

シンボル化に関してはcssでも同じクラスをつければ同じ動きをするので、どっちが良いかって程でもないかなぁと思いますね。

あ、そういえば「シンボルのインスタンスを個別に色変更する」って事ができなかった気がします。これ結構しんどいんじゃないかなぁと思いましたよ。というかほら、僕のイメージだとシンボルってオブジェクトなんじゃないかと思っていて、JSのオブジェクトは継承って出来るんですよね？ネイティブで備えてはいないって聞いた気がしますけど、何かそういう「敵オブジェクトの派生でクリボーオブジェクトとノコノコオブジェクトがあって、敵である共通点とふまれたら死ぬという共通点があるんだけど動きとデザインは違う」みたいなことが出来れば良いのになぁ、多分出来た方が良いんじゃないかなぁと思ったんですがどうですかね。canvasには関係ないの？よく分かんない。

あと、アニメーションの作り方に関してはやっぱりFlash同様のタイムライン画面でGUI操作（って言います？）が出来るのは凄くやりやすいです。

CSSはどうしても「何秒かけてアニメーションさせるか」という設定に対して何％の位置でどう変化させる、みたいな指定になるので微調整が死ぬほど面倒です。

cssはこんな感じ

css
@-moz-keyframes anime-ball {
  0%   { margin-top:0;}
  10%  { margin-top:26px; -moz-transform: scaleY(0.7);}
  50%  { margin-top:-100px; -moz-transform: scaleY(1);}
  100% { margin-top:0; }
}

Edge Animate はこんな感じ

調整するのも実際に動いているアニメーションの作りやすさはやっぱり Edge Animeta が数段上手だな、と思います。

で、どうなの？

んと、アニメーションを作る場合は凄く作りやすいです。作りやすいというか、動く物体が目の前にあって、その物体をマウスで移動させたりしてアニメーションを作れるというアドバンテージが覆ることは多分ないでしょう。スクリプト関連が苦手な人であればあるほどです。

たとえスクリプトが得意でもどっちの方が作りやすいかと言われてCSSを直に書く方が楽というケースはそんなにないでしょう。

ただ、やっぱりどうしても完成度の低さは否めないかなぁと思います。さっきも言いましたが、マウスホバーの感度の上げ方がもう一切分からないですしね。そういった細かい調整はどうすれば良いんでしょうね。 Edge Animate 上でどうにかなるんでしょうかね。分かりません。

あとはまぁ、そもそも現時点でcanvasを使ったアニメーションがどれだけ有効か、ってお話しでもありますしね。IE8まで切るケース、もしくはAndroidをほぼ切り捨てられるってどんなんだよｗと思いますし。まだcssとJSで、jQueryでも使って何とか実装していく方が今のところは良いんじゃない？と思います。良いというのは「恐らくその方がトラブルが少ない」って意味ですけどね。

でもじゃあ何で作ったかというと、やっぱり未来はそっちの方向なんじゃないかと思うのと、選択肢は多いに越したことはないと思ったからで、いや9割以上は単なる興味ですけどね、そんな感じだと思って色々触ってみようかなぁという感じです。

最後ですが、一応 Edge Animate のファイル一式もアップしておきますね。これもFlashみたいに .fla 1ファイルだけでまとめる、みたいな事してくれれば良いのになぁと思いますね。

• Edge Animate ファイル一式

というわけで、結論としては Edge Animate もcanvasもWebでのアニメーションも、全部ひっくるめて今後が楽しみだなぁという感じです。では。