L'assouplissement du mouvement, dont le nom scientifique est Tween, est l'abréviation de mouvement tampon. Si vous souhaitez que le contenu de la page change confortablement, utilisez des effets de fondu. Si vous souhaitez que les éléments de la page se déplacent naturellement, utilisez des effets d'accélération. Mélanger ces deux éléments peut produire une variété d’effets spéciaux. Grâce aux développeurs Flash qui ont effectué de nombreuses recherches préliminaires pour nous, nous l'avons simplement retiré et installé dans divers menus et albums photo. Commençons par les choses les plus simples, l'accélération et la décélération.
Puisqu'il s'agit d'un assouplissement, il doit faire intervenir les notions suivantes : distance, temps et vitesse. Nous pouvons imaginer qu’il existe une droite L, et que les points A et B sont les points de départ et d’arrivée de L. Il y a un point C se déplaçant sur la droite L, du point A au point B. Le temps requis est généralement inconnu, mais la vitesse doit être déterminée. Regardez l'image ci-dessous, nous voulons que le carré vert se déplace sur la bande coulissante légère et étanche. Le coin supérieur gauche de la bande coulissante est équivalent au point A, le coin supérieur droit est équivalent au point B, le coin supérieur gauche du carré est équivalent au point C et la distance de déplacement est la différence entre les largeurs des deux. . Puisque l’objet que l’on déplace a une largeur, c’est-à-dire que le point C ne peut jamais coïncider avec le point B. Mais une destination précise (par commodité, appelons-la point D) est nécessaire, et nous devons la calculer. Parce que lors d'un mouvement accéléré, le point C peut dépasser le point D à tout moment. Lorsque le point le dépasse, nous devons terminer le mouvement et ramener le point C au point D.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<TÊTE>
<TITLE> Nouveau document </TITLE>
<META NAME="Générateur" CONTENT="EditPlus">
<META NAME="Auteur" CONTENT="">
<META NAME="Mots clés" CONTENT="">
<META NOM="Description" CONTENT="">
</HEAD>
<CORPS>
<STYLE type=text/css>#taxiway {
FOND : #e8e8ff ; LARGEUR : 800 px ; HAUTEUR : 100px ;
}
#se déplacer {
FOND : #a9ea00 ; LARGEUR : 100 px ;
}
</STYLE>
<DIV id=voie de circulation>
<DIV id=move onclick=move(this)></DIV></DIV>
<P class=notice display="text-align:center">Cliquez pour déplacer le carré vert</P>
<type SCRIPT=texte/javascript>
var getCoords = fonction(el){
var box = el.getBoundingClientRect(),
doc = el.ownerDocument,
corps = doc.corps,
html = doc.documentElement,
clientTop = html.clientTop || corps.clientTop ||
clientLeft = html.clientLeft || corps.clientLeft ||
top = box.top + (self.pageYOffset || html.scrollTop || body.scrollTop ) - clientTop,
left = box.left + (self.pageXOffset || html.scrollLeft || body.scrollLeft) - clientLeft
return { 'top' : haut, 'gauche' : gauche };
} ;
var getStyle = fonction(el, style){
si(!+"v1"){
style = style.replace(/-(w)/g, function(tout, lettre){
return letter.toUpperCase();
});
var value = el.currentStyle[style];
(value == "auto")&&(value = "0px" );
valeur de retour ;
}autre{
return document.defaultView.getComputedStyle(el, null).getPropertyValue(style)
}
}
//La fonction auxiliaire 3, équivalente à $(), n'utilise pas le symbole $ pour la nommer car le parc de blogs utilise JQuery, ce qui provoquerait des conflits de noms.
//Ma méthode de nouvelle génération d'interrogation d'éléments a des capacités de mise en cache
var cache = []
var _ = fonction(id){
retourner le cache[id] || (cache[id] = document.getElementById(id));
}
var move = fonction(el){
el.style.position = "absolu" ;
var start = getCoords(el).left,
distance = parseFloat(getStyle(_("taxiway"),"width")) - parseFloat(getStyle(el,"width")),
fin = début + distance,
speed = 10, //La vitesse du premier mouvement, en px/ms, implicitement multipliée par 1 ms
delta = 1,5,
changement = vrai ;
el.onclick = fonction(){
si(changer){
el.innerHTML = "Accélération";
(fonction(){
setTimeout(fonction(){
el.style.left = getCoords(el).left + vitesse + "px";//Déplacer
vitesse *= delta; //Prochaine distance de déplacement
if(getCoords(el).left >= fin){
el.style.left = fin + "px" ;
changement = faux ;
delta = 0,85,
vitesse = 100 ;
}autre{
setTimeout(arguments.callee,25);//Reste 25 millisecondes à chaque mouvement
}
},25)
})()
}autre{
el.innerHTML = "Ralentir";
(fonction(){
setTimeout(fonction(){
el.style.left = getCoords(el).left - vitesse + "px";//Déplacement
speed = Math.ceil(speed * delta); //Prochaine distance de déplacement
if(getCoords(el).left <= début ){
el.style.left = début + "px" ;
changement = vrai ;
delta = 1,5,
vitesse = 10 ;
}autre{
setTimeout(arguments.callee,25);
}
},25)
})()
}
}
}
window.onload = fonction(){
déplacer(_("déplacer"))
}
</SCRIPT>
</BODY></HTML>
Afin d'obtenir leurs coordonnées et tailles sur la page, getCoords() et getStyle() entrent à nouveau en jeu. Désolé, je ne veux vraiment pas montrer mes fonctions. De plus, getStyle() a été souvent coupé et sa puissance n'est plus aussi puissante qu'avant.
//Fonction auxiliaire 1
var getCoords = fonction(el){
var box = el.getBoundingClientRect(),
doc = el.ownerDocument,
corps = doc.corps,
html = doc.documentElement,
clientTop = html.clientTop || corps.clientTop ||
clientLeft = html.clientLeft || corps.clientLeft ||
top = box.top + (self.pageYOffset || html.scrollTop || body.scrollTop ) - clientTop,
left = box.left + (self.pageXOffset || html.scrollLeft || body.scrollLeft) - clientLeft
return { 'top' : haut, 'gauche' : gauche };
} ;
//Fonction auxiliaire 2
var getStyle = fonction(el, style){
si(!+"v1"){
style = style.replace(/-(w)/g, function(tout, lettre){
return letter.toUpperCase();
});
var value = el.currentStyle[style];
(value == "auto")&&(value = "0px" );
valeur de retour ;
}autre{
return document.defaultView.getComputedStyle(el, null).getPropertyValue(style)
}
}