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は便利ですねー。

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

Nike+ FuelBand を試してみた

FuelBandとは

腕輪型の歩数計みたいなもので、歩いた距離などの履歴がWebに残る、Nikeが提供する便利でクールなガジェットです。
Nikeのサイトがとてもクールです！
かっこいいので紹介します。

ちなみに、Macでセットアップしました。

このエントリの目次

1. 注文する
2. 箱を開封する
3. セットアップする
4. 歩いて記録する
5. さいごに

1.注文する

僕はamazonで買いました。
僕はかなり細身なのでSサイズで注文してぴったりでした。

そして注文してから一ヶ月経ってやっと届きました！

2.箱を開封する

こんな感じの雑な包装で着ました！
これには正直びっくり。
中国からきた模様です。


この灰色の袋、裏返すとなんと「Yahoo!奇摩」の文字が！
ええー！

ちなみにこれ、台湾のYahoo!ですね。
でも僕、amazonで予約したんですけどｗ
どういうことなの…。


気を取り直して、開封作業に戻ります。
中にはこんな感じでかっこいい箱がありました。
さすがNikeです。


裏側はこんな感じです。
やはりかっこいいです。


箱をパカッと開けます。
左側に使うまでの手順が書いてます。


実物はこんな感じです。


なんとも未来的な感じ。
これはワクワクします。

3.セットアップする

Nike+のサイトにアクセスします。
そして、真ん中のリンク「今すぐダウンロード」をクリックします。


デスクトップにNike+ Connectが追加されました。


クリックすると下記の画面になります。


更にクリックします。
Nike+ Connectインストーラが起動します。
「続ける」をクリックします。


下の画面になったので、Fuelband をPCに接続します。


こんな感じで接続しました。


するとこんなウインドウが開きます。
マウスオーバーしても色が変化しないので分かりづらいですが、右下の「アップデート」をクリックします。


こんな画面になります。
こんな画面もかっこいいです。


で、下のような画面になります。


少ししてブラウザで下のようなページが開きます。
自分の身長、体重、Fuelbandをどちらの手首に巻くかを入力します。
デフォルトの単位がフィート、ポンドになっていて分かりづらいので、キロメートル、キロに変えておきます。
画面下の「次へ：目標の設定」をクリックします。


目標の設定をします。
単位がよく分かりませんが、普段そんなに運動しないので「2000」を選択します。
画面下の「次へ：JOIN NIKE+に参加」をクリックします。


こんな画面が出ます。
僕はFacebookでログインしました。


ほぼ完了！
「完了」をクリック。


あと一息です！


自分の名前を入力してセットアップ完了です！


最後に、サイトの設定ページに行って、距離と体重の単位設定をします。

4.歩いて記録する

適当に歩いたあとMacに接続すると、Nike+にデータが送信されます。
例えば一日の記録はこんな風に見えます。
かっこいいですね！


僕は平日は会社までのドアドア通勤退勤で30分、昼食時などに歩くんですが、それだと大体1600〜1700 NikeFuelでした。
単位がよくわかりませんな！

他にも、人気の運動ルートや人気の運動ルートを設定できたり、そのときに一番NikeFuelを獲得した人がランキングで出たりと、色々な機能が使えます。


iPhoneのアプリもあります(iTunes App Storeのリンク)。

5.さいごに

単純にサイトがかっこいいので、見てるだけで楽しめます。
これで運動するモチベーションが上がるといいんですけどねー。

それでは。

Apple風のテクスチャを GIMP 2.6.12 で作ってみた

簡単にできました

Appleの最近のプロダクトで使用されているかっこいいテクスチャをさくっと作るチュートリアル | コリスを参考にしました。

上記サイトで Adobe Photoshop で作っているのを、GIMP にあてはめてみました。

このエントリの目次

1. こんなテクスチャを作りました
2. 2枚のレイヤーを用意する
3. 1枚目のレイヤー(背面)にフィルタを適用する
4. 2枚目のレイヤー(前面)にフィルタを適用する
5. レイヤーを合わせて完成
6. さいごに

1.こんなテクスチャを作りました

(Flickrのぺージ)

本当は 640x1136 px で作ったのですが、Flickr にアップロードしたら 577x1024 px になってしまいました。

2.2枚のレイヤーを用意する

まず、GIMPを立ち上げて、「新しい画像」を作成していきます。
「ファイル」→「新しい画像」を選択します。


次のようなウインドウが現れるので、作りたい画像の縦と横のサイズを入力して、「OK」を押します。


これで、まっさらな画像が作られました。

続いて、基本となる色を画像につけていきます。
右クリックをして「色」→「単色塗り」を選択します。


下のようなウインドウが出てくるので、「カスタムカラー」のところをクリックします。


色を調整するウインドウが出てきます。
RGB をそれぞれ、0、33、66 と入力して、「OK」を押します。


プレビュー の色も変更されました。
問題ないので、「OK」を押します。


こんな画面になります。


ベースのレイヤーができたので、これを複製します。
右クリックをして、「レイヤー」→「レイヤーを複製」を選択します。


これで基礎となる2枚のレイヤーができました。

3.1枚目のレイヤー(背面)にフィルタを適用する

背面レイヤーに薄い縦縞がかかるようにします。

まずはフィルタのかかり具合を正確に見るため、倍率を 100% にします。


まずは背面のレイヤーから編集します。

下の図の赤丸のところ(目のアイコンのところ)をクリックして、前面のレイヤーを非選択状態にします。


これで背面のレイヤーを編集できるようになりました。

レイヤーにフィルタをかけていきます。
右クリックをして「フィルタ」→「ノイズ」→「HSVノイズ」を選択します。


下のようなウインドウが現れるので、保存度 = 1、色相 = 0、彩度 = 30、明度 = 30 として「OK」を押します。


これでノイズがかかりました。
次にこのノイズを薄い縦縞にします。
右クリックをして、「フィルタ」→「ぼかし」→「ガウシアンぼかし」を選択します。


下のようなウインドウが出てくるので、水平 = 0、垂直 = 50 と入力して「OK」を押します。


これで、1枚目のレイヤーが完成しました。

4.2枚目のレイヤー(前面)にフィルタを適用する

まずは前面のレイヤーを編集可能な状態にします。

「背面 コピー」(前面)の目のアイコンをクリックして表示させ 選択状態に、「背面」の目のアイコンをクリックして非表示にして 非選択状態にします。


前面のレイヤーは薄い横縞を作ります。
先ほどと同じように、まずはノイズを作成、続いてガウシアンぼかしをいれます。
このとき、下のように水平にぼかしをいれます。


これで2枚目のレイヤーも完成しました。

5.レイヤーを合わせて完成

仕上げに、前面のレイヤーの不透明度を 50% にします。


すると、以下のようなApple風の布っぽいテクスチャになりました！


あとは画像を保存して完了です。

6.さいごに

思ったよりも簡単に作れました。

「ノイズ」と「ぼかし」を組み合わせれば、色々な質感の素材が作れそうですね。