Webサイトで動くアニメーションについて

解決済

回答数: 3

閲覧回数: 468

気になる

IURA

: すぐ知りたい！

サクサク動くアニメーションの作り方についてご相談です。
Webデザインにおいて、皆さんはどのようなツールでアニメーションを作成し、書き出していますか？
私は今回初めてAdobe Animate ccのHTML5 Canvasを使用してアニメーションを作りました。
作ったはいいですが、HTMLに配置すると動作が重く、複数配置もできませんでした。
GIFだと色数が多いとザギってしまい使えませんし、PNGアニメーションだとIEなどに対応していません。
よかったら皆さんのご意見を聞かせていただきたいです

2019年07月11日 18:00

ベストアンサーに選ばれた回答

ソラ君

ソラ君さんからの回答

ツールなんて使える物なら何でも良い。
mp4に変換して出力すればいいだけ。

動作が重ければFPS（Frames Per Second）を下げれば良い
一般的には60fpsだが、古いスマホなどを考慮するなら15～30fpsに下げれば良い

当然だけど、解像度が高いとそれに比例して画像が重くなる
640x480くらいにしておけば良いのでは？

動作確認はYouTubeなどに動画をUPして確認すれば良い。
YouTubなどの動画を利用するなら、そのまま利用すればよい。

Youtubeを利用しないなら確認がすめば削除すればいい。

2019年07月11日 18:59

IURA

相談者からのお礼コメント

＞ソラ君さん
詳しいアドバイスありがとうございます。
mp４という発想がありませんでした。
試してみたいと思います

2019年07月12日 09:51

すべての回答

ソラ君

ソラ君さんからの回答

2019年07月11日 18:59

ソラ君

ソラ君さんからの回答

YouTubeだと画像サイズは指定再生できるから、サイズ調整はそれですればよい。
FPSは書き出すAPPで設定すればよい。

ツールなんて関係ないので。　要は動画フォーマットがどうなっているか？　
それだけ。

2019年07月11日 19:04

shinkaku

shinkakuさんからの回答

「マルチメディア系」は20年昔の知識がベースですが。
パフォーマンス低下の一般的な要因となるのは
・フレームレートが高すぎる
・透過画像の使用
・エフェクトの多用
・オーバーレイの多用
・レイヤーが多すぎ
・ベジエ曲線ではなくビットマップイメージの多用
・グラフィックアクセラレーションの未適用
・イベントのループやネスト
・フォントのロード＆レンダリング負荷
・メモリリーク

などが考えられます

HTML5にパブリックしてパフォーマンス低下が顕著ならAnimate ccのせいかなぁ。。
単純なアニメーションを「手書き」のJSで比較してみればよいかも

2019年07月11日 22:32

Webサイトで動くアニメーションについて

ベストアンサーに選ばれた回答

すべての回答

回答受付中！

人気の相談

解決済みの相談