Easing Motion, dessen wissenschaftlicher Name Tween ist, ist die Abkürzung für Buffer Movement. Wenn Sie möchten, dass der Seiteninhalt bequem wechselt, verwenden Sie Fade-Effekte. Wenn Sie möchten, dass sich Seitenelemente natürlich bewegen, verwenden Sie Beschleunigungseffekte. Das Mischen dieser beiden kann eine Vielzahl von Spezialeffekten erzeugen. Dank der Flash-Entwickler, die so viele Vorabrecherchen für uns durchgeführt haben, haben wir es einfach herausgenommen und in verschiedenen Menüs und Fotoalben installiert. Beginnen wir mit den einfachsten Dingen, Beschleunigung und Verzögerung.
Da es sich um eine Lockerung handelt, muss es sich um die folgenden Konzepte handeln: Distanz, Zeit und Geschwindigkeit. Wir können uns vorstellen, dass es eine gerade Linie L gibt und die Punkte A und B die Anfangs- und Endpunkte von L sind. Es gibt einen Punkt C, der sich auf der geraden Linie L von Punkt A nach Punkt B bewegt. Die benötigte Zeit ist meist unbekannt, die Geschwindigkeit muss jedoch ermittelt werden. Schauen Sie sich das Bild unten an. Wir möchten, dass sich das grüne Quadrat auf dem leichten und engen Gleitstreifen bewegt. Die obere linke Ecke des Gleitstreifens entspricht Punkt A, die obere rechte Ecke entspricht Punkt B, die obere linke Ecke des Quadrats entspricht Punkt C und die Bewegungsstrecke ist die Differenz zwischen den Breiten der beiden . Da das Objekt, das wir bewegen, eine Breite hat, kann Punkt C niemals mit Punkt B zusammenfallen. Aber ein genaues Ziel (der Einfachheit halber nennen wir es Punkt D) ist notwendig, und wir müssen es berechnen. Denn während einer beschleunigten Bewegung kann Punkt C jederzeit Punkt D überschreiten. Wenn der Punkt ihn überschreitet, müssen wir die Bewegung beenden und Punkt C zurück zu Punkt D ziehen.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<KOPF>
<TITLE> Neues Dokument </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Autor" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Beschreibung" CONTENT="">
</HEAD>
<KÖRPER>
<STYLE type=text/css>#taxiway {
HINTERGRUND: #e8e8ff; BREITE: 800px; HÖHE: 100px
}
#bewegen {
HINTERGRUND: #a9ea00; BREITE: 100px; HÖHE: 100px
}
</STYLE>
<DIV id=taxiway>
<DIV id=move onclick=move(this)></DIV></DIV>
<P class=notice display="text-align:center">Klicken Sie, um das grüne Quadrat zu verschieben</P>
<SCRIPT-Typ=Text/Javascript>
var getCoords = function(el){
var box = el.getBoundingClientRect(),
doc = el.ownerDocument,
body = doc.body,
html = doc.documentElement,
clientTop = html.clientTop ||. body.clientTop || 0,
clientLeft = html.clientLeft ||. body.clientLeft || 0,
top = box.top + (self.pageYOffset || html.scrollTop || body.scrollTop ) - clientTop,
left = box.left + (self.pageXOffset || html.scrollLeft || body.scrollLeft) - clientLeft
return { 'top': top, 'left': left };
};
var getStyle = function(el, style){
if(!+"v1"){
style = style.replace(/-(w)/g, function(all, letter){
Rückgabebrief.toUpperCase();
});
var value = el.currentStyle[style];
(value == "auto")&&(value = "0px" );
Rückgabewert;
}anders{
return document.defaultView.getComputedStyle(el, null).getPropertyValue(style)
}
}
//Hilfsfunktion 3, äquivalent zu $(), verwendet nicht das $-Symbol zur Benennung, da der Blogpark JQuery verwendet, was zu Namenskonflikten führt.
//Meine Methode der neuen Generation zum Abfragen von Elementen verfügt über Caching-Funktionen
var-cache = []
var _ = Funktion(id){
return Cache[id] ||. (cache[id] = document.getElementById(id));
}
var move = function(el){
el.style.position = "absolute";
var begin = getCoords(el).left,
distance = parseFloat(getStyle(_("taxiway"),"width")) - parseFloat(getStyle(el,"width")),
Ende = Anfang + Distanz,
speed = 10, //Die Geschwindigkeit der ersten Bewegung, in px/ms, implizit multipliziert mit 1ms
Delta = 1,5,
ändern = wahr;
el.onclick = function(){
if(change){
el.innerHTML = "Beschleunigung";
(Funktion(){
setTimeout(function(){
el.style.left = getCoords(el).left + speed + "px";//Move
speed *= delta; //Nächste Bewegungsdistanz
if(getCoords(el).left >= end){
el.style.left = end + "px";
change = false;
Delta = 0,85,
Geschwindigkeit = 100;
}anders{
setTimeout(arguments.callee,25);//Bleiben Sie bei jeder Bewegung 25 Millisekunden lang
}
},25)
})()
}anders{
el.innerHTML = „Langsamer“;
(Funktion(){
setTimeout(function(){
el.style.left = getCoords(el).left - speed + "px";//Move
speed = Math.ceil(speed * delta); //Nächste Bewegungsdistanz
if(getCoords(el).left <= begin ){
el.style.left = begin + "px";
ändern = wahr;
Delta = 1,5,
Geschwindigkeit = 10;
}anders{
setTimeout(arguments.callee,25);
}
},25)
})()
}
}
}
window.onload = function(){
move(_("move"))
}
</SCRIPT>
</BODY></HTML>
Um deren Koordinaten und Größen auf der Seite zu erhalten, kommen erneut getCoords() und getStyle() ins Spiel. Entschuldigung, ich möchte meine Funktionen wirklich nicht zur Schau stellen. Darüber hinaus wurde getStyle() stark eingeschränkt und seine Leistung ist nicht mehr so leistungsstark wie zuvor.
//Hilfsfunktion 1
var getCoords = function(el){
var box = el.getBoundingClientRect(),
doc = el.ownerDocument,
body = doc.body,
html = doc.documentElement,
clientTop = html.clientTop ||. body.clientTop || 0,
clientLeft = html.clientLeft ||. body.clientLeft || 0,
top = box.top + (self.pageYOffset || html.scrollTop || body.scrollTop ) - clientTop,
left = box.left + (self.pageXOffset || html.scrollLeft || body.scrollLeft) - clientLeft
return { 'top': top, 'left': left };
};
//Hilfsfunktion 2
var getStyle = function(el, style){
if(!+"v1"){
style = style.replace(/-(w)/g, function(all, letter){
Rückgabebrief.toUpperCase();
});
var value = el.currentStyle[style];
(value == "auto")&&(value = "0px" );
Rückgabewert;
}anders{
return document.defaultView.getComputedStyle(el, null).getPropertyValue(style)
}
}