Dès que vous entendez ce nom, vous saurez que les effets de ce cadre peuvent essentiellement être réalisés en ligne. En fait, le cadre de mouvement précédent avait encore des limites, c'est-à-dire que plusieurs valeurs ne peuvent pas être déplacées ensemble.
Alors, comment résoudre ce problème? Jetons un coup d'œil au cadre sportif précédent
fonction getSTyle (obj, name) {if (obj.currentStyle) {return obj.currentStyle [name]; } else {return getCompuledStyle (obj, null) [name]; }} fonction startmove (obj, attr, itarget) {ClearInterval (obj.time); obj.time = setInterval (function () {var cur = 0; if (att == 'opacity') {cur = math.round (parsefloat (getStyle (obj, att)) * 100);} else {cur = parseInt (getStyle (obj, att)));} var speed = (itarget - cur) / 6; Math.floor (Speed); 'px';}}}}, 30);}Comment le modifier? C'est en fait très simple. Dans les cadres passés, vous ne pouviez passer qu'un seul style et une valeur à la fois. Ensuite, changez-les en un objet JSON. Je crois que tout le monde comprendra.
Lorsque nous l'appelons, startmove (odiv, {largeur: 200, hauteur: 200}); Si nécessaire, ajoutez la fonction de rappel. Voyons donc comment le code est modifié.
fonction startmove (obj, json, fnend) {var max = 18; // Chaque minuterie est appelée, il n'y a qu'un seul temporisateur fonctionne (le temporisateur existant est désactivé lorsque le mouvement démarre) // et la minuterie de l'objet actuel est fermée ou activée, ce qui empêche les conflits avec d'autres minuteries sur la page, de sorte que chaque minuterie n'interfère pas les unes avec les autres ClearInterval (Obj.Timer); obj.timer = setInterval (function () {var bstop = true; // en supposant: toutes les valeurs ont atteint (var name dans json) {var itarget = json [name]; // point cible // gère la transparence Pour rond var cur = math.round (parsefloat (getStyle (obj, nom) * 100);} else {var cur = parseInt (getStyle (obj, nom)); Speed = Speed> 0? Math.Ceil (Speed): Math.floor (Speed); chrome} else {obj.style [name] = cur + speed + 'px';} // une certaine valeur n'est pas égale au point cible if (cur! = itarget) {bstop = false;}} // Le point cible a été atteint if (bstop) {ClearInterval (obj.timer); if (fnend) // seule cette fonction est réalisée, appelez {fnend (); }}}}, 20);}Pourquoi y a-t-il des hypothèses sur BSTOP?
En fait, si j'appelle startmove (odiv, {width: 101, hauteur: 200}); La largeur devient 101, le mouvement a été achevé, la hauteur n'a pas atteint, mais nous avons peut-être désactivé la minuterie actuelle. L'exercice a pris fin et un bogue se produira dans des circonstances particulières. Expliquons:
En fait, il faut tout le mouvement pour éteindre la minuterie avant d'atteindre la fin. Inversement, s'il n'y a rien qui n'est pas possible, alors éteignez-le. Définissez par programme une valeur booléenne, qui est vraie au début, en supposant
Toutes les valeurs sont arrivées. S'il y a une valeur qui n'égale pas le point cible, BSTOP est faux. Une fois le cycle entier terminé, BSTOP est en ture, ce qui signifie que tous les mouvements ont été achevés et que la minuterie est désactivée pour le moment.
Ensuite, ce cadre de mouvement est essentiellement terminé et CSS2 n'est pas applicable à CSS3.
Résumer:
L'évolution du cadre de mouvement
Cadre de mouvement startmove (itarget)
startmove (obj, itarget) multi-objet
startmove (obj, att, itarget) toute valeur
STARTMOVE (OBJ, att, ITarget, FN) Mouvement de la chaîne
Startmove (OBJ, JSON, FN) Sports parfaits
O (∩_∩) o merci ~