今回は、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セミナー）の講師としてもおなじみ。

クリエイター向け転職・派遣情報サイト「マイナビクリエイター」より転載