MMD on WebGL カメラとライトと表情のモーションに対応（あと補間曲線について） - by edvakf in hatena
タイトルの通りです。VMD を読み込んだり、CoffeeScript で全部書きなおしてたりしたら時間がかかってしまいました。 http://edv.sakura.ne.jp/mmd/ （10月16日現在、開くと動き始めるはずです） ここからが本題。 補間曲線について MMD の補間曲線はベジエ曲線で、ベジエ曲線に必要な4つの点のうち、最初と最後が固定されている。すなわち、 こんな感じ。 を表す4つの数字は VMD ファイルに0から127までの整数として記録されていて、これらを127で割ってそれぞれの座標とする。 また、例えば登録されているキーフレームが10と20だったとして、13番目のフレームを描画したいとすると、 となる。 この5つの数字からまず を求め、次に を求めるのだが、 を求めるためには三次方程式を解かなければいけない。 幸いにして、この は常に（ によらず）単調増加らしい。厳
CSS3 のベジエ曲線のアニメーションを実装してみたい - melpon日記 - HaskellもC++もまともに扱えないへたれのページ
CSS3 の ease-in や ease-out は結構綺麗なので、あの動きを実装してみようかなーと思ったわけです。 CSS3 のベジエ曲線は３次曲線なので４点が必要ですが、最初の点と最後の点は固定値なので、指定するのは２番目と３番目の位置だけです。 Ceaser - CSS Easing Animation Tool - Matthew Lein がすごく分かりやすい。 で、３次のベジエ曲線の計算式は らしいです。 で、CSS3 では と というのは固定で、,,, の範囲も決まっているので、 となります。 ただこの式を直接使えばいいかというとそうではなくて、CSS3 ではX軸を時間軸として、Y軸を結果の軸として使っているので、 から を求め、その求めた から を求める必要があります。 ということで を３次方程式として求めて を出せばいいかなと思い、ちょっと解の公式をググってみると何かい
.animate() | 私的なjQuery他
.animate( properties [, duration] [, easing] [, complete] ) 返り値：jQuery 概要 CSS プロパティをアニメーション(連続して値を変更)する 用法 .animate( properties [, duration] [, easing] [, complete] ) 1.0で追加 properties [プレーンオブジェクト] アニメーションさせる CSS プロパティとその最終値の オブジェクト duration (デフォルト: 400) [数値 or 文字列] アニメーションを実行する時間の長さ。数値はミリ秒単位。 文字列は"fast"(200ms)か "slow"(600ms)を指定できる easing (デフォルト: "swing") [文字列] アニメーションの進み方を定義する easing 関数を 表す文字列 co
jQuery Easing - jQuery 日本語リファレンス
Easing/jQuery easingとは、エフェクトの動きを加速/減速させるための関数です。 例えばフェードアウトの動きを考えたとき、通常は透明度の変化量は経過時間に対して線形です。全体で1秒かかって消える処理であれば、0.5秒経過時の透明度は0.5になります。 しかし、ここでeaseInQuadの動きを適用すると、変化量は線形ではなく2次関数の曲線になります。（下記サンプル参照） そのため、最初はゆっくりと薄くなっていき、後半に急激に消えていくような効果が得られます。 特別なことをしなくても使うことの出来るeasingは"linear"と"swing"の2種類だけですが、プラグインなどを入れることで多くのeasingを利用することができます。 このeasingプラグインでは、version 1.3時点で32パターンが提供されています。 これ以外にもeasingは比較的容易に自作するこ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Ceaser - CSS Easing Animation Tool - Matthew Lein
