jsのtween.jsでアニメーションのゆっくりとした動きの効果を実現（サンプルコード）

この記事の内容はjsでのtween.jsを使ったアニメーションのスローモーションの効果についてです（サンプルコード）ので、困っている方は参考にしていただければ幸いです。

requestAnimFrameは

window.requestAnimFrame = (function (callback,time) {
    return window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimaitonFrame ||
        function (callback) {
            window.setTimeout(callback, time);
        };
})();

tween.js

パラメータ

/*
 * t: current time（当前时间,小于持续时间，tween返回当前时间目标的状态）；
 * b: beginning value（初始值）；
 * c: change in value（变化量）；
 * d: duration（持续时间）。
*/

アニメーションモーションアルゴリズム

1. Linear:線形均一モーションエフェクト

2. Quadratic:二次イージング(t^2);

3. 3 次: 3 乗へのイージング (t^3); 4 次: 4 乗へのイージング (t^4)

4. Quintic: 5 乗へのイージング (t^5);

5. Sinusoidal: 正弦曲線のイージング (sin(t));

6. Exponential: 指数曲線のイージング (2^t); Circular: 円曲線のイージング (sqrt (1-t^2)) ;

7. エラスティック: 指数関数的に減衰する正弦波イージング;

8. 範囲を超えた三次イージング ((s+1)

   t^3 – s

バウンス: 指数関数的に減衰するバウンスイージング) 。
各エフェクトは、次の 3 つのイージング モードに分割されます。

10. easeIn: 0 から加速するイージング、つまり、最初は遅く、次に高速です。

11. easeOut: 0 まで減速するイージング、つまり、最初は速く、次にゆっくりです。

easeInOut: イージングは​​前半では 0 から始まり、後半では 0 まで減速します。

• Tween.jsアニメーションアルゴリズム使用例ページ

Example

• 1.

  var t = 0, b = 0, c = 100, d = 10;
  var step = function () {
      // value就是当前的位置值
      // 例如我们可以设置DOM.style.left = value + 'px'实现定位
      var value = Tween.Linear(t, b, c, d);
      t++;
      if (t 

  ログイン後にコピー
2. トップに戻る/setInterval

• backTop(){
          var Tween = {
            Linear: function(t, b, c, d) { //匀速运动
              return c * t / d + b; 
            }
          }
          Math.tween = Tween;
          var t = 0;
          const b = document.documentElement.scrollTop;
          const c = 100;
          const d = 5;
          const setInt = setInterval(()=>{
            t--;
            //console.log(t)
            if(document.documentElement.scrollTop == 0){clearInterval(setInt)}
            //console.log(t);
            const backTop = Tween.Linear(t,b,c,d);
            //console.log(backTop);
            document.documentElement.scrollTop = backTop;
          },5)
  },

  ログイン後にコピー

Study Fun Park, backLeft

Tweenjs

インストール

例

npm install @tweenjs/tween.js

関連する推奨事項: tween.js を使用してナビゲーション バーを実装する方法 slide_html/css_WEB-ITnose

tween.js をカプセル化する簡単なアニメーション ライブラリのサンプル チュートリアル

以上がjsのtween.jsでアニメーションのゆっくりとした動きの効果を実現（サンプルコード）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。