프런트엔드 애니메이션을 구현하는 7가지 방법 요약(코드 포함)

이 글은 프론트엔드 애니메이션을 구현하는 데 사용할 수 있는 7가지 방법(코드 포함)을 요약한 것입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

1. JavaScript는

기본 아이디어는 setInterval 또는 setTimeout 메소드의 콜백 함수를 통해 요소의 CSS 스타일을 지속적으로 호출하고 변경하여 요소 스타일 변경 효과를 얻는 것입니다. .

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

단점: Javascript로 애니메이션을 구현하면 일반적으로 페이지가 자주 다시 정렬되고 다시 그려지므로 성능이 소모됩니다. 일반적으로 데스크톱 브라우저에서 사용해야 합니다. 모바일 단말기에서 사용할 때 명백한 지연이 발생합니다.

2, SVG(확장 가능한 벡터 그래픽);

4, CSS3 애니메이션,

6, requestAnimationFrame;

requestAnimationFrame은 또 다른 웹 API이며 그 원리는 setTimeout 및 setInterval과 유사합니다. 이는 javascript의 연속 루프 메소드 호출을 통해 애니메이션 작업을 트리거합니다. 하지만 requestAnimationFrame은 브라우저에서 애니메이션용으로 특별히 최적화한 API로 성능이 다른 두 가지보다 뛰어납니다.

    <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(ms) .hide(ms) .toggle(ms) 매개변수가 없으면 기본값은 애니메이션 없이 즉시 표시하고 숨기는 것입니다. 표시 속성이 밀리초 매개변수로 구현됩니다. 애니메이션 효과가 있습니다.

toggle은 숨겨진 요소를 표시하고 표시된 요소를 숨깁니다.2) 위아래로 슬라이드: .slideUp(ms) .slideDown(ms) .slideToggle(ms)

3) 페이드 인 및 페이드 아웃: .fadeIn(ms) .fadeOut (ms) .fadeToggle(ms)

2. 범용 애니메이션:

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

params: 스타일 속성과 값을 포함하는 매핑 ​​

speed: 속도 매개변수 [선택]

콜백: 애니메이션이 완료되면 실행되는 함수[선택], 콜백 함수에서 이는 애니메이션을 재생 중인 현재 DOM 요소를 나타냅니다

8. 요약

데스크탑 브라우저는 자바스크립트 직접 사용을 권장합니다. 애니메이션 또는 SVG 방법 구현

모바일 단말기는 CSS3transition, CSS3animation, Canvas 또는 requestAnimationFrame 방법

관련 권장 사항:

프런트 엔드 개발에서 SVG 애니메이션

모바일 웹 프론트 엔드 개발 CSS 애니메이션 경험 공유_ html/css_WEB-ITnose

모바일 애니메이션 기능 encapsulation_html/css_WEB-ITnose

위 내용은 프런트엔드 애니메이션을 구현하는 7가지 방법 요약(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!