[B! JavaScript][programming][easing] mieki256のブックマーク

mieki256 id:mieki256

JavaScriptとprogrammingとeasingに関するmieki256のブックマーク (3)

イージング処理の計算式 - 強火で進め
ちょっと自前でイージング処理を書く必要に迫られ、調査。こちらに計算式を書かれているサイトを発見。イージングって色々な種類が有るんですね。 Easing Equations http://gizma.com/easing/ サイトにはJavaScripでの実装も記載されています。JavaScriptで使いたい場合はこちらのサイトのコードを参考にすると良いでしょう。こちらのサイトで紹介されているイージングは以下のもの Quadratic Cubic Quartic Quintic Sinusoidal Exponential Circular グラフで見るとそれぞれどの様な曲線になってるかを知りたかったのでNodeBoxでグラフにしてみました。引数はそれぞれ以下を設定。 t : 0〜1 b : 0 c : 100 d : 1 因みに、引数はそれぞれ以下のデータのなります。 t : 時間(
mieki256 2014/06/27
easing
リンク
イージング関数チートシート
イージング関数は、時間の経過に伴うパラメーターの変化率を指定します。現実の物体は、即座に動いたり停止したりすることはなく、一定の速度で動くこともほとんどありません。引き出しを開けるとき、私たちは最初に引き出しをすばやく引き出し、それが外に出てくるにつれてゆっくりと動かします。床に向けてなにかを（例えばペンのような）放すと、最初に重力によって下に向かって加速し、床に当たった後上に跳ね返ります。あなたの必要なイージングを選択して、あなたのプロジェクトの中で使用してみてください。
mieki256 2013/09/23
easing

JavaScript
リンク
Easing Equations
Math function easeInSine(x) { return 1 - Math.cos((x * Math.PI) / 2); } CSS transition: transf orm 0.5s cubic-bezier(0.12, 0, 0.39, 0) Math function easeOutSine(x) { return Math.sin((x * Math.PI) / 2); } CSS transition: transf orm 0.5s cubic-bezier(0.61, 1, 0.88, 1)
mieki256 2013/09/23
JavaScript

easing
リンク
1