フォームの枠や要素自体を滑らかに点滅!指定数繰り返し行う方法



要素自体の点滅を指定回数分繰り返しアニメーションを行う方法や、
フォーム等の要素において、枠の部分の影を滑らかに表示・非表示させるアニメーションの
実装方法をサンプルコードを交えて解説します。

JavaScript部分の実装では、ネイティブなJavaScriptに加え、jQueryを使用した
記述もあります。

サンプルはユーザ定義関数として実装されていますので、
そのままコピペで使うか、ご自身のライブラリに組み込む等してお使い下さい。

  1. 要素自体を指定回数点滅させよう
  2. テキストフォーム等の枠(輪郭部分)を点滅させよう


要素自体を指定回数点滅させよう。




要素を点滅させるアニメーションの実装方法を解説します。
今回のサンプルでは、点滅アニメーションを行う回数や
一回のアニメーションにかかる時間を指定する事が出来ます。
そのままコピペでもお使い頂けますし、
グローバル領域に値を置いている関係上、
何か弊害がありそうであればオブジェクト化して
ライブラリとしてもお使い頂けます。

今回は、シンプルに点滅アニメーション処理を
jQueryを使用しながら実装していきます。


JavaScriptの実装を見る前に、実際に呼び出す側の処理を見て行きましょう。


点滅


上記の例では、DIVのボタンに対して直接『onclick』イベントを指定し、
『flashing()』という関数を起動しています。

この『flashing()』が今回実装する点滅アニメーションのエントリーポイントです。
引数に与えるのは、
第一引数には点滅対象の要素、
第二引数に点滅回数、
第三引数には一回の点滅に掛かる時間をミリセックにて指定します。

勿論、HTMLから直接起動するのではなく、JavaScript起動する場合は
対象要素を単純に『this』とするのではなく、jQueryJavaScriptのDOM取得等で
要素自体を渡す必要があります。

また、後に解説するサンプルでは、第一引数に渡す要素は
要素を表すセレクタでも問題ありません。
例えば、指定のIDを持った要素を指定したいのであれば、
『flashing("#target_element",5,100)』でも問題ありません。


さて、それでは実際のJavaScriptの処理『flashing()』の中身を見て行きましょう。



/* 要素の点滅
-------------------------------------------------------------------------------*/
// 点滅回数
var flashing_num = 0;

// アクションを繰り返す為のタイマー
var flashing_timer;

// 要素の点滅エントリーポイント
function flashing( el_, num_, speed_ )
{
 // タイマーをクリア
 clearTimeout(flashing_timer);

 // 点滅回数を退避
 flashing_num = num_;

 // 点滅アクションを起動
 flashingAction( el_, speed_ );
}
// 実際の点滅アクション
function flashingAction( el_, speed_ )
{

 // 点滅対象の要素を退避
 flashing_element = el_;

 // 点滅スピードを退避
 speed = speed_;

 // 残り点滅回数のチェック
 if( flashing_num <= 0 ) return;

 // 点滅回数をデクリメント
 flashing_num--;

 // 実行中アニメーションを停止
 $(flashing_element).stop();

 // 透明度の初期化
 $(flashing_element).css({opacity: '1.0'});

 // フェードアウトアニメーション
 $(flashing_element).fadeOut( speed, function(){

  // コールバックでフェードイン
  $(flashing_element).fadeIn(speed, function(){

   // 繰り返すためにタイマーをセット
   flashing_timer = setTimeout('flashingAction(flashing_element,speed);', 1);
  });
 });
}



実際に点滅させる為に直接呼び出す関数は『flashing( el_, num_, speed_ )』です。
関数内では、『clearTimeout()』にてタイマーを解除し、
引数で与えられた点滅回数をグローバルに保持します。
そして、実際に点滅の動きを行う関数『flashingAction( el_, speed_ )』へ
点滅させる要素と点滅スピードを引数として渡して起動します。

