tween.js in js realisiert den Effekt einer langsamen Animationsbewegung (Beispielcode)

Der Inhalt dieses Artikels befasst sich mit dem langsamen Bewegungseffekt von tween.js in js (Beispielcode). Ich hoffe, dass er für Sie hilfreich ist . .

requestAnimFrame ist kompatibel mit

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

tween.js

Parameter

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

Animationsbewegungsalgorithmus

1. Linear : Linearer, gleichmäßiger Bewegungseffekt;

2. Quadratisch: quadratische Lockerung (t^2);

3. Kubisch: kubische Lockerung (t^2) t ^3);

4. Quartic: Lockerung zur vierten Potenz (t^4);

5. Quintic: Lockerung zur fünften Potenz Moving ( t^5);

6. Sinusoidal: Beschleunigung der Sinuskurve (sin(t));

7. Exponential: Exponentialkurve Ease (2^ t);

8. Kreisförmig: Erleichterung der Kreiskurve (sqrt(1-t^2));

9. Elastisch: Sinusförmige Entspannung mit Exponentialfunktion Zerfall;

10. Zurück: Kubische Entspannung über den Bereich hinaus ((s+1)t^3 – st ^2); 🎜>

    Sprung: Nachlassender Sprung mit exponentiellem Abfall.

11. Jeder Effekt ist in drei Beschleunigungsmethoden unterteilt:

easeIn: Beschleunigung, um von 0 aus zu beschleunigen, also zuerst langsam und dann langsam schnell;

• easeOut: langsamer auf 0, also zuerst schnell und dann langsam;

• easeInOut: Die erste Hälfte beginnt damit beginnt bei 0 zu beschleunigen und verlangsamt sich in der zweiten Hälfte auf 0.

• Beispielseite für die Verwendung des Tween.js-Animationsalgorithmus

Beispiel

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. Zurück nach oben/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)
},

Learning Fun Park, hintenLinksTweenjs

Installation

npm install @tweenjs/tween.js

Beispiel

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

Verwandte Empfehlungen:

So verwenden Sie tween.js zum Implementieren der Navigationsleiste slide_html/css_WEB-ITnose

Eine einfache Animationsbibliothek, die kapselt Tween .js-Beispiel-Tutorial

Detaillierte Einführung in die Tween.js-Animation

Das obige ist der detaillierte Inhalt vontween.js in js realisiert den Effekt einer langsamen Animationsbewegung (Beispielcode). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!