CSS3のtransitionで中断と再開を実装してみた

transitionとは

CSS3になって、アニメーションのエフェクトを簡単に実現する機能が出てきました。

その中でもtransitionは、繰り返しのないシンプルなエフェクトを実現します。
簡単な使い方をすると、エフェクト前の状態から何秒かけてエフェクト後の状態に変化させる、というものになります。
これを少し工夫すると、擬似的に変化の中断と再開を実現できます。

このエントリの目次

1. jsdo.itに置いています
2. jsdo.itのサンプル
3. ロジックの概要
4. さいごに

1.jsdo.itに置いています

こちらです。
Ubuntu の chrome やiOS、Androidのブラウザで動作確認しています。

2.jsdo.itのサンプル

棒グラフがtransitionプロパティで滑らかに伸びていきます。
「中断」ボタンを押すと、伸びるのが止まります。
「再開」ボタンを押すと、再度伸び始めます。

3.ロジックの概要

前述の通りtransitionは、エフェクト前の状態から何秒かけてエフェクト後の状態に変化させる、というものです。
ここでポイントは、エフェクトの途中で、エフェクト後の状態をリアルタイムに変更できるということです。

例えばある棒グラフがあったとして、最初は横幅0pxから100pxまで、10秒かけて変化させるように設定するとします。
5秒後にはある程度のところまで棒が伸びます。
ここで、そのタイミングで、エフェクト後の状態を0pxにすると、棒グラフは滑らかに逆に0pxまで縮んでエフェクトを完了します。

つまりエフェクト後の状態を、一時停止させたいときの幅に設定すると、エフェクトが中断しているように見えるという訳です。

ちなみにエフェクト後の状態を途中で変更しても、transitionend系のイベントは発行されます。

4.さいごに

今回のエントリは、例えば、画面上部からリストがヌルヌルとアニメーションで出てくるような仕様に適用できると思います。
途中で止めたい時に止められるので。

それでは。

左から 緑〜黄〜赤 に変化する棒グラフをJavaScriptとCSS3で書いてみた

こんな感じのグラフを書いてみた

このエントリの目次

1. jsdo.itに置いています
2. 緑、黄色、赤のRGB
3. RGBで緑、黄色、赤のグラデーションを表すには
4. JavaScriptとCSS3でグラデーションさせる
5. さいごに

1.jsdo.itに置いています

こちらです。
Ubuntu の chrome と firefox で動作確認しています。

2.緑、黄色、赤のRGB

RGBは「Red」、「Green」、「Blue」の頭文字を取ったもので、赤緑青がそれぞれ0〜ffの16進数で表現されます。

緑、黄色、赤をRGBで表現すると、

1. 緑 = #00ff00
2. 黄色 = #ffff00
3. 赤 = #ff0000

となります。

3.RGBで緑、黄色、赤のグラデーションを表すには

下の絵のとおりです。



黄色になるところがグラフの丁度真ん中です。

赤は黄色になるまで正比例で0から255に増していき、それ以降はずっと255です。
緑は黄色になるまでずっと255で、それ以降は0から255で正比例で減っていきます。
青はずっと0です。

4.JavaScriptとCSS3でグラデーションさせる

グラデーションはCSS3 の linear-gradient()関数を使っています。
このサイトに詳しく載っています。

JavaScript はRGBを計算するんですが、棒グラフの長さが50%未満のとき と 50%以上のとき、2つの場合に分けて考えます。

50%未満のとき

このときは、右端の色を計算します。
緑と黄色の中間の色になります。

50%以上のとき

このときは、右端が黄色と赤の間の色になるので、それを計算します。
さらにlinear-gradient()関数の性質上、丁度50%のときの黄色が、グラフの全横幅に対してどの割合の位置になるのかを求める必要があるので、それも計算します。


言葉では分かりづらいと思うので、最初にリンクしたjsdo.itを参考にしていただければ。
JavaScript のところにコメントも細かく書いています。

5.さいごに

CSS3は便利ですねー。

何かのお役に立てれば。
それでは。