-
ID:yGUvzA さんの質問

クラウド上のアニメーション作成サービスを作るとしたら、フロントのアニメーション部分や描画部分はSVG(DOM)、Canvasどっちをあなたなら採用しますか?どっちでも大丈夫なのかな。既存のものはまだFLASHだったりするけど、これから変わっていくのだろうか。

みんなの回答 4 件

ID:X0pxkC さんの回答

クラウド上のアニメーション作成サービス⇒?
既存のものはまだFLASH⇒どれのこと?
ちょっと疑問多くて何が聞きたいのか明確に分からないけど、下記URLはSVGとCanvasの比較として超参考になる。

SVG と Canvas: どちらを選ぶか (Windows)

https://msdn.microsoft.com/ja-jp/library/gg193983(v=vs.85).aspx
ID:8VPou8

例えば、Goanimate.comですね。
その記事は前に読んだことはあります

ID:X0pxkC

WEBアプリのパフォーマンスを上げるのはCanvasで作った方が良さそうだけど、SVGで作った方がマウス操作・CSSなどWEBの知識そのまま使えるので簡単。

ID:8VPou8

ベクターグラフィックを扱うところがポイントになると思ってますが、canvasを採用することでどういったデメリットがGoanimateのようなものを作るときにどんな範囲で起きるかわかりますか?

ID:yGUvzA

>既存のものはまだFLASH⇒どれのこと?
検索して見つかる既存の類似サービス全てです。(例)goanimate, powtoon, moovly, swish max.
逆にFLASHでないものがあるというなら、参考にしたいので教えていただきたいです。

ID:fDU5Gd さんの回答

言っている意味は分かんないけど、ターゲットありきだから、まずそこを設定しなさい。

ID:8VPou8

ターゲットはおれです。自分が使うので。
イメージとしては、Goanimate.comです。

ID:fDU5Gd

ますます意味分からんわ。エンドユーザーはだれって話だろうに。

ID:8VPou8

逆にcanvas、svgの選択において、ターゲットが誰かってどういうところで関係しますかね?

ID:fDU5Gd

あ、言い方がわかりにくかったね。ターゲットにする端末・ブラウザ(バージョン)ってことだね。何に関係するかは分かるよね?

ID:8VPou8

pcのchromeブラウザで動けばオッケーです。

ID:fDU5Gd

例に上げた簡素なアニメーションでchrome固定ならsvg一択でしょ。悩むこと何もない。

ID:8VPou8

主張に理由も添えて欲しいです。理由は何ですか?

ID:fDU5Gd

svgには、最初からイベントが含まれているので、それを利用するだけ。簡単。コスト安。
chrome一択なら普段使えないcss(blend mobdeなど)やsvgアニメーションを惜しまず使えるので、やはり表現にかかるコストが少ない。
パフォーマンスを究極まで追求するならcanvasだと思うけど、書かれたプログラム次第の部分が大きいので、svgの方が手間なく一定のパフォーマンスを得られやすい。
反面、用意されている機能以上のことはやはりjsが必要になるので、あるラインを超えると、かえってコストが高くなる。

ID:8VPou8 さんの回答

あげまーす

ID:f5iRzu さんの回答

Goanimate.comのトップで出てくるイラストみたいのだったらSVGでしょ
こういうのcanvasでやれないでしょ

ID:yGUvzA

なんとなく言いたいことはわかるような気はするのですが、具体的にはどういった意味でしょうか?ベクターグラフィックを扱うならSVGと言っているのか、goanimateのトップのイラストそのものを描くならSVGである必要があると言っているのか、口をパクパクさせるとか、手を動かすようなアニメーションをさせるならSVGと言っているのか。「canvasでやれないでしょ」という付け加えがあるので、ちょっと混乱しました。

ID:f5iRzu

あ、そういうことです。canvasは幾何学的なものをダイナミックに動かすとかのエフェクト系は強いけど、イラスト的なものは難しいと思う。たぶん。
イラストのアニメーションとなると以前のFlashと同じでブロックに分けて動かす感じになるのかなと。ただsvgのcssやSMILでの操作はクロスブラウザ考えたらかなり限定的なのでJSで動かすことになる。下はSVGで使えるライブラリです。
ttp://greensock.com/examples-showcases
ttp://snapsvg.io/demos/

最終更新日:2016-08-28 (1,592 views)

関連するトピックス

ページ上部に戻る