スクロールで発生するアニメーションが終わる前に次のアニメーションに移る場合の挙動について

Question

three.js, tween.jsを使用して、ランダムに動くパーティクルがページの中央までスクロールすると集合し図形を型取り、ページ下部までスクロールするとまたランダムな動きに戻るという実装をしました。

ゆっくりスクロールすると想定通りの動きをするのですが、スクロールが早いと集合した図形のままとまってしまい、ランダムに戻らなくなってしまいます。
以下、現状のデモになります。

デモ

スクロールイベントは以下のようなコードで実装しているのですが、どこを修正すれば早いスクロールでも想定通りの動きになるのでしょうか。

var random_judge = false
  var dfractal_judge = false
  $(window).scroll(function() {
    var scTop = $(window).scrollTop()
    if (scTop <= start_point || scTop >= end_point) {
      if (!random_judge) {
        random_judge = true
        dfractal_judge = false
        transform_random()
      }
    } else if (scTop > start_point && scTop <= end_point) {
      if (!dfractal_judge) {
        random_judge = false
        dfractal_judge = true
        transform_dfractal()
      }
    }
  })

  function transform_random() {
    // wrapper.position.y = 0
    const SIZE = 500
    for (var i = 0; i < par_n; i++) {
      for (var j = 0; j < d_fractalArray[0].length; j++) {
        if (rndArray[i][j]) {
          pTween[j] = new TWEEN.Tween(geometry[i].vertices[j])
            .to({ x: rndArray[i][j].x, y: rndArray[i][j].y, z: rndArray[i][j].z }, 1000)
            .easing(TWEEN.Easing.Quintic.In)
            .start()
        }
      }
    }
  }

  function transform_dfractal() {
    wrapper.position.x = 120
    var hogen = 0
    for (var i = 0; i < par_n; i++) {
      for (var j = 0; j < d_fractalArray[0].length; j++) {
        if (d_fractalArray[i][j]) {
          pTween[j] = new TWEEN.Tween(geometry[i].vertices[j])
            .to({ x: d_fractalArray[i][j].x * 1.1 + 100, y: d_fractalArray[i][j].y * 1.1, z: d_fractalArray[i][j].z * 1.1 }, 2500)
            .easing(TWEEN.Easing.Quartic.Out)
            .start()
        } else {
          num = j - 794
          pTween[j] = new TWEEN.Tween(geometry[i].vertices[j])
            .to({ x: d_fractalArray[i][num].x * 1.1 + 100, y: d_fractalArray[i][num].y * 1.1, z: d_fractalArray[i][num].z * 1.1 }, 2500)
            .easing(TWEEN.Easing.Quartic.Out)
            .start()
        }
      };
    }
  }

Answer 1

scrollイベント自体の回数を減らすとか、setTimeout で「スクロールが終わった後」に1回処理を行うとかどうでしょう。

【scrollイベントの負荷を減らす】
https://qiita.com/yoshiiiiie/items/135dafcdde1f9b097fcf

【Webフロントエンドに従事するお前らはいい加減高頻度イベントとレイアウトとスタイリングの付き合い方を考えろ】
https://qiita.com/damele0n/items/f4050649de023a948178

Comments

[LayCharles]

throttleを用い、スクロールイベントを減らすことで解決できました！
負荷もへったことで、気持ち動きもなめらかになったように感じます。
有難うございました。