자바스크립트와 CSS3 애니메이션을 함께 사용하는 방법 요약_javascript 스킬

Html5와 CSS3가 점차 주류가 되었을 때에도 저는 여전히 js를 사용하여 간단한 애니메이션을 만드는 데 매우 익숙합니다. 데스크탑 브라우저에서는 모두 CSS3를 지원하는 것은 아닙니다. 사용자도 매우 이상합니다. 모든 사용자가 사용자 습관을 개발할 수 있는 것은 아닙니다. win7.win8이 XP만큼 유용하지 않다고 생각하는 사람들이 항상 많습니다. 그러나 휴대폰 측면은 매우 다릅니다. 모바일 브라우저의 HTML5 및 CSS3 지원은 여전히 ​​매우 좋습니다. 그러나 휴대폰 하드웨어의 처리 능력은 매우 제한적입니다. 쿼드코어와 8코어 휴대폰이 만연한 오늘날에도 나처럼 듀얼코어나 싱글코어 휴대폰을 사용하는 사람들이 여전히 있다. js는 좋은데 노출이 별로 없어서 느낌을 잘 못 조절하는 편이에요. 간단한 페이지 슬라이드가 i7 PC에서는 매우 원활하게 실행되지만 듀얼 코어 휴대폰에서는 멈췄다가 멈췄다가 또 멈춥니다. 매우 우울합니다. 그렇기 때문에 오랫동안 찾아보고 많이 읽었습니다. 마침내 얼마 전 비교적 간단한 방법을 찾았습니다. CSS3를 사용하여 애니메이션을 수행하는 것입니다.

과거에는 Jquery의 애니메이션 및 기타 애니메이션 기능 외에도 setTimeout 및 setInterval을 사용하여 요소의 여백, 너비, 상단 및 기타 속성을 주기적으로 변경하는 사람들이 더 많았습니다. 내가 혼란스러워지는 것은 바로 이 때문이다.

우선 setTimeout과 setInterval을 0ms로 설정하면 연속적으로 실행되지 않습니다. iscroll에서 디버깅하는 동안 우연히 이 비밀을 발견했습니다. 타이머 지연 계산은 브라우저에 내장된 시계에 따라 달라지며 시계의 정확도는 시계 업데이트 빈도에 따라 달라집니다. IE8 및 이전 IE 버전의 업데이트 간격은 15.6밀리초입니다. 끝났습니다. 10ms 안에 1px 변위를 수행하고 싶지만 시간에 맞춰 수행할 수 없습니다.

그리고 카드는 어떻게 됐나요? 코드가 잘 작성되지 않아서 막혔습니다. 결국 js는 단일 스레드이므로 시간이 많이 걸리는 작업이 있으면 UI가 응답하지 않을 수 있습니다. setTimeout을 사용하지만 인터페이스가 불안정해 보이지만 매끄럽지 않은 것은 바로 setTimeout 때문입니다. 이번에 setTimeout을 실행한 후 다음 실행 전 간격에서 시간이 많이 걸리는 또 다른 작업이 발생할 가능성이 높으므로 setTimeout의 실행이 무기한 지연됩니다. 그럼 뭐? 카드! 그러나 카드의 다음 이유는 원래 속성을 변경할 때 실수로 브라우저 레이아웃(예: 릴레이아웃)을 트리거하는 것입니다. 이 문제는 시간이 많이 걸린다고 하는데, 시간이 많이 걸린다고 하지만 무시할 수 있는 경우가 많습니다. 하지만 무시할 수 없는 경우가 많습니다.

위의 두 문단 외에도 또 다른 문제가 있습니다. 즉, 많은 휴대폰에서 항상 한 프레임씩 느껴지는데, 한 프레임은 더 길어지고 다른 프레임은 짧아질 수 있습니다. 이것은 정말로 사람을 불구로 만들 수 있는 리듬이다. 왜 이런 일이 발생합니까? 이는 여전히 설정 시간 초과 지연과 관련이 있습니다. 프레임이 삭제되었습니다. 이 문제는 모니터의 새로 고침 빈도와 관련이 있습니다. 너무 복잡해요.

결국 CSS3를 선택했는데, js는 요소의 속성을 동적으로 변경하고 전환을 사용하여 애니메이션 실행 시간을 제어합니다. 예:

코드 복사 코드는 다음과 같습니다.

js:

코드 복사 코드는 다음과 같습니다.

$("#test").width(200);

이렇게 하면 이 div의 너비는 1초 후에 200px이 됩니다. 손오공이 복숭아로 변해 갑자기 커지는 것이 아니라, 막히지 않고 천천히 앞으로 나아갔다. 그리고 CSS 애니메이션을 사용하면 시간이 많이 걸리는 js의 영향을 받지 않는다는 장점이 있습니다. UI 스레드와 브라우저의 js 스레드는 상호 배타적이지만 CSS 애니메이션에는 적용되지 않으며 많은 브라우저에서 하드웨어 가속(예: Chrome)을 활성화할 수도 있습니다. 브라우저 릴레이아웃은 일반적으로 그다지 명확하지 않지만 대규모 릴레이아웃은 피해야 합니다. 따라서 브라우저가 이 레이어를 독립적으로 렌더링할 수 있도록 애니메이션 요소에 -webkit-transform:transformZ(0); 또는 -webkit-transform:translate3d(0,0,0);를 추가하세요. 불가피하게 레이아웃을 변경하더라도 이렇게 하면 면적이 작아집니다. 여백 대신 번역을 사용하는 것은 실제로 매우 현명한 결정입니다.

마지막으로 변경 사항이 발생할 때 릴레이아웃을 트리거하는 일반적으로 사용되는 몇 가지 속성은 다음과 같습니다.
​

코드 복사 코드는 다음과 같습니다.

너비
키
​패딩
여백
​디스플레이
​테두리 너비
국경
​최소 높이

이상 내용은 이 글에 설명된 내용입니다. 자바스크립트와 CSS3를 배우시는 모든 분들께 도움이 되었으면 좋겠습니다. 동시에 부족한 부분도 추가해 주시기 바랍니다.