Heim > Web-Frontend > js-Tutorial > tween.js in js realisiert den Effekt einer langsamen Animationsbewegung (Beispielcode)

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

不言
Freigeben: 2018-08-15 15:01:50
Original
3461 Leute haben es durchsucht

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);
        };
})();
Nach dem Login kopieren

tween.js

Parameter

/*
 * t: current time(当前时间,小于持续时间,tween返回当前时间目标的状态);
 * b: beginning value(初始值);
 * c: change in value(变化量);
 * d: duration(持续时间)。
*/
Nach dem Login kopieren

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 
Nach dem Login kopieren

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)
},
Nach dem Login kopieren

Learning Fun Park, hintenLinkstween.js in js realisiert den Effekt einer langsamen Animationsbewegung (Beispielcode)Tweenjs

Installation

npm install @tweenjs/tween.js
Nach dem Login kopieren

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();
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage