Fork
3
Fav
3
View
4324
  • Play

Fullscreen

Smart Phone

Fork tree

  • Readme
  • JavaScript 73 lines
  • HTML 4 lines
  • CSS 31 lines
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プロパティで現在値が取れたので、この方法の利点はほとんどなさそうです。
  • CSS Animationの位置をjsでベジェ曲線を計算して出す
  • CSS Animationの位置をjsでベジェ曲線を計算して出す

play

Complete!

Description What kind of game?

Control Device

jsdo.it websocket controller

Mouse

keyboard

smartphone

Fullscreen

ndruger

Author

Default Panel

Size

  • Width: px
  • Height: px

code

QR Code

Discussion

Questions on this code?

Tags

Favorite by

Forked

sort by