こんにちは、アライドアーキテクツ長野です。
iPhone向けのWEBアプリを作っていると、滑らかに画面の切り替えがしたくなりますよね！
でもそのためにわざわざライブラリを使いたくない、、ということはよくあると思います。
そこでJavascriptとCSS3だけで滑らかな画面の切り替えをする方法を調べましたので、今回はそれについて書いてみます。
いきなりですが、サンプルです。(iPhoneでみてください)
ボタンを押すと徐々に次のページに切り替わります。
以下にJavascriptのソースを抜粋しました。HTML部分などはサンプルのソースをご覧ください。
|
1 2 3 4 5 6 7 8 9 10 |
function onLoad(){ //事前処理・・・① document.getElementById("second").setAttribute("style", "opacity:0;z-index:0"); } function moveScene(){ //アニメーション処理・・・② document.getElementById("first").setAttribute('style', '-webkit-transition: opacity .5s ease-in-out;opacity:0'); document.getElementById("second").setAttribute('style', '-webkit-transition: opacity .5s ease-in-out;opacity:1;z-index:1'); } |
アニメーションに関わる部分のみ解説します。
事前処理(①)
|
1 |
document.getElementById("second").setAttribute("style", "opacity:0;z-index:0"); |
切り替え後のページの透明度を0にしておきます。
アニメーション処理(②)
|
1 2 |
document.getElementById("first").setAttribute('style', '-webkit-transition: opacity .5s ease-in-out;opacity:0'); document.getElementById("second").setAttribute('style', '-webkit-transition: opacity .5s ease-in-out;opacity:1;z-index:1'); |
ここで実際にアニメーションをしています。
”-webkit-transition: opacity .5s ease-in-out”
というスタイルをセットしていますが、
これは
・どれくらい時間を掛けるか
・何を対象にするか
・どのような進行割合でアニメーションするか
を定義しています。事前にCSSに書いておくこともできます。
ここでは0.5秒の間に透過度を’ease-in-out'(ゆっくりはじまり、ゆっくり終わる)の進行割合で遷移するよう定義しています。ほかにもlinear等が使えます。
そしてその直後で
“opacity:0”
とセットしており、先にセットされた-webkit-transitionの定義にそってopacityが0になります。
このアニメーションを
・firstは徐々に透過させる
・secondは徐々に表示させる
ことで滑らかに切り替わっているように見せています。
—
今回は透過による遷移ですが、画面を横にずらす遷移などもできそうですね。
サービス開発や社内インフラ等を担当しています。 このブログではJavaScript周りのネタを中心に書いていきたいです。