実際の点滅処理を行う『flashingAction( el_, speed_ )』内では
jQuery内のコールバックでも同じ値を簡単に参照出来る様に
点滅対象の要素と点滅スピードをグローバルに退避させています。

そして、ある意味タイマーにて再帰的な処理を行う為、
残りの点滅回数をチェックし、残りの点滅回数が残っていなければ
即座に『return』して繰り返し処理を終了しています。

繰り返し回数のチェックを通過すると、繰り返し回数をデクリメント(一つ減らす)し、
実行中のアニメーションを停止します。
この『実行中のアニメーションを停止』を行わないと、
点滅繰り返し中に点滅リクエストをもう一回投げた時に
アニメーションが重複してしまって挙動が不安定になります。
一回リセットする意味でも、アニメーションを『.stop()』にて停止させましょう。

アニメーションはフェードアウトから開始します。
その為、完全に不透明をスタート地点としたい為に
透明度を『1.0』で初期化しています。


続いて、いよいよアニメーション部分です。
フェードアウトアニメーションには『fadeOut()』を使用し、
引数として退避しておいた点滅スピードとコールバックの無名関数を渡します。

フェードアウトアニメーションが、渡された点滅速度で実行され、
アニメーションが完了したら渡されたコールバックが起動されます。

コールバック内では、逆に『fadeIn()』を行います。
引数の渡し方は『fadeOut()』と同じです。

ココまでで一回のフェードアウト・フェードインを行いますので、
一回だけ滑らかに点滅します。

今回の実装例では、複数回繰り返す事が可能ですので、
フェードインのコールバックとして、再度同じロジックを走らせる様に
『setTimeout()』にて『flashingAction(flashing_element,speed);』を実行させましょう。
繰り返しリクエストが来た時にタイマーをクリアする為に、
作成したタイマーはグローバルに退避しておきます。

後は再帰の様に、残りの繰り返し回数のチェックに引っかかり、
即時『return』にて処理が完了するまで
点滅アニメーションを繰り返します。




テキストフォーム等の枠(輪郭部分)を点滅させよう




続いて、要素自体の点滅ではなく、フォーム要素等の枠を点滅させる方法について解説致します。
フォーム要素の枠の点滅は、フォーム送信時にエラーが生じた際等に、
どのフォームの値がエラーなのかを示す時に役立ちます。
例えば、必須項目が未入力の場合は、未入力であるフォームを点滅させると
ユーザにとって、とても分かりやすくユーザビリティが向上します。

今回のサンプルでは、単純に枠線を点滅させるのでは無く、
要素の影を利用して、フワッっと光らせる様にしています。

それでは実際のJavaScriptを見てみましょう。



/* 要素枠の点滅(シャドウ)
-------------------------------------------------------------------------------*/
// 点滅回数
var flashing_shadow_num = 0;

// シャドウが広がっている途中?
var flashing_shadow_in = true;

// アクションを繰り返す為のタイマー
var flashing_shadow_timer;

// 要素枠点滅のエントリーポイント
function flashingShadow( el_, num_ )
{
 // タイマーをクリア
 clearTimeout(flashing_shadow_timer);

 // 点滅回数を退避
 flashing_shadow_num = num_;

 // 点滅アクションを起動
 flashingShadowAction( el_, 0 );
}
// 実際の点滅アクション
function flashingShadowAction( el_, count_ )
{
 // 残り点滅回数のチェック
 if( flashing_shadow_num <= 0 ) return;

 // シャドウが広がり途中?
 if( flashing_shadow_in == true ){

  // シャドウの太さをインクリメント
  count = count_+1;

  // 指定数を超えればフラグを反転させる
  if( count >= 30 ){
   flashing_shadow_in = false;
  }
 }
 else{

  // シャドウの太さをデクリメント
  count = count_-1;

  // 指定数を下回ればフラグを反転させる
  if( count <= 0 ){
   flashing_shadow_in = true;

   // シャドウが消えた時点で残り点滅回数をデクリメントする
   flashing_shadow_num--;
  }
 }

 // 点滅対象をグローバルへ退避
 flashing_shadow_element = el_;

 // 影の太さを適用させる
 $(flashing_shadow_element).css({boxShadow: '0 0 '+count+'px red'});

 // 再帰的に繰り返す為にタイマーをセットする
 flashing_shadow_timer = setTimeout('flashingShadowAction(flashing_shadow_element, count);', 1);
}




