简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Heim
Artikel
Fragen und Antworten
Kurs
Thema
Herunterladen
Spiel
Wörterbuch
kürzliche Updates

Heim  >  Artikel  >  Web-Frontend  >  Detaillierte Einführung in die Tween.js-Animation

Detaillierte Einführung in die Tween.js-Animation

零下一度
零下一度Original
2017-06-26 13:34:382313Durchsuche

1. Die Verwendung von Apply und Call.

Lassen Sie uns zunächst über etwas sprechen, das nichts mit diesem Blog-Beitrag zu tun hat, nämlich die Verwendung von „Apply“ und „Call“. Tatsächlich ist die Verwendung von „Apply“ und „Call“ dieselbe, aber ihre Parameter sind unterschiedlich. apply ist ein Array, während call einzeln übergeben wird, ähnlich einer Aufzählung.

1. Konvertieren Sie Argumente in Standardarrays, und Sie können Push und andere Methoden verwenden. 

function test(){//arguments.push(5); //arguments.push is not a function    console.log(arguments)var arg = Array.prototype.slice.apply(arguments,[]);   // var arg = Array.prototype.slice.call(arguments,'');console.log(arg); //[1,2,3,4]arg.push(5); // [1,2,3,4,5]}

test(1,2,3,4);

2. Wie schiebe ich die Parameter in Argumenten direkt in ein Array? (Auch mit Hilfe von apply) 

function test(){var arg = [];
    Array.prototype.push.apply(arg,arguments);
    console.log(arg); // [1,2,3,4] 是不是发现要把一个数组//插入到另外一个数组的后面不用for循环了，也不用contact了呢？//其实apply 和call还是有多用法，比如继承。其实主要是把//前面对象的方法赋给后面对象而已。比如 object.apply(object1,arg)//把object的方法赋给 object1。而 arg是参数。}

test(1,2,3,4);

Die Folge endet hier. Im Folgenden wird hauptsächlich tween.js erklärt

2. Über Tween.js

1. Tween.js ist eine JS-Ressource, die verschiedene klassische Animationsalgorithmen enthält. Eigentlich eher jQuery.easing.js ähnlich. Auch die Hauptmethodennamen sind gleich. Der Code ohne Komprimierung umfasst nur 800 Zeilen.

umfasst hauptsächlich:

  1. Linear: linearer, gleichmäßiger Bewegungseffekt

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

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

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

  5. Quintic : Abschwächung zur fünften Potenz (t^5);

  6. Sinusförmig: Abschwächung zur Sinuskurve (sin(t));

  7. Exponentiell

    : Entspannung der Exponentialkurve (2^t); : Entspannung der Kreiskurve (sqrt(1-t^2));

    8. Elastisch
  8. : Entspannung der Sinuskurve mit exponentiellem Abfall;

    9. Zurück
  9. : Kubische Entspannung außerhalb des Bereichs ((s +1)*t^3 – s*t^2);

    10. Bounce
  10. : Nachlassender Sprung mit exponentiellem Abfall.

    Jeder Effekt ist in drei Lockerungsmethoden unterteilt:

  11. easeIn

    : beginnt bei 0, um die Lockerung zu beschleunigen , das heißt, zuerst langsamer werden und dann schnell;

easeInOut
    : Die Lockerung beginnt in der ersten Hälfte bei 0 und verlangsamt sich in der zweiten Hälfte auf 0.

  • Viele Freunde, ich kann mich nicht erinnern, welches schneller oder langsamer ist,

    oder
    • Ich werde euch hier noch einmal meine einzigartige böse Notationsmethode beibringen . Bei unserem ersten OOXX waren wir zuerst langsam und dann schneller, als wir wieder herauskamen (
  • ). Als wir gerade herauskamen, wollten wir nicht loslassen, und dann wurde die Geschwindigkeit langsamer. Es entspricht vollständig dem Animationseffekt, den wir hier haben.

    Alle diese Lockerungsalgorithmen sind untrennbar mit den folgenden vier Parametern verbunden: ,

    ,
    • ,
  • , mit der folgenden Bedeutung

    • 2.console.log(TWEEN);

easeIneaseOuteaseIneaseOut

Es ist ersichtlich, dass auf TWEEN viele Methoden montiert sind, und Objekt. Solange wir einen nach dem anderen ausgraben, kennen wir die spezifische Verwendung. tb3. Beginnen wir mit einer kleinen Sequenz. cd

/*
 * t: current time（当前时间）；
 * b: beginning value（初始值）；
 * c: change in value（变化量）；
 * d: duration（持续时间）。 */

console.log(TWEEN)

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>#target{width: 100px;height: 100px;background: red;}</style></head><body><div id="target"></div></body><script src="tween.js?1.1.11"></script><script src="index.js?1.1.11"></script></html>
Befolgen Sie den entsprechenden Quellcode jeder API. Wissen Sie einfach, wie man es benutzt. Im Vergleich dazu umfasst der Quellcode etwas mehr als 800 Zeilen.
4. Bewegungsfunktion 
var position;var target;var tween, tweenBack;

init();
animate();function init() {

    position = {x: 100, y: 100, rotation: 0};
    target = document.getElementById('target');
    tween = new TWEEN.Tween(position)
      .to({x: 700, y: 200, rotation: 359}, 2000)
      .delay(1000)
      .easing(TWEEN.Easing.Elastic.InOut)
      .onUpdate(update);

    tweenBack = new TWEEN.Tween(position)
      .to({x: 100, y: 100, rotation: 0}, 3000)
      .easing(TWEEN.Easing.Elastic.InOut)
      .onUpdate(update);

    tween.chain(tweenBack);
    tweenBack.chain(tween);

    tween.start();

}function animate( time ) {

    requestAnimationFrame( animate );

    TWEEN.update( time );

}function update() {

    target.style.webkitTransform = 'translate('+position.x+ 'px'+','+ position.y + 'px' +')' + 'rotate(' + Math.floor(position.rotation) + 'deg)';//target.style.webkitTransform = 'rotate(' + Math.floor(position.rotation) + 'deg)';
   // target.style.MozTransform = 'rotate(' + Math.floor(position.rotation) + 'deg)';}

5.

Im Leben eines Menschen gibt es viele kleine Straßen, Umwege, große Straßen und holprige Schlammstraßen. Wie auch immer, meine Heimatstadt ist voller holpriger Schlammstraßen. Es ist fast 6 Jahre her, seit ich mit der ersten Website in Kontakt kam. Die Zeit vergeht so schnell und der Verlauf des Lebens ändert sich schnell. Wenn Sie einen hellen Weg außerhalb der holprigen Schlammstraße finden möchten, müssen Sie vorwärts gehen, ohne die Absicht, sich zurückzuziehen. Wie weit Sie in einem Feld kommen können, hängt davon ab, wie lange Sie durchhalten können. Manche Leute sagen, dass man ein Meister auf diesem Gebiet ist, wenn man 10.000 Stunden lang auf einem Gebiet durchgehalten hat. 10000/24? Es scheint mehr als 400 Tage zu dauern. Ohne Schlafzeit, Arbeitszeit und Spielzeit. Es wird geschätzt, dass es 4–6 Jahre dauern wird, bis 10.000 Stunden erreicht sind. Auch ich wünsche euch allen einen schönen Tag und dass alles gut geht.

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in die Tween.js-Animation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
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
Vorheriger Artikel：Vergleichende Analyse von Ereignisverteilungsmechanismen in Android und JavaScriptNächster Artikel：Vergleichende Analyse von Ereignisverteilungsmechanismen in Android und JavaScript

In Verbindung stehende Artikel

Mehr sehen