Works

CSS Animationの位置をjsでベジェ曲線を計算して出す

CSS Animations + CSS Transformsでアニメーションさせる時の問題点として、特定時刻の位置が不明なことがあります。 CSS Animationの移動のグラフはCSS3 Transitionで規定されているのでjsでも時刻から位置を計算することが出来ます。 http://www.w3.org/TR/2009/WD-css3-transitions-20090320/#transition-timing-function_tag 常に計算するのは相当重いですが、ユーザー操作時のみ(動いているキャラクターに対して、タッチと同じx座標の時にキャラクターに何かするなど)など、特定のタイミングで計算して扱うのは、使い方としてありえそうです。 今回のサンプルではCSS Animationに対して、JSでベジュ曲線で位置を計算した赤いボックスを動かしています。 方程式を解くのが面倒だったので、今回はニュートン法で近似してます。 [2011/08/24 追記] 本コードのcss animationではleftプロパティを変更してますが、単にleftの変更をする場合、getComputedStyle()で現在適応されている値を取るのが妥当です。 ベジェ曲線のjsでの計算はcss transformのtranslateで移動させる場合などへの利用を想定してます。 (iPhoneのcss transforms(translate) + css animationは非常になめらかに動くため) transformで移動させる場合も、getComputedStyle()でcomputed valueが取れて指定しても速度に必要なさそうなプロパティがあれば、それを%の判定に利用するのが良さそうですが、下記を見た限りなさそうですね。 http://www.w3.org/TR/css3-transitions/#animatable-properties- [2011/09/11] css transforms + css animationsの場合でも、getComputedStyle()のwebkitTransformプロパティで現在値が取れたので、この方法の利点はほとんどなさそうです。

  • 4287
  • 3

css transitionsでsetTimeout()を使って適用を遅らせないといけない例

css transitionsの適用を、要素の作成と同時に行うとアニメーションしない例。 要素の生成と同時にcss transistionを適用すると、ブラウザが、どの値をcss transitionsを適用したいプロパティの現在の値とすべきなのか判断できないためと思われる。 さすがにこの場合に勝手にinitial valueからの変化と見なして、transparent -> #ffff00へのアニメーションとするのはまずいし妥当な動作。 [2011/08/28 追記] forkedされたtsmallfieldさんの下記のページより、ドキュメントツリーに先に追加して、リフローさせた後で適用するとアニメーションとして適用されるとのこと。 forked: css transitionsでsetTimeout()を使って適用を遅らせないといけない例 http://jsdo.it/tsmallfield/wEUH

  • 3122
  • 4

cssのみで万華鏡もどき

-webkit-box-reflectは反射した表示を更に反射できるので、万華鏡を作れないかと思ったのですが、3角形を敷き詰めるのは難しかったので、とりあえず4角形で妥協しました。 Chromeの最新版以外では正しく動かないようです。 - iPhone4: すごく遅い - Safari5.1: 表示が少しおかしい - Firefox: box-reflectに対応していないので対象としていない

  • 2710
  • 6

Skills

Hot tags

Categories

HTML / CSS / JavaScript