CSS3のアニメーション機能in development

 
date:2010.05.14   posted by:sakuma
 

Transform

Transform要素は領域(インライン・ブロック要素)の変形を行うためのプロパティです。具体的には移動、回転(X/Y/Z軸)、傾斜、伸縮といったプロパティを操作することが出来ます。Webkit系ブラウザ(Safari、Chrome)とFirefoxで暫定的に実装されています。

transform: translate(x移動量, y移動量) rotate(回転量) scale(伸縮量) skew(ゆがみ量);

上記はCSS3の規定に基づいた表記であり、現在はこのように表記しても適用されません。
対応ブラウザでそれぞれ適用させるにはWebkitブラウザでは「-webkit-transform」、Firefoxでは「-moz-transform」とします。

Rotate

rotateは要素の回転を行います。
transform-originで指定された位置を回転の中心として、ratateで指定された量の回転を行います。

background-color: #006600;
transform-origin: 0 0;
transform: rotete(5deg);

background-color: #660000;
-moz-transform-origin: 0 0;
-moz-transform: rotate(5deg);

background-color: #000066;
-webkit-transform-origin: 0 0;
-webkit-transform: rotate(5deg);

rotateプロパティは基本的にZ軸回転ですが、webkitブラウザではX軸、Y軸の回転も可能になっています。

background-color: #000066;
-webkit-transform-origin: 0 0;
-webkit-transform: rotateY(45deg);

background-color: #000066;
-webkit-transform-origin: 0 0;
-webkit-transform: rotateX(45deg);

分かりづらいので若干Z軸回転を加えるとこうなります。

background-color: #000066;
-webkit-transform-origin: 0 0;
-webkit-transform: rotateY(45deg) rotate(10deg);

background-color: #000066;
-webkit-transform-origin: 0 0;
-webkit-transform: rotateX(45deg) rotate(10deg);

Scale

scaleは要素の伸縮を行います。規定ではX・Y・Z方向の3軸に対して指定できますが、現状ではXとYの2軸にのみ適用できます。
transform-originで指定された位置を伸縮の基点として、それぞれX、Yに指定された比率で伸縮を行います。

background-color: #006600;
transform-origin: 0 0;
transform: scale(1.5, 1.2);

background-color: #660000;
-moz-transform-origin: 0 0;
-moz-transform: scale(1.5, 1.2);

background-color: #000066;
-webkit-transform-origin: 0 0;
-webkit-transform: scale(1.5, 1.2);

マイナスの比率も指定可能で、その場合はその軸に対して要素を反転表示します。

background-color: #006600;
transform-origin: 100% 0;
transform: scale(-1.5, 1.2);

background-color: #660000;
-moz-transform-origin: 100% 0;
-moz-transform: scale(-1.5, 1.2);

background-color: #000066;
-webkit-transform-origin: 100% 0;
-webkit-transform: scale(-1.5, 1.2);

Skew

skewは要素を台形状に歪ませます。X・Y方向の2軸に対して指定できます。
transform-originで指定された位置を基点として、それぞれX、Yに指定された角度分だけ傾斜させます。

background-color: #006600;
transform-origin: 0 0;
transform: skew(45deg);

background-color: #660000;
-moz-transform-origin: 0 0;
-moz-transform: skew(45deg);

background-color: #000066;
-webkit-transform-origin: 0 0;
-webkit-transform: skew(45deg);

background-color: #006600;
transform-origin: 0 0;
transform: skewY(15deg);

background-color: #660000;
-moz-transform-origin: 0 0;
-moz-transform: skewY(15deg);

background-color: #000066;
-webkit-transform-origin: 0 0;
-webkit-transform: skewY(15deg);

Translate

translateは要素をX・Y方向に移動させます。CSS2のtop、left要素と基本的には同じ動作をしますが、他のTransform要素と組み合わせて使用するのが主な使い方です。

background-color: #006600;
transform: translate(100px, 30px);

background-color: #660000;
-moz-transform: translate(100px, 30px);

background-color: #000066;
-webkit-transform: translate(100px, 30px);

Transition

Transitionは上述したTransformプロパティと組み合わせることで簡易的なアニメーションを実現することが出来ます。
Flashでいうところのモーショントゥイーン的に、変化前の状態と変化後の状態の間を生めるように変化するアニメーションになります。プロパティを指定しただけでは何も起こりませんが、:hoverや:activeといった擬似要素に記述することで、マウスオーバー、マウスダウン時のアニメーションをCSSだけで作成することが出来ます。またはJavascriptによるCSS指定でもアニメーションを起こす事が可能です。