基本的な処理の流れは、要素自体の点滅の実装と変わりませんが、
今回のサンプルでは、要素の枠線の太さを変える事によって、
点滅を表現しています。(枠線というより、実際には要素の影(boxShadow)の広がりを調整しています。)

その枠の太さを太くするのか?細くするのか?等の処理が追加され、
逆にアニメーションを自分で実装する形を取っているので、
コールバック等の実装は必要ありません。
ひたすら太さの調整を繰り返し、線が無くなるタイミングで繰り返し回数を減らしています。

上記サンプルで指定出来るのは点滅対象要素と、繰り返し回数のみで、
スピードの調整は出来ません。

行うとしたら、タイマーの実行タイミングを調整する事でしょうか。
しかし、感覚的に使用する事が出来無そうですので、今回のサンプルでは
実装を見送りました。


それでは上記サンプルの呼び出し方法です。



フォーム点滅



HTMLに直接実装するとしたら上記の様に『onclick』にて『flashingShadow()』を起動します。
第一引数に渡すのは、対象要素、もしくは対象要素を表すセレクタ文字列です。
今回はIDを指定しました。
第二引数には繰り返し回数を指定します。

勿論、『flashingShadow()』を呼び出すのはHTML側からでは無く、
JavaScriptからの呼び出しも可能です。

上記の様にボタンクリックにて点滅させる事は殆ど無いと思いますが、
実際に使われるシーンでは、バリデート処理後に、エラーだった場合には
対象要素を指定してフォームを点滅させる等の処理を
JavaScriptで実装する事になるでしょう。

しかし、実際に点滅させる為のエントリーポイントは『flashingShadow()』という
ただのユーザ定義関数ですので、JavaScriptの処理フロー中でも
問題なく呼び出す事が出来、指定の要素を点滅アニメーションさせる事が可能です。






今回の記事で紹介した、要素自体の点滅アニメーションと、
要素の枠を点滅させるアニメーションを駆使すれば、
エラーメッセージ自体を点滅させ、エラーが発生したフォームの枠を点滅させて
よりエラー箇所をユーザへ分かりやすく提供する事が可能になります。

是非、オリジナルライブラリに追加して頂き、
日々のWEB製作に役立てて頂ければ幸いです。

もし、今回の実装にあたり『もっとこうした方がスマートだ』
『バグがあるぞ!』など御座いましたら
コメント欄に書き込んで頂ければ幸いです。

何卒、宜しくお願い致します。





コメントをお待ちしています

人気の投稿

Category

Algorithm (2) Android (8) ASP/aspx (1) Blogger (2) C/C++ (1) Chrome (5) CSS (9) Firefox (4) Fortran (1) Google (9) GoogleMap (2) HTML (12) IE (3) Information (4) iOS (2) iPhone/iPad/iPod (2) Java (6) JavaScript (16) jQuery (9) JSP (1) LifeRecipe (5) Linux (2) Macintosh (2) MapKit (4) Marketing (7) MySQL (3) NAMAZU (2) Objective-C (7) Other (7) Perl (1) PHP (9) Python (1) RSS/Atom (2) Ruby (1) Safari (2) SEO (11) Smarty (2) SQL (2) Tex (1) Three.js (1) Twitter (1) TwitterLog (313) UIKit (5) Unix (1) VBA/VBS (1) Windows (5) WordPress (3) Writing (5) XAMPP (1) XML (1) Yahoo (2) ZendFramework2 (14)

Archives