CSS Transitions Module Level 3ではCSSプロパティの数値を変化させ、その結果アニメーションなどの効果を表現することができますが、iOSなどの非力なモバイル端末ではどうしてもカクカクしてしまう場合が多いです。

特に要素の位置を動かすなどの処理はコストが高く、よくカクカクするというか、スムーズにアニメーションしてくれないときが多いです。

iOSではCSS3によるGPUアクセラレーターの利用ができ、GPUアクセラレーターをONにすると、今までカクカクしていたCSSによるアニメーション効果もかなりスムーズになります。

基本的には3D処理をさせている場合に有効になりますが、GPUアクセラレーターによるアニメーション処理を行う際、プロパティの指定方法によってはiOSでチラつくことがありまして、、このチラつきはGPUアクセラレーターのON/OFFが切り替わったタイミングで発生しているようで、GPUアクセラレーターを利用したい場合は、常に3D処理をさせる（常にONにしておく）のがよさそうです。

3D処理のスイッチ（便宜上スイッチと呼びますが）については@さんのハマログに書かれてる以下の記述でも出来るのですが

target { -webkit-transform: translate3d(0, 0, 0); }

transformプロパティを使いたくない場合もあるので、transformプロパティを利用しない方法として

target { -webkit-transform-style: preserve-3d; }

このようにtransform-styleにpreserve-3dを指定すると、その要素のアニメーション処理にはGPUアクセラレーターが利用されるようになります。

指摘もらったので追記、ちょっとわかりにくかったかも

transform-style: preserve-3d はGPUアクセラレーターをONにするためのプロパティではありません。3D処理を行うと指定すると、iOSでGPUアクセラレーターがONになるというだけです。

http://dev.w3.org/csswg/css3-3d-transforms/#transform-style-property

※ 今日はフランクな関西弁全開で書いてます

timing-functionってJSで言うてたところのeasingやねん。timing-functionは規定値で

• ease
• ease-in
• ease-out
• ease-in-out
• linear

の5つが用意されとるんやけど、それだけでも結構きれいな数値の変化になるねん。でもカスタム値のcubic-bezierっていうので動きを詳細に決めることができて、これ使うと好きな動きにできるんやで。

linearの動き

例えばlinearの動きはこんな感じに表せるんやけど・・・まだよくわからんよね。

参考

CSS Transitions Module Level 3

http://www.w3.org/TR/css3-transitions/

The ‘transition-timing-function’ Property

http://www.w3.org/TR/css3-transitions/#transition-timing-function_tag

で、このcubic-bezierの指定方法なんやけど、いちいち計算なんかしてられへんから、ツール使ったほうがええよね。とりあえずコレ使ってたらええよっていうのはこれな。

• CSS cubic-bezier Builder

つまみが2つあって、それ動かすと好きなように曲線を変えれるねん。曲線が数値の変化にどう影響するんかってうのは次の図に書いてみたで。動きの比較もできるようになってるから、「Click Here」のとこクリックしてみてや。どんな変化になるんかっていう目安には十分なるから、好きな動きにできると思うで。

あ、そうそう、Y軸は数値の変化、X軸は時間の変化になってるから、それに合わせて考えて曲線動かしてな。ところでJSとかASのeasingにあったbounceとかelasticとかそういう複雑な動きはでけへんから注意しといてや。

「CSS3でつくるローディングアイコン」っていうのを何も考えずに作ったんですけど、同じこと考える人なんかたくさんいるので、1年くらい前から色々存在してました・・・でもせっかくつくったので、もうありますけど、公開しておきます。

くるくる と ぼいんぼいん

あ、せっかくなのでCSS3アニメーションをおさらいしましょう！（今おもいついたから強引につかったとこだけ）

Read more

JavaScript Advent Calendar 2010も22日目！あと3日ですよ。僕はちょうど学んだばかりのCanvasをアウトプットもかねて、まとめと実践を書いてみます。知ることと行うことは同一である、最近行ったセミナーでも言ってました。

jsdo.itにはほんまにこれCanvasなん？なサンプルいっぱいありますね。あーいうの書けるようになりたいなぁとか思いつつ、jQueryばっかりさわってた僕は.animate()メソッドの便利さに取り憑かれていたので、Canvasの絵もまだ上下左右で動かすくらいしかできません。慣れが必要です。。

どうでもいい情報としてCanvasの読み方なんですけど、「キャンバス」じゃなくて「カンバス」が正しいようです。キャンバス・カンバスどっちでもよさげ。僕はキャンバスって読んでました。けどカンバスにします。

前置きはこれくらいにして、今回は次のようなカラフルな箱が延々と落ちていくっていうのを書いてみます。今回のサンプルはすべてCanvasなのでIE8以下だと見れないと思います。あとjsdo.itのサンプルをいくつか貼っているのでRSSだと表示されません。

先に参考サイト紹介してますが、いらない人は飛ばしてください。レッツカンバス！

Read more

jQueryを使えば超簡単にアニメーションもできますし、フェード効果の実装も楽々できますね。簡単に実装できるので結構使ってるサイトを見ますが、カーソルを素早く乗せたり外したりするとチラチラすることが多いんですよね。

何言ってるか文章だと伝わりにくいので、サンプル1を確認してみてください。

どうでもいいっちゃどうでもいいのかも知れないですけど、こういう小さなこだわりって結構重要なんじゃないでしょうか。

で、このチラチラ、簡単に解決できるので知らなかった人は覚えておくといいかもです。

Read more