jQueryやCanvasの登場によりアニメーションをつけることは一般的なものとなりました。しかし、スマートフォンのようにスペックの足りない端末ではアニメーションができないことがあります。しかし、一歩引いてみると解決策が見えてくることがあります。
軽量化を図る
軽量化をして解決できればそれが一番です。巷には「canvas アニメーション 軽量化」と検索すればそういった記事がゴロゴロしてるので一度見てみてください。
GIFアニメーションにする
アニメーションを撮影してGIFアニメーションにする、という荒技です。GIFアニメーションならスマートフォンでも容易に再生可能です。
ただし、いくつか注意すべき点があります。まず、文字関係のアニメーションには向きません。端末によってフォントが異なるからです。
リロードを頻繁に行うと画像が読み込まれず、アニメーションできない不具合が生じることがあります。現時点で私では解決できませんでした。プリロードしても変わらなかったので、画像を読み込んで置いてアニメーションする時に表示するようにするといった対策が必要です。
また、アニメーションの位置調節が面倒です。ずれると困る場合には使い勝手が悪いです。
終わりに
今回のアニメーションをjQueryからGIFにするという手法は集まった粒子が弾けるような感じの背景の演出がカッコイイ ウェブデザイン | 9ineBBで紹介されていたアニメーションがiPhone6ですら使えなかったことが元で考えたものです。粒子50粒ですら動かなかったのはビックリしました。応用力がある技術だと思うので是非ご活用ください。
