feb19.jp

Nobuhiro Takahashi
Designer / Engineer

Flash Player 11 Molehill の cubicCurveTo() で CSS3 の transition-timing-function: cubic-bezier() を設定するツールを作りました

Flash Player 11 Molehill の cubicCurveTo() で CSS3 の transition-timing-function: cubic-bezier() を設定するツールを作りました

タイトルが謎の呪文になりつつあります。Flash Player 11 がインキュベータリリースされて、3D だ! 3D だ!と騒がれていますが、しばらくその辺に触る余裕が無いのでちょっと悲しい日々。少しでもと cubicCurveTo() を使ってみたというお話です。

Flash Player 11 では Graphics.cubicCurveTo() という関数が追加されたので、Graphics.moveTo() と合わせて三次元ベジエ曲線(イラレのペンツールのベジエ曲線)が描けるようになりました。

this.graphics.lineStyle(0, 0xff0000);
this.graphics.moveTo(0, 0);
this.graphics.cubicCurveTo(100, 0, 0, 100, 100, 100);

↓実行

[Flash Player 11 のキャプチャ画像]
Flash Player 11 のキャプチャ画像

そして CSS3 の特に webkit 系のブラウザでは -webkit-transition-timing-function: cubic-bezier(x0, y0, x1, y1); に三次元ベジエ曲線のコントロールポイント 2 点を与えると、時間と値をマトリックスにしたイージングを作る事が出来ます。(moz 系でも対応?とりあえず今 CSS3 を使う場所は iPhone/Android 限定だから調べてません。。)

まさに Flash の「モーショントゥイーン」の「イージングカーブ」ですね。

div で出来たボックスを left 0px から 100px へ移動するアニメーションだとこんな感じで設定します。

.box {
    position:absolute;
    background-color:red;
    top:0px;
    left:0px;
    width:50px;
    height:50px;
    -webkit-transition-property: all;
    -webkit-transition-duration: 1s;
    -webkit-transition-repeat-count: infinity;
    -webkit-transition-timing-function: cubic-bezier(0.2, 0, 0.7, 1);
}
body:hover .box {
    left: 100px;
}

というわけで CSS3 でアニメーション制作する場合にちょっと便利そうで、 Flash Player 11 の機能を利用したツールを作ってみたわけです。

実行には Flash Player 11 が必要です。
インキュベータリリースがダウンロードできます。
http://labs.adobe.com/downloads/flashplatformruntimes_incubator.html

そんなたいそれた物ではないですが、Flash の画面上でイージングベジエ曲線のコントロールポイント調整すると、自動的にオーバーレイしている赤い<div>ボックスのスタイル宣言が更新されて、シームレスにチェックできるツールの巻:

青いコントロールポイントを動かす事が出来ます。

Navigation

prev: VIM (Vi) をターミナルで操作 / Mac OS X
next: Mac OS X Lion に Android SDK を入れる

Recently Entries