tween.js dans js réalise l'effet du mouvement lent de l'animation (exemple de code)

Le contenu de cet article concerne l'effet de mouvement lent de l'animation obtenu par tween.js en js (exemple de code). Il a une certaine valeur de référence. J'espère que cela vous sera utile. .

requestAnimFrame est compatible avec

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

tween.js

paramètres

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

algorithme de mouvement d'animation

1. Linéaire : effet de mouvement uniforme linéaire

2. Quadratique : assouplissement quadratique (t^2) ; ^3);

3. Quartique : assouplissement à la puissance quatrième (t^4)

4. Quintique : cinq assouplissement de la puissance (t); ^5);

5. Sinusoïdale : Assouplissement de la sinusoïde (sin(t)) ;

6. Exponentielle : Assouplissement de la courbe exponentielle (2^) ; t);

7. Circulaire : assouplissement de la courbe circulaire (sqrt(1-t^2));

8. Élastique : assouplissement sinusoïdal à décroissance exponentielle ;

9. Retour : assouplissement cubique au-delà de la plage ((s+1)

   t^3 – s
t^2

10. Rebond : atténuation exponentielle du rebond.

11. Chaque effet est divisé en trois méthodes d'assouplissement, qui sont :

easeIn : assouplir pour accélérer à partir de 0, c'est-à-dire lentement d'abord, puis rapide ;

• easeOut : ralentissez jusqu'à 0, c'est-à-dire rapide d'abord puis lent

• easeInOut : la première moitié commence à partir de It ; commence à accélérer à 0 et ralentit à 0 dans la seconde moitié.

• Page d'exemple d'utilisation de l'algorithme d'animation Tween.js
  Exemple

1.

Retour en haut/ setInterval

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 <p></p><pre class="brush:php;toolbar:false">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, arrièreGauche

Tweenjsinstallation

Exemple

Recommandations associées :

npm install @tweenjs/tween.js

Comment utiliser tween.js pour implémenter la barre de navigation coulissante_html/css_WEB-ITnose

var box = document.createElement('p');
box.style.setProperty('background-color', '#008800');
box.style.setProperty('width', '100px');
box.style.setProperty('height', '100px');
document.body.appendChild(box);
 
// 动画循环
function animate(time) {
    requestAnimationFrame(animate);
    TWEEN.update(time);
}
requestAnimationFrame(animate);
 
var coords = { x: 0, y: 0 }; // 开始位置
var tween = new TWEEN.Tween(coords) // 创建一个更改目标的tween

.to({ x: 300, y: 200 }, 1000) // 目的位置，1s
.easing(TWEEN.Easing.Quadratic.Out) // 平滑动画
.onUpdate(function() { // 目标更新后调用
    // CSS translation
    box.style.setProperty('transform', 'translate(' + coords.x + 'px, ' + coords.y + 'px)');
})
.start();

Une bibliothèque d'animation simple encapsulant un exemple de tutoriel tween.js

Introduction détaillée à l'animation Tween.js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!