このプロパティは現在Webkitブラウザでしかサポートされていない要素で、「-webkit-transition」と指定することになります。

transition: target-property duration ease-function;

「target-property」は変化させたいプロパティを指定します。デフォルトはAllで全プロパティがアニメーションの対象です。
「duration」はアニメーションの実行時間です。指定は秒(s)単位です。
「ease-function」はアニメーションの変化の仕方(イージング)を指定できます。linearを指定すると経過時間で均一の変化をします。ease-inを指定すると経過時間ごとに加速、ease-outを指定すると減速するアニメになります。ease-in-outは加速しながら始まり減速しながら終わります。cubic-bezier(a,
b, x, y)は4つの引数でイージング曲線をコントロールできます。

translateは要素をX・Y方向に移動させます。CSS2のtop、left要素と基本的には同じ動作をしますが、他のTransform要素と組み合わせて使用するのが主な使い方です。

rotateの例

background-color: #006600;
transform: translate(100px, 0px);

background-color: #006600;
transform: translate(100px, 0px);

scaleの例

background-color: #006600;
transform: translate(100px, 0px);

background-color: #006600;
transform: translate(100px, 0px);

skewの例

background-color: #006600;
transform: translate(100px, 0px);

background-color: #006600;
transform: translate(100px, 0px);

transitionの例

background-color: #006600;
transform: translate(100px, 0px);

background-color: #006600;
transform: translate(100px, 0px);

アニメーションの作成

この作例ではカードをめくるアニメーションをTransformとTransitionで作成していますが、カードの裏側→表側と反転する際に画像を入れ替える必要があるため、アニメーションが2段階に分かれます。「90度回転」
→ 「背景画像入れ替え」 → 「さらに90度回転」というステップでカードをめくるアニメーションを作成しています。

これの実現のためには、最初の「90度回転」のあとにタイミング良く次の処理を入れることが必要です。本来ならTransform完了時にイベントを取得できれば最も良いのですが、現状では残念ながらその手段がないので、Transitionのdurationに設定した値を元に、setTimeoutで遅延させながらプロパティを設定していきます。

obj.css('webkitTransform', 'rotateY(90deg)').css('webkitTransition', 'all 0.4s ease-in');
setTimeout( function () {
    obj.addClass('turned');
    obj.css('webkitTransform', 'rotateY(180deg)')
       .css('background-image', 'url("' + image_stack[val_cards[id] % image_stack.length] + '")')
       .css('webkitTransitionTimingFunction', 'ease-out');
    if (stacks.length >= 2) setTimeout("check_stack()", 2000);
    },
    450
);

jQuery1.4以上を使っている場合はdelay()メソッドを使うとスマートで良いと思います。

この場合はアニメーションのdurationが0.4s=400msですが、ぴったりの値にしてしまうとアニメ終了前に次の処理に移ってしまうことがあるので、余裕を持たせてsetTimeoutを450ms後に実行するようにしています。

また、カードが2枚めくられたあとは絵柄が合っているかの判定に移るわけですが、この判定もプロパティ設定直後に行うとアニメーションが行われない段階で処理に移ってしまいます。それを避けるために、カードをめくった2000ms後に判定を行うようにsetTimeoutを入れています。

Yahoo Pipesを使ってAmazonの商品情報をJSONで取得

この作例ではAjaxを使って非同期でAmazonの検索情報を取得しています。Amazon WebサービスはインターフェースがREST/XLT形式なので、Javascriptでは直接読み込むことができません。パース用のPHPやPerlのスクリプトを用意して、そちらを介してXMLもしくはJSONで値を取得する方法を取るのが一般的ですが、今回は米Yahooが提供しているWebサービス「Yahoo
Pipes」を利用してみました。

Yahoo Pipesは様々なフィードやWeb APIを自在に加工し、RSSやXML、JSONPといった使いやすい形式で出力してくれるWebアプリケーションです。様々なモジュールをつなぎ合わせてインターフェイスを作成するのですが、作成したPipeは自由に公開することも出来、しかも無料で使えるという汎用性の高いサービスです。

今回はAWSに接続してサムネイル情報をJSONPで取得するパイプを作成しました。
http://pipes.yahoo.com/pipes/pipe.info?_id=6b9fb2752bff2d9b8a093d6ce3fe41fd

