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

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

不言

Libérer： 2018-08-15 15:01:50

original

3462 Les gens l'ont consulté

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);
        };
})();

Copier après la connexion

tween.js

paramètres

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

Copier après la connexion

algorithme de mouvement d'animation

Linéaire : effet de mouvement uniforme linéaire
Quadratique : assouplissement quadratique (t^2) ; ^3);
Quartique : assouplissement à la puissance quatrième (t^4)
Quintique : cinq assouplissement de la puissance (t); ^5);
Sinusoïdale : Assouplissement de la sinusoïde (sin(t)) ;
Exponentielle : Assouplissement de la courbe exponentielle (2^) ; t);
Circulaire : assouplissement de la courbe circulaire (sqrt(1-t^2));
Élastique : assouplissement sinusoïdal à décroissance exponentielle ;
Retour : assouplissement cubique au-delà de la plage ((s+1)
t^3 – s
Rebond : atténuation exponentielle du rebond.
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

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)
},

Copier après la connexion

Study Fun Park, arrièreGauche

Tweenjs tween.js dans js réalise leffet du mouvement lent de lanimation (exemple de code) installation

Exemple

Recommandations associées :

npm install @tweenjs/tween.js

Copier après la connexion

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();

Copier après la connexion

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!