Easing motion, cujo nome científico é Tween, é a abreviatura de buffer motion. Se quiser que o conteúdo da página mude confortavelmente, use efeitos de esmaecimento. Se quiser que os elementos da página se movam naturalmente, use efeitos de atenuação. A mistura dos dois pode produzir uma variedade de efeitos especiais. Graças aos desenvolvedores do Flash que fizeram tantas pesquisas preliminares para nós, nós apenas o retiramos e instalamos em vários menus e álbuns de fotos. Vamos começar com as coisas mais simples, aceleração e desaceleração.
Por ser uma flexibilização, deve envolver os seguintes conceitos: distância, tempo e velocidade. Podemos imaginar que existe uma reta L, e os pontos A e B são os pontos inicial e final de L. Existe um ponto C movendo-se na reta L, do ponto A ao ponto B. O tempo necessário geralmente é desconhecido, mas a velocidade deve ser determinada. Veja a imagem abaixo, queremos que o quadrado verde se mova ao longo da faixa deslizante leve e apertada. O canto superior esquerdo da faixa deslizante é equivalente ao ponto A, o canto superior direito é equivalente ao ponto B, o canto superior esquerdo do quadrado é equivalente ao ponto C e a distância móvel é a diferença entre as larguras dos dois . Como o objeto que movemos tem largura, ou seja, o ponto C nunca pode coincidir com o ponto B. Mas um destino preciso (por conveniência, vamos chamá-lo de ponto D) é necessário e devemos calculá-lo. Porque durante o movimento acelerado, o ponto C pode exceder o ponto D a qualquer momento. Quando o ponto o excede, devemos encerrar o movimento e puxar o ponto C de volta ao ponto D.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<CABEÇA>
<TITLE> Novo documento </TITLE>
<META NAME="Gerador" CONTENT="EditPlus">
<META NAME="Autor" CONTENT="">
<META NAME="Palavras-chave" CONTENT="">
<META NAME="Descrição" CONTENT="">
</HEAD>
<CORPO>
<STYLE type=text/css>#taxiway {
FUNDO: #e8e8ff; LARGURA: 800px;
}
#mover {
FUNDO: #a9ea00; LARGURA: 100px;
}
</STYLE>
<DIV id=pista de táxi>
<DIV id=move onclick=move(this)></DIV></DIV>
<P class=notice display="text-align:center">Clique para mover o quadrado verde</P>
<Tipo SCRIPT=texto/javascript>
var getCoords = function(el){
var box = el.getBoundingClientRect(),
doc = el.ownerDocument,
corpo = doc.corpo,
html = doc.documentElement,
clienteTop = html.clientTop || corpo.clientTop ||
clienteLeft = html.clientLeft || corpo.clientLeft ||
top = box.top + (self.pageYOffset || html.scrollTop || body.scrollTop ) - clientTop,
esquerda = box.left + (self.pageXOffset || html.scrollLeft || body.scrollLeft) - clientLeft
return { 'topo': topo, 'esquerda': esquerda };
};
var getStyle = function(el, estilo){
if(!+"v1"){
estilo = estilo.replace(/-(w)/g, function(tudo, letra){
return letra.toUpperCase();
});
var valor = el.currentStyle[estilo];
(valor == "auto")&&(valor = "0px" );
valor de retorno;
}outro{
retornar document.defaultView.getComputedStyle(el, null).getPropertyValue(estilo)
}
}
//A função auxiliar 3, equivalente a $(), não utiliza o símbolo $ para nomeá-la porque o blog park utiliza JQuery, o que causará conflitos de nomenclatura.
//Meu método de nova geração de consulta de elementos possui recursos de cache
varcache = []
var _ = função(id){
retornar cache[id] || (cache[id] = document.getElementById(id));
}
var mover = função(el){
el.style.position = "absoluto";
var começar = getCoords(el).esquerda,
distância = parseFloat(getStyle(_("taxiway"),"largura")) - parseFloat(getStyle(el,"largura")),
fim = início + distância,
speed = 10, //A velocidade do primeiro movimento, em px/ms, multiplicada implicitamente por 1ms
delta = 1,5,
alterar = verdadeiro;
el.onclick = function(){
se(alterar){
el.innerHTML = "Aceleração";
(função(){
setTimeout(função(){
el.style.left = getCoords(el).left + velocidade + "px";//Mover
velocidade *= delta; //Próxima distância de movimento
if(getCoords(el).left >= fim){
el.style.left=end + "px";
mudança = falso;
delta = 0,85,
velocidade = 100;
}outro{
setTimeout(arguments.callee,25);//Permanece por 25 milissegundos cada vez que você se move
}
},25)
})()
}outro{
el.innerHTML = "Desacelere";
(função(){
setTimeout(função(){
el.style.left = getCoords(el).left - velocidade + "px";//Mover
velocidade = Math.ceil(velocidade * delta); //Próxima distância de movimento
if(getCoords(el).left <= começar){
el.style.left = início + "px";
alterar = verdadeiro;
delta = 1,5,
velocidade = 10;
}outro{
setTimeout(argumentos.callee,25);
}
},25)
})()
}
}
}
janela.onload=função(){
mover(_("mover"))
}
</SCRIPT>
</BODY></HTML>
Para obter suas coordenadas e tamanhos na página, getCoords() e getStyle() entram em ação novamente. Desculpe, eu realmente não quero exibir minhas funções. Além do mais, getStyle() foi bastante cortado e seu poder não é tão poderoso quanto antes.
//Função auxiliar 1
var getCoords = function(el){
var box = el.getBoundingClientRect(),
doc = el.ownerDocument,
corpo = doc.corpo,
html = doc.documentElement,
clienteTop = html.clientTop || corpo.clientTop ||
clienteLeft = html.clientLeft || corpo.clientLeft ||
top = box.top + (self.pageYOffset || html.scrollTop || body.scrollTop ) - clientTop,
esquerda = box.left + (self.pageXOffset || html.scrollLeft || body.scrollLeft) - clientLeft
return { 'topo': topo, 'esquerda': esquerda };
};
//Função auxiliar 2
var getStyle = function(el, estilo){
if(!+"v1"){
estilo = estilo.replace(/-(w)/g, function(tudo, letra){
return letra.toUpperCase();
});
var valor = el.currentStyle[estilo];
(valor == "auto")&&(valor = "0px" );
valor de retorno;
}outro{
retornar document.defaultView.getComputedStyle(el, null).getPropertyValue(estilo)
}
}