ただしAWSは署名認証をパラメータとして要求するため、Signatureをエンコードする処理をJavascript側で実装しています。詳しいロジックはこちらのページをご覧ください。

 
"CSS3"で関連する記事一覧 (シーケンスで表示する)
•2010.05.14-CSS3のアニメーション機能 in development
 
 
"HTML5"で関連する記事一覧 (シーケンスで表示する)
•2010.05.17-Processing.jsを使った万華鏡デモ in work
•2010.05.14-CSS3のアニメーション機能 in development
•2010.04.24-HTML5&CSS3のデモを作成しました in work
•2010.01.04-HTML5を学ぶつもりならスマートフォンを買おう in work
 
 
"lab"で関連する記事一覧 (シーケンスで表示する)
•2010.07.05-iPadアプリ「Twin Striker」をリリース in news
•2010.06.06-The Css AwardsのSite of the Dayに選ばれました in work
•2010.06.06-iPhoneアプリ「TWIN STRIKER」をリリース! in news
•2010.06.04-each関数を使ったテキスト上下中央揃え in work
•2010.05.31-オフィシャルサイトで使う予定だった技術 in work
•2010.05.31-オフィシャルサイトで使った技術その3 in work
•2010.05.31-オフィシャルサイトで使った技術その2 in work
•2010.05.28-Androidアプリ「Twin Striker」をリリース! in news
•2010.05.26-リンク集 in development
•2010.05.26-事例(Twin Strikerのワークフロー) in development
•2010.05.26-Coronaトラブル対策 in development
•2010.05.26-Coronaと他Projectの比較 in development
•2010.05.26-Tips4. iPhone3GSとAndroid1.6の動作の違い in development
•2010.05.26-Tips3. iPhoneで気をつけるべきこと in development
•2010.05.26-Tips2. Androidで気をつけるべきこと in development
•2010.05.26-Tips1. Flashからの変換 in development
•2010.05.26-Coronaの環境構築編 in development
•2010.05.26-Coronaの紹介編 in development
•2010.05.26-『日本代表に応援メッセージを送ろう!』携帯版リリース in news
•2010.05.25-オフィシャルサイトで使った技術その1 in work
•2010.05.25-おっぱいw-cup携帯版をリリースしました! in news
•2010.05.24-会津大学 ソフトウェアスタジオ キックオフ編 in work
•2010.05.24-会津大学 ソフトウェアスタジオ 準備編 in work
•2010.05.22-サッカー日本代表に応援メッセージを送ろう! in news
•2010.05.21-DSNオフィシャルサイトリニューアル in news
•2010.05.17-Processing.jsを使った万華鏡デモ in work
•2010.05.14-CSS3のアニメーション機能 in development
•2010.05.07-複数打ったはずのマーカーが1つしか表示されない in work
•2010.05.07-TwitterSearchAPIのフィードをパースする in work
•2010.04.24-HTML5&CSS3のデモを作成しました in work
•2010.02.16-JSパウワァ&ドラッグ機能の改善ついて in work
•2010.01.08-Processingおもしろい&使えるライブラリ10 in work
•2010.01.04-HTML5を学ぶつもりならスマートフォンを買おう in work
•2009.12.02-マルチタッチディスプレイ vol.02 in work
•2009.10.23-「くままり」で使用したBox2D AS3テクニック in work
•2009.10.22-mixiアプリモバイル作成前に見ておくべき10のまとめ in work
•2009.10.21-mixiアプリの公開手順 in work
•2009.10.15-mixiアプリ「鉄血王女と待受騎士団」をリリース in news
•2009.10.14-mixiアプリのパズルゲームについて in work
•2009.09.07-雑誌ウェブデザイニングに掲載されました! in work
•2009.08.27-mixiアプリ「くままり」をリリース in news
•2009.08.26-くままるのmixiアプリ『くままり』登場 in work
•2009.05.27-もっとがほしいDSN in work
•2009.04.16-Webページで角丸のボックスを作る方法あれこれ in work
•2009.03.02-みんなが大好きjQuery in work
•2009.02.27-マルチタッチディスプレイ vol.01 in work
•2009.02.20-ニールセンのユーザビリティ10原則 in work
•2009.02.11-センサー講座 Spe.001 Wiimote Whiteboard in work
•2009.02.06-センサー講座 Lec.003 Phidgetsインストール in work
•2009.02.06-エラスティックレイアウト in work
•2009.02.05-Jakob Nielsen博士 in work
•2009.01.30-固定幅レイアウト vs. リキッドレイアウト その2 in work
•2009.01.29-センサー講座 Lec.002 phidgetsの購入 in work
•2009.01.24-固定幅レイアウト vs. リキッドレイアウト その1 in work
•2009.01.20-センサー講座 Lec.001 どれを選ぶ? in work
 
 
Copyright © TheDesignium inc. powered by WordPress & mootools.
Relative Keyword|CSS3 HTML5 lab