今回は、transitionプロパティの、カスタムイージングの使い方を解説します。
テキストエフェクトの実装
今回のサンプルでは、 transition-timing-functionを通常のease-outと、cubic-bezierによるカスタムイージングとを並べて、同時にアニメーションさせることで、その違いを分かりやすくしています。
※今回も、CSS3の「transitionプロパティ」に対応した「Firefox」「Chrome」「Safari」でしか動作しません。 残念ながら現時点ではIEは「transitionプロパティ」には対応していません。
では早速記述を見てみます。
<script>
$(function ()
{
$("#button").toggle(
function()
{
$("#box1").css("transform", "translate(300px,0px)");
$("#box2").css("transform", "translate(300px,0px)");
},
function()
{
$("#box1").css("transform", "translate(0px,0px)");
$("#box2").css("transform", "translate(0px,0px)");
}
);
});
</script>
<style>
#box1
{
transition-property:transform;
transition-duration:500ms;
transition-timing-function:ease-out;
}
#box2
{
transition-property:transform;
transition-duration:500ms;
transition-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
}
div
{
cursor:pointer;
width:80px;
height:80px;
background:#CCC;
color:#FFFFFF;
overflow:hidden;
}
</style>
</head>
<body>
<p>transition-timing-function:ease-out;</p>
<div id="box1"></div>
<br>
<p>transition-timing-function:cubic-bezier(0.190, 1.000, 0.220, 1.000);</p>
<div id="box2"></div>
<br>
<button id="button">実行</button>
</body>
</html>
実装としては、今まで同様、jQueryの「toggleメソッド」を使って、対象のエレメントの「translateプロパティ」を変更しているだけです。
ここで重要になってくるのは、下記のCSSで「transitionプロパティ」の設定をしている部分です。
#box1
{
transition-property:transform;
transition-duration:500ms;
transition-timing-function:ease-out;
}
#box2
{
transition-property:transform;
transition-duration:500ms;
transition-timing-function: cubic-bezier(0.190, 1, 0.220, 1.000);
}
第5回の時に、
・cubic-bezier(数値, 数値, 数値, 数値)：ベジェ曲線で独自のアニメーションを指定できる。
という解説をしましたが、今回「#box2」に指定した「transition-timing-function」の値が、このカスタムベジェに当たります。
指定方法は、下記の図のように、3次ベジェ曲線で指定します。
|
transition-timing-function: cubic-bezier(0.8, 0.3, 0.2, 0.8);
3次ベジェ曲線とは、２つの点を用いて曲線を描く仕組みで、フォトショップやイラストレーターのパスと同じです。カスタムイージングでは、
cubic-bezier(ポイント1のX , ポイント1のY , ポイント2のX , ポイント2のY);
をそれぞれ、0～1の範囲で指定します。 そうすると、横方向を時間軸、縦方向を座標の移動軸としてアニメーションします。
とはいっても、いきなりベジェ曲線を手打ちで作った上で、そのベジェ曲線がどういった動きをするかなんて、頭で想像するなんて無理ですね・・・。
そこで、カスタムイージングを補助するツールとして、下記のようなサイトがあります。
Ceaser CSS Easing Animation Tool
今回のサンプルも、実はここでカスタムイージングを拝借しました。 FlashのTweenエンジンを使った経験がある方なら、おそらくなじみ深いと思われる、Penner Equationsというイージングアルゴリズムを、ある程度エミュレートしているところもイイ感じですね。
河野 義貴
インハウスのFlashクリエイターとして勤務後、2010年独立。一年間のフリーランス期間を経て、2011年9月にスウィーツアンドストリーム株式会社を設立。主にFlash・HTML5を駆使した、PC・スマートフォン向けインタラクティブコンテンツを中心に活動中。マイナビクリエイターセミナー（WCBセミナー）の講師としてもおなじみ。
