❶ start で @keyframes を使ったアニメーション ❷ stop で↑を停止 ❸ 位置移動 ❹ start2 で setTimeout でアニメーション ❺ stop2 で↑を停止
2013/3/6 時点の @keyframes
Chrome と safari が @-webkit-keyframes で実装されている為記述が残っていますが、他のブラウザではベンダープレフィックスの無い @keyframes で動作しています。( IE9 は実装そのものがされていません )
@keyframes 以外の適用を jQuery で行う
例えば、アニメーションの処理は、対象となる要素( ここでは doing )に対して css を適用するわけですが、jQuery では、.css メソッドで処理する事ができます。
.css("animation", ".85s doing-rotate steps(8) infinite");
ここで、doing-rotate が、@keyframes で定義済のアニメーションの目に見える効果の定義の名前になります
ここで行うアニメーションは『実行中を示すアイコンのアニメーション』なので、アニメーションを実行しつづける事だけでは目的が達成されません。ですから、目的に必要な処理にともなって css が適用された状態を変更する必要があります。
❶ アニメーションの開始と停止
❷ 表示位置の変更
❸ @keyframes が使えないブラウザの対応
少なくとも、以上のような『機能』が必要になるので、その実装の為に jQuery の名前空間を使ったサンプルが以下のようになります
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
/*
プレースホルダー( この中の絶対座標で表示する )
*/
#holder {
position: relative;
width: 300px;
height: 200px;
}
/*
1) Chrome バージョン 25.0.1364.152 m 現在、-webkit- が必要
( safari も同様 )
2) その他は、@keyframes で動作
*/
@-webkit-keyframes doing-rotate {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes doing-rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/*
カスタム要素で実装
*/
doing {
position: absolute; /* 目的の性格上、親要素は position:relative */
display: block; /* 必須 : Opera の都合で最初から設定しておく必要があります */
visibility: hidden; /* 目的の性格滋養、初期は非表示 */
border-radius: 50%; /* 元の形状を丸くする為 */
font-size: 18px; /* 位置指定を em でしているので、ここを変更すると半径変更 */
width: 5px; /* サイズ変更 */
height: 5px;
/* em を使うと、font-size にサイズを連動させる事ができる */
/* width: .25em; height: .25em; */
/* box-shadow による影の複数作成 : 位置と色と不透明度を指定 */
box-shadow:
0 -.4em 0 0 rgba(50,0,0,1),
-.28em -.28em 0 0 rgba(50,0,0,.75),
-.4em 0 0 0 rgba(50,0,0,.50),
-.28em .28em 0 0 rgba(50,0,0,.25)
;
}
</style>
<div id="holder">
<!-- カスタムでは終了タグが必要です -->
<doing></doing>
<input type="button" id="start" value="start" />
<input type="button" id="stop" value="stop" />
<input type="button" id="move" value="移動" />
<input type="button" id="startie9" value="start2" />
<input type="button" id="stopie9" value="stop2" />
</div>
<script type="text/javascript">
// 処理の性格上、同時に一つしか使わない事を前提に jQuery の名前空間に
// 単独で追加登録しています
//
// 複数のアニメーションを作成する場合は、$.fn.extend で、
// jQuery オブジェクトに対する実装に変更します
$.extend({
// 表示開始
ani_start: function(name) {
if ($.ani_value.userAgent.indexOf("msie") > -1) {
if ($.ani_value.appVersion.indexOf("msie 10.0") > -1) {
$(name).css("visibility", "visible")
.css("animation", ".85s doing-rotate steps(8) infinite");
}
// IE は、10 以外は動作しないので、手動でアニメーションする
else {
$.ani_start2(name);
}
}
else {
$(name).css("visibility", "visible")
// アニメーションを開始する css を設定する
.css("animation", ".85s doing-rotate steps(8) infinite");
}
return $(name);
},
// 表示停止
ani_stop: function(name) {
if ($.ani_value.userAgent.indexOf("msie") > -1) {
if ($.ani_value.appVersion.indexOf("msie 10.0") > -1) {
$(name).css("visibility", "hidden")
.css("animation-name", "none");
}
// IE は、10 以外は動作しないので、手動でアニメーションを止める
else {
$.ani_stop2(name);
}
}
else {
$(name).css("visibility", "hidden")
// アニメーションを停止する css を設定する
.css("animation-name", "none");
}
return $(name);
},
// 表示位置変更
ani_move: function(name,x,y) {
$(name).css("left", x+"px")
.css("top", y+"px");
return $(name);
},
// 手動アニメーション
ani_start2: function(name) {
// ループ用のプライベート関数
function loop() {
$.ani_value.timerid = window.setTimeout(loop,120);
$.ani_value.loopdeg += 45;
$(name).css("transform", "rotate("+$.ani_value.loopdeg+"deg)");
}
// 再入を防ぐ
if ( $.ani_value.timerid == null ) {
$(name).css("visibility", "visible");
loop();
}
return $(name);
},
// 手動アニメーションの停止
ani_stop2: function(name) {
$(name).css("visibility", "hidden");
// 動いている時だけ止める
if ( $.ani_value.timerid != null ) {
clearTimeout($.ani_value.timerid);
$.ani_value.timerid = null;
}
return $(name);
},
// 利用する変数
ani_value: {
loopdeg: 0,
timerid: null,
userAgent: window.navigator.userAgent.toLowerCase(),
appVersion: window.navigator.appVersion.toLowerCase()
}
});
// 初期位置
$.ani_move( "doing", 100, 60 );
var move_x = 100;
// ボタンの処理を登録
$("#start").click( function(){ $.ani_start("doing"); } );
$("#stop").click( function(){ $.ani_stop("doing"); } );
$("#move").click( function(){ $.ani_move( "doing", ( move_x < 180 ) ? move_x+=40 : move_x=100, 60 ); } );
$("#startie9").click( function(){ $.ani_start2("doing"); } );
$("#stopie9").click( function(){ $.ani_stop2("doing"); } );
</script>
手動アニメーションについて IE9 は @keyframes が使えないので内部で判定して、自動的に setTimeout を使った手動アニメーションを実行しています。ただ、他のブラウザでも、setTimeout を使った手動アニメーションは正しく動作します。 一般的なアニメーションは、$.fn.extend で ここでは、単純にする為に同時に二つを使う事が無いはずの、『実行中アイコン』を例にしていますので、$.extend で実装しています。しかし、複数のアニメーションを同時に行いたい場合は、$.fn.extend を使って、オブジェクト単位で動作するような記述をする必要があります。
|
|
【jQueryの最新記事】
- jQuery の $.get を使用した ajax のテンプレート
- jquery.balloon.js を使用した簡単なバルーン( マウスオーバーで表示する追加説明用 )の作り方
- jQuery による link 要素の追加と削除を bootstrap.css でリアルタイムチェック
- FileReader で、ローカルの CSV を読み込んで(shift_jis)、jQuery でテーブルを作成して表示する
- jQuery + bootstrap.js で ajax の GET と POST を使用した DB テーブルを更新する UI テンプレート
- jQuery : 貼り付けるだけで、ページ右下にページ先頭にジャンプするリンクを表示させる( アニメーションは無し )
- STYLE 要素を追加して、CSS テキストをセットして、jQuery で CSS に important 指定を追加する。
- ページの右下に、ページの先頭へ移動するボタンを追加する(ページの先頭から 200px までは、スクロールボタンを表示しない)
- テーブルのTDをクリックしたら、INPUT で値を変更可能にして、元の値と違うものにはフラグを立てる処理を絵で書いて説明してみました
- jQuery を使用してサーバから取得した JSON データを元にテーブルを作成し、その後から列を加工する
- JSON 配列を WEB より読み出して jQuery で動的にテーブルを作成して表示する
- jQuery UI の Datepicker Widget のオプション
- FormData を使用して、jQuery で配列として PHP に送る
- 必要なデータを隠しリストボックス( multiple ) に jQuery で追加して配列として PHP に送る
- Android Studio の追加日本語化用に、キャラクタセットに依存しないコード文字列を作成するツールを作成しました
- 画像ファイルが存在した時のみ、表示する jQuery の記述
- jQuery で mobile(スマホ) かどうかのチェックをしたくて調べたら、Stack Overflow の記事でいろんな方法が答えられていました。
- jQuery と FileReader オブジェクトによる、ローカルの複数画像ファイルのプレビュー表示
- とても面白くて簡単な jQuery のクリックしたコンテンツ以外を暗転(Blackout) するサンプル
- jQuery で、左右に並んだリストボックスの右側のデーターをダブルクリックしたら左へ転送してソートする処理
