javascriptのソースでvar result = c * (t

質問

javascriptのソースでvar result = c * (t /= d) * t + b;という関数は何を計算しているのでしょうか？

東京インタラクティブ・アド・アワードのサイトのソースをみたのですが、
http://tokyo.interactive.ad.awards.jp/Results09/index.html

ソースの中にある

<script type="text/javascript">
smoothEaseIn = function(t, b, c, d){
var result = c * (t /= d) * t + b;
return result;
}
//new wrapScroll('sidemenu','content');
var mov2 = new wrapScroll('backtop','content05');
mov2.setTween(smoothEaseIn, 100);
</script>

のうち、

==

smoothEaseIn = function(t, b, c, d){
var result = c * (t /= d) * t + b;
return result;

==

の部分は何を計算しているのでしょうか？
「c * (t /= d) * t + b;」の部分はどういう意味でしょうか？

この部分が「wrapscroll.js」をあらわしているのはわかるのですが、その他のことがあまりわかりません。

詳しい方、ご教授いただけませんでしょうか？

回答No.1

my-- · ベストアンサー

mov2.setTween(smoothEaseIn, 100);

.setTweenはwrapScroll.prototypeに設定されているメソッドですが

//wrapscroll.jsの断片
　setTween: function(f,d){
　　if(f){
　　　this.tween=f;
　　}
　　if(d){
　　　this.Duration=d;
　　}
　},
　tween: function(t,b,c,d){
　　return c * (t /= d) * t + b;
　}

渡された引数をmov2.tween, mov2.Durationに代入してます。プロパティー追加メソッドですね。
Durationのデフォルト値は60ですが、smoothEaseIn関数はあらかじめ用意されてる
tweenメソッドとまったく同じ処理ですから

mov2.setTween(false, 100);

こう書けます。

//wrapscroll.jsの断片
o.e.style.top = t.tween(t._timer++, s, e - s, t.Duration, o.e.style) + 'px';

tweenメソッドはタイマーで呼ばれ続けます。スムースに移動させる肝ですね。
それぞれの値ですが、_timerは実行ごとに1増えるカウンタ。
sは位置設定する要素の配置位置(obj.offsetTop)。eは表示領域上端位置(スクロール量)。
DurationはsetTweenに渡した100。
o.e.styleはオプション。デフォルトでは使われてませんね。

まとめると。

c * (t /= d) * t + b;
表示領域上端と要素位置との差 * (カウンタ /= 100) * カウンタ + 要素位置;

誤読がなければこのように読めるかと。

//単純にした式
smoothEaseIn = function(t, b, c, d, s){
return b + c; //要素位置 + 表示領域上端と要素位置との差
}

お礼

非常にわかりやすい説明ありがとうございました！！

めちゃくちゃわかりやすかったです☆参考にさせていただきます☆
ありがとうございました！