Summary of seven ways to implement front-end animation (with code)

This article brings you a summary of seven methods (with code) that can be used to implement front-end animation. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. JavaScript directly implements

The main idea is through the setInterval or setTimeout method The callback function is continuously called to change the CSS style of an element to achieve the effect of element style change.

<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>

Disadvantages: Javascript implementation of animation usually results in frequent re-arrangement and redrawing of the page, which consumes performance. It should generally be used in desktop browsers. There will be obvious lag when using on mobile terminal.

2. SVG (scalable vector graphics);

3. CSS3 transition;

##4. CSS3 animation;

5, Canvas animation;

6, requestAnimationFrame;

requestAnimationFrame is another Web API, the principle is similar to setTimeout and setInterval, both trigger animation actions through continuous loop method calls in javascript. However, requestAnimationFrame is an API specially optimized by the browser for animation, and its performance is better than the other two.

    <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>

7. jq animation

1) Show and hide:

.show(ms) .hide(ms) .toggle(ms) No When parameters are provided, the default is to show and hide instantly without animation. Principle: Implemented by display attribute, with milliseconds parameter: there will be animation effect.

toggle displays hidden elements and hides displayed elements

2) Slide up and down: .slideUp(ms) .slideDown(ms) .slideToggle(ms)

3) Fade in and out: .fadeIn(ms) .fadeOut(ms) .fadeToggle(ms)

2. Universal animation:

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

params: a map containing style attributes and values ​​

speed: speed parameter [optional]

callback: function executed when the animation is completed [optional] ], this in the callback function refers to the current DOM element that is playing the animation

8. Summary

Desktop browsers recommend using javascript to directly implement animation or SVG. ;

The mobile terminal can consider using CSS3transition, CSS3animation, Canvas or requestAnimationFrame

Related recommendations:

SVG animation in front-end development

Mobile Web front-end development CSS animation experience sharing_html/css_WEB-ITnose

##Mobile end animation function encapsulation_html/css_WEB-ITnose

The above is the detailed content of Summary of seven ways to implement front-end animation (with code). For more information, please follow other related articles on the PHP Chinese website!