Résumé de sept façons d'implémenter une animation frontale (avec code)

Ce que cet article vous apporte est un résumé de sept méthodes (avec code) qui peuvent être utilisées pour implémenter une animation frontale. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. pour vous.

1. JavaScript implémente directement

. ou méthode setTimeout. La fonction de rappel est appelée en permanence pour modifier le style CSS d'un élément afin d'obtenir l'effet de changement de style d'élément.

<div id="rect"></div>
 
    <script>
 
        let elem = document.getElementById(&#39;rect&#39;);
 
        let left = 0;
 
        let timer = setInterval(function(){
 
            if(left<window.innerWidth-200){
 
                elem.style.marginLeft = left+&#39;px&#39;;
 
                left ++;
 
            }else {
 
                clearInterval(timer);
 
            }
 
        },16);
 
</script>

Inconvénients : La mise en œuvre Javascript de l'animation entraîne généralement un réarrangement et un redessinage fréquents de la page, ce qui consomme des performances et doit généralement être utilisée dans les navigateurs de bureau. Il y aura un décalage évident lors de son utilisation sur le terminal mobile.

2. SVG (Graphiques vectoriels évolutifs) ;

3. animation ;

5. Animation de toile

6. requestAnimationFrame

requestAnimationFrame est une autre API Web, le principe est similaire à setTimeout et setInterval, tous deux déclenchent des actions d'animation via des appels de méthode en boucle continue en javascript. Cependant, requestAnimationFrame est une API spécialement optimisée par le navigateur pour l'animation, et ses performances sont meilleures que les deux autres.

7. animation jq

    <div id="rect"></div>
 
 <script type="text/javascript">
 
window.requestAnimationFrame = window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame;
 
    let elem = document.getElementById("rect");
 
    let left = 0;
 
    //自动执行持续性回调
 
    requestAnimationFrame(step);
 
    //持续该改变元素位置
 
    function step() {
 
        if(left<window.innerWidth-200){
 
            left+=1;
 
            elem.style.marginLeft = left+"px";
 
            requestAnimationFrame(step);
 
        }
 
    }
 
</script>

1) Afficher masquer : .show(ms) .hide(ms) .toggle(ms ) Sans paramètres, il sera affiché et masqué instantanément par défaut sans animation Principe : Implémenté par l'attribut display, avec paramètre millisecondes : il y aura effet d'animation.

basculer pour afficher les éléments masqués et masquer les éléments affichés

2) Glisser de haut en bas : .slideUp(ms) .slideDown(ms) .slideToggle(ms)

3) Fondu entrant et sortant : .fadeIn(ms) .fadeOut(ms) .fadeToggle(ms)

2. Animation universelle :

$(…).animate(params,speed, callback)

params : une carte contenant des attributs et des valeurs de style

speed : paramètre de vitesse [facultatif]

callback : fonction exécutée lorsque l'animation est terminée [facultatif] ], ceci dans la fonction de rappel fait référence à l'élément DOM actuel qui lit l'animation

8. Résumé

Les navigateurs de bureau recommandent d'utiliser javascript pour implémenter directement l'animation ou SVG ; Le terminal mobile peut envisager d'utiliser CSS3transition, CSS3animation, Canvas ou requestAnimationFrame

Recommandations associées :

Animation SVG en développement front-end

Développement front-end Web mobile Expérience d'animation CSS partage_html/css_WEB-ITnose

Encapsulation des fonctions d'animation mobile_html/css_WEB-ITnose

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!