×
  1. Webサイトで動くアニメーションについて
みんなのお仕事相談所
受注者からの相談
Webデザインに関する相談

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

解決済
回答数
3
閲覧回数
118
すぐ知りたい!  : すぐ知りたい!

サクサク動くアニメーションの作り方についてご相談です。
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
相談者からのお礼コメント

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

2019年07月12日 09:51

すべての回答

ソラ君さんからの回答

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

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

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

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

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


2019年07月11日 18:59
ソラ君さんからの回答

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

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

2019年07月11日 19:04
shinkakuさんからの回答

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

などが考えられます

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

2019年07月11日 22:32
ご意見箱

× 今後表示しない