 ホーム KeyNavi対応方法 [0] JavaScript＠Keynavi.Netトップ
[1] レイヤー アニメーション
|
・サイトマップ [Shift-S] |
 |
■ レイヤー アニメーション：移動・背景色・透明度・出力
レイヤーの各種属性を時間の経過に合わせて変更します。
kl_timer_start()
を使うと簡単にタイマー制御できます。
レイヤーの移動
以下の例ではレイヤーを(2px,1px)だけ移動する関数を50msec単位で
100回呼び出します。
透明度を変えていく
上のレイヤーの透明度を変えてみましょう。
「myopac()」関数を30msec単位で100回呼び出します。
背景色を変更していく
以下の関数「mkcol(r,col0,col1)」により col1、col1の間の色を算出します。
それを「setbgcolor(id,col0,col1)」により背景色に設定します。
これを「kl_timer_start()」で登録し連続的に呼び出します。
-----------------------------------------------------------------------------
■ mkcol(r,col0,col1)
・返り値：補間した色
・col0：開始色(r=0)
・col1：終了色(r=1)
■ interpolate(r,t0,t1)
・返り値：値t0,t1を割合rで補間した値
-----------------------------------------------------------------------------
function mkcol(r,col0,col1){
//#rrggbbの各３原色を取り出して処理
return "#"+mkcol_raw(r,col0,col1,1)
+mkcol_raw(r,col0,col1,3)
+mkcol_raw(r,col0,col1,5);
}
function mkcol_raw(r,col0,col1,i){
//色を10進数に直してから補間計算
var t0=parseInt(col0.substring(i,i+2),16);
var t1=parseInt(col1.substring(i,i+2),16);
var tt=Math.round(interpolate(r,t0,t1));
//16進の2桁表記にする 例：10→0A、100→64
return kl_tostr(tt>255 ? 255 : (tt<0 ? 0 : tt),16,2);
}
function interpolate(r,t0,t1){
//値「t0,t1」の間の値を比率「r」で線形補間
return (r*t1+(1-r)*t0);
}
-----------------------------------------------------------------------------
■ setbgcol(id,col0,col1)：背景色を設定する関数
・id：レイヤーオブジェクトかそのID
・col0：開始色
・col1：終了色
-----------------------------------------------------------------------------
function setbgcolor(id,col0,col1){
//this.kl_cntは現在のカウント、kl_repsは繰り返し数
kl_layer_setbgcolor(id,mkcol(this.kl_cnt/(this.kl_reps-1.0),col0,col1));
}
//背景色アニメーションを実行
kl_timer_start(setbgcolor,new Array("lay1","#FF0000","#FFFF00"),20,50);
文字列を順に出していく
「kl_tlayer_write()」を連続的に呼び出し、レイヤーに文字列を出力します。
実例はタイマー機能を簡単に利用：kl_timer_...()
内の終わりのほうの例を参照して下さい。
|
レイヤーの移動 |
|
透明度を変えていく |
関数内から「this.kl_cnt」で現在のカウント値が得られます。
半透明レイヤーは前景・背景２つのレイヤーからなります。
背景(lay0.bg)の透明度を変化させます。
上の「移動」実行中に 同時に透明度変更を実行すると面白いです。
今度は不透明から透明になるようにしてみます。
透明になって消えてしまったら前の実行ボタンを押して不透明にします。
注：不透明度指定が動作するのはWinIE4+,Netscape6+,Mozillaです。
その他のブラウザではサポート外です。
|
背景色を変更していく |
【16進表記した色col0と色col1を比率rで補間】
-----------------------------------------------------------------------------
■ mkcol(r,col0,col1)
・返り値：補間した色
・col0：開始色(r=0)
・col1：終了色(r=1)
■ interpolate(r,t0,t1)
・返り値：値t0,t1を割合rで補間した値
-----------------------------------------------------------------------------
function mkcol(r,col0,col1){
//#rrggbbの各３原色を取り出して処理
return "#"+mkcol_raw(r,col0,col1,1)
+mkcol_raw(r,col0,col1,3)
+mkcol_raw(r,col0,col1,5);
}
function mkcol_raw(r,col0,col1,i){
//色を10進数に直してから補間計算
var t0=parseInt(col0.substring(i,i+2),16);
var t1=parseInt(col1.substring(i,i+2),16);
var tt=Math.round(interpolate(r,t0,t1));
//16進の2桁表記にする 例：10→0A、100→64
return kl_tostr(tt>255 ? 255 : (tt<0 ? 0 : tt),16,2);
}
function interpolate(r,t0,t1){
//値「t0,t1」の間の値を比率「r」で線形補間
return (r*t1+(1-r)*t0);
}
【レイヤーの背景色アニメーション】
-----------------------------------------------------------------------------
■ setbgcol(id,col0,col1)：背景色を設定する関数
・id：レイヤーオブジェクトかそのID
・col0：開始色
・col1：終了色
-----------------------------------------------------------------------------
function setbgcolor(id,col0,col1){
//this.kl_cntは現在のカウント、kl_repsは繰り返し数
kl_layer_setbgcolor(id,mkcol(this.kl_cnt/(this.kl_reps-1.0),col0,col1));
}
//背景色アニメーションを実行
kl_timer_start(setbgcolor,new Array("lay1","#FF0000","#FFFF00"),20,50);
レイヤー「lay1」です。
|
文字列を順に出していく |
|
【JavaScript@Keynavi.Net ：
タイマー編
】
「Ctrl-矢印」でフォーカスを上下左右に移動できます。
|
| トップへ戻る [1] | Back[Q] ・Top[W] ・Up[E] ・PgUp[R] ・Focus[Ctrl-矢印] |
|
|
ホーム KeyNavi対応方法 [0] JavaScript＠Keynavi.Netトップ
[1] レイヤー アニメーション
|
・サイトマップ [Shift-S] |