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:
Linear: linearer, gleichmäßiger Bewegungseffekt
Quadratisch: quadratische Lockerung (t^2);
Kubisch: kubische Lockerung Bewegung (t^3);
Quartic: Entspannung zur vierten Potenz (t^4);
Quintic : Abschwächung zur fünften Potenz (t^5);
Sinusförmig: Abschwächung zur Sinuskurve (sin(t));
: Entspannung der Exponentialkurve (2^t); : Entspannung der Kreiskurve (sqrt(1-t^2));
Jeder Effekt ist in drei Lockerungsmethoden unterteilt:
easeIn
: beginnt bei 0, um die Lockerung zu beschleunigen , das heißt, zuerst langsamer werden und dann schnell;Viele Freunde, ich kann mich nicht erinnern, welches schneller oder langsamer ist,
oderAlle diese Lockerungsalgorithmen sind untrennbar mit den folgenden vier Parametern verbunden: ,
,
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>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)';}
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!
