Easing motion, cuyo nombre científico es Tween, es la abreviatura de buffer motion. Si desea que el contenido de la página cambie cómodamente, utilice efectos de atenuación. Si desea que los elementos de la página se muevan de forma natural, utilice efectos de atenuación. Mezclar estos dos puede producir una variedad de efectos especiales. Gracias a los desarrolladores de Flash que hicieron tanta investigación preliminar por nosotros, simplemente lo sacamos y lo instalamos en varios menús y álbumes de fotos. Empecemos por las cosas más simples, aceleración y desaceleración.
Al ser flexibilizante, debe involucrar los siguientes conceptos: distancia, tiempo y velocidad. Podemos imaginar que hay una recta L, y los puntos A y B son los puntos inicial y final de L. Hay un punto C que se mueve sobre la recta L, desde el punto A hasta el punto B. Generalmente se desconoce el tiempo necesario, pero es necesario determinar la velocidad. Mire la imagen de abajo, queremos que el cuadrado verde se mueva sobre la tira deslizante ligera y ajustada. La esquina superior izquierda de la tira deslizante equivale al punto A, la esquina superior derecha equivale al punto B, la esquina superior izquierda del cuadrado equivale al punto C y la distancia de movimiento es la diferencia entre los anchos de los dos. . Dado que el objeto que movemos tiene un ancho, es decir, el punto C nunca puede coincidir con el punto B. Pero es necesario un destino preciso (por conveniencia, llamémoslo punto D) y debemos calcularlo. Porque durante el movimiento acelerado, el punto C puede exceder al punto D en cualquier momento. Cuando el punto lo excede, debemos terminar el movimiento y tirar del punto C de regreso al punto D.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transicional//ES">
<HTML>
<CABEZA>
<TITLE> Nuevo documento </TITLE>
<META NAME="Generador" CONTENT="EditPlus">
<META NOMBRE="Autor" CONTENIDO="">
<META NOMBRE="Palabras clave" CONTENIDO="">
<META NOMBRE="Descripción" CONTENIDO="">
</CABEZA>
<CUERPO>
<tipo de ESTILO=texto/css>#pista de taxi {
FONDO: #e8e8ff; ANCHO: 800px ALTO: 100px;
}
#mover {
FONDO: #a9ea00; ANCHO: 100px ALTO: 100px;
}
</ESTILO>
<DIV id=calle de rodaje>
<DIV id=mover al hacer clic=mover(esto)></DIV></DIV>
<P class=notice display="text-align:center">Haga clic para mover el cuadrado verde</P>
<Tipo de guión=texto/javascript>
var getCoords = función(el){
var cuadro = el.getBoundingClientRect(),
doc = el.propietarioDocumento,
cuerpo = doc.cuerpo,
html = doc.documentElement,
clienteTop = html.clientTop || cuerpo.clientTop ||
clienteIzquierdo = html.clienteIzquierdo || cuerpo.clienteIzquierdo ||
arriba = box.top + (self.pageYOffset || html.scrollTop || body.scrollTop ) - clientTop,
izquierda = box.left + (self.pageXOffset || html.scrollLeft || body.scrollLeft) - clientLeft
return {'arriba': arriba, 'izquierda': izquierda};
};
var getStyle = función(el, estilo){
si(!+"v1"){
estilo = estilo.reemplazar(/-(w)/g, función(todos, letra){
devolver letra.toUpperCase();
});
valor var = el.currentStyle[estilo];
(valor == "auto")&&(valor = "0px");
valor de retorno;
}demás{
devolver document.defaultView.getComputedStyle(el, null).getPropertyValue(estilo)
}
}
// La función auxiliar 3, equivalente a $(), no usa el símbolo $ para nombrarla porque el parque de blogs usa JQuery, lo que provocará conflictos de nombres.
//Mi método de nueva generación para consultar elementos tiene capacidades de almacenamiento en caché
var caché = []
var _ = función(id){
devolver caché[id] || (caché[id] = document.getElementById(id));
}
var movimiento = función(el){
el.style.position = "absoluto";
var comenzar = getCoords(el).left,
distancia = parseFloat(getStyle(_("pista de rodaje"),"ancho")) - parseFloat(getStyle(el,"ancho")),
final = comienzo + distancia,
speed = 10, //La velocidad del primer movimiento, en px/ms, implícitamente multiplicada por 1ms
delta = 1,5,
cambio = verdadero;
el.onclick = función(){
si(cambiar){
el.innerHTML = "Aceleración";
(función(){
setTimeout(función(){
el.style.left = getCoords(el).left + velocidad + "px";//Mover
velocidad *= delta; //Próxima distancia de movimiento
if(getCoords(el).izquierda >= final){
el.style.left = fin + "px";
cambio = falso;
delta = 0,85,
velocidad = 100;
}demás{
setTimeout(arguments.callee,25);//Permanece durante 25 milisegundos cada vez que te mueves
}
},25)
})()
}demás{
el.innerHTML = "Reducir la velocidad";
(función(){
setTimeout(función(){
el.style.left = getCoords(el).left - velocidad + "px";//Mover
velocidad = Math.ceil(velocidad * delta); //Próxima distancia de movimiento
if(getCoords(el).izquierda <= comenzar){
el.style.left = comenzar + "px";
cambio = verdadero;
delta = 1,5,
velocidad = 10;
}demás{
setTimeout(argumentos.callee,25);
}
},25)
})()
}
}
}
ventana.onload = función(){
mover(_("mover"))
}
</SCRIPT>
</BODY></HTML>
Para obtener sus coordenadas y tamaños en la página, vuelven a entrar en juego getCoords() y getStyle(). Lo siento, realmente no quiero mostrar mis funciones. Es más, getStyle () se ha cortado mucho y su poder ya no es tan poderoso como antes.
//Función auxiliar 1
var getCoords = función(el){
var cuadro = el.getBoundingClientRect(),
doc = el.propietarioDocumento,
cuerpo = doc.cuerpo,
html = doc.documentElement,
clienteTop = html.clientTop || cuerpo.clientTop ||
clienteIzquierdo = html.clienteIzquierdo || cuerpo.clienteIzquierdo ||
arriba = box.top + (self.pageYOffset || html.scrollTop || body.scrollTop ) - clientTop,
izquierda = box.left + (self.pageXOffset || html.scrollLeft || body.scrollLeft) - clientLeft
return {'arriba': arriba, 'izquierda': izquierda};
};
//Función auxiliar 2
var getStyle = función(el, estilo){
si(!+"v1"){
estilo = estilo.reemplazar(/-(w)/g, función(todos, letra){
devolver letra.toUpperCase();
});
valor var = el.currentStyle[estilo];
(valor == "auto")&&(valor = "0px");
valor de retorno;
}demás{
devolver document.defaultView.getComputedStyle(el, null).getPropertyValue(estilo)
}
}