[HTML]アニメーションボタン試作時の覚書

アニメーションボタン試作時の覚書

15年9月くらいに公開されたChrome45からFlashの動作がデフォルトOFFになった(Chromeがメインコンテンツと判断するものは除く)。
Webページ上に配置されたFlashで作成されたボタン(たいていそんなに大きいものではない)は軒並み動作を停止された状態で表示される(再生ボタンみたいなのがオーバーレイされる)。
Flashボタンに仕掛けられている簡単なアニメーション効果(キラキラ光ったりボタン内に矢印が出ては消えたりする)を別の方法で実現し、常に動作する形にするというのがお題。

GIFじゃだめなの

まずはGIFボタン化を検討するべし。無理ならJS等で頑張る

CSS3 or jQuery.animate

CSS3のtransform:scale3dプロパティ等を利用した方がアニメーションは滑らかな気がする。ただし、利用できないブラウザ・GPUをケアするためにjQuery.animateで書いた処理も分岐で用意する。

modernizr.js

CSS3 transform3dプロパティの利用可否の判定にはmodernizrを利用する。
ダウンロードページから

  • CSS Transforms
  • CSS Transforms 3D

をチェックして、「BUILD」を押してJSスクリプトを生成する。
スクリプトをHTMLから読み込むと、transform3dプロパティが利用できる環境の場合にhtmlタグにマーカークラスが付与される。
JSの処理内で以下の要領で確認できる。

アニメーションの逐次実行

前のアニメーション効果の終わりを待ってから次のアニメーションを実行したい。
→ jQuery.Deferredを利用する。

各アニメーション処理は、「jQuery.Promiseオブジェクトをリターンする関数」をリターンするようにする

アニメーション同士の連結は、deferred.pipeメソッドを利用する

各アニメーション処理から返却されたpromise()をpipe()でキューに入れて順次処理していくイメージ。
途中で待機処理なんかも挟んだりして。

※pipeはjQuery1.8未満のバージョンのメソッド。1.8以降を利用する場合は同等機能はdeferred.thenに置き換わっている。1.8以降もpipeはthenのエイリアス的に利用できるので、古いバージョンで動かすことも考えてあえてpipeにしておく。

待機処理はsetTimeout使ってこんな感じか。

※jQuery.delayも利用検討する?要素に対する次の処理の待機って形になるので今回の用途的には使い勝手悪そう。

その他

空要素のwidthを有効にする

横に並んだ画像を左から順にフェードアウトする際に、画像をdisplay:noneすると親要素のwidthが効かなくなった?
結果まだ表示している画像が左に詰めてしまい思った動きにならない。子の画像がdisplay:noneになっても親要素は幅を保っておいて欲しい…。

→ 親要素に min-height: 1px; 指定しておけばOK

参考:How to make a DIV with no content have a width?

IE8対応

地獄のIE8対応も覚悟しておく。
画像をフェードアウトする系のアニメーションを実行する際に、IE8だと画像周りに黒い枠が出て汚くなるのをどうにかしたい。IE8以下で透過PNGを扱う場合はAlphaImageLoaderフィルターを利用する必要があるそうだ。

参考:IE8アニメーションの、opacityに関する備忘録

以下のようなスクリプトをページ読み込み時に実行しておくことでケアできそう。


コメントを残す