자바스크립트 부드러운 애니메이션 구현 원리_자바스크립트 기술

물론, 브라우저(특히 IE)의 열악한 js 실행 성능을 고려하면 애니메이션 효과에 영향을 미치게 됩니다.
브라우저의 애니메이션 효과는 주로 js를 사용하여 Dom 요소의 모양을 동적으로 변경합니다. 하지만 CSS는 이 분야에서 역량을 키워가고 있다고 합니다. (기다려보세요^_^)
dom 요소의 모양을 주기적으로 변경해야 하며, 이 주기성은 setTimeout() 및 setInterval()에 의존하여 완료됩니다.
둘 중 어느 것이 더 낫나요? 여기를 참조하세요(jquery 작성자가 작성한 기사)
저는 개인적으로 setInterval을 선호합니다. setTimeout은 재귀적으로 호출해야 하며 스레드가 매우 바쁜 경우 지연됩니다. .
일반적으로 페이지 성능을 업데이트하기 위해 node.style 속성의 동적 할당을 사용합니다. 페이지가 호출될 때마다 다시 그려집니다.
다음과 같이 여러 속성을 동시에 변경하는 상황도 있습니다.
.....
node.style.height = 'value1',
node.style.width = ' value2' ,
node.style.top = value3"
......
이 경우
페이지는 애니메이션 개체의 각 프레임 이동 중에 3번 다시 그려집니다. .속성이 많을수록 매번 다시 그리는 일이 많아집니다.
FF와 Chrome에서는 문제가 없지만 IE에서는 필연적으로 깜박임이 발생합니다.
각 프레임에 애니메이션을 적용할 수 있으면 다시 그려집니다.
ff에서는 여러 속성을 한 번에 업데이트할 수 있는 setAtrribute("style",objStyle);
그러나 ie에서는 스타일이 읽기 전용이므로 값을 할당하려고 하면 즉, 전혀 신경쓰지 않습니다.
현재 이 문제를 해결할 수 있는 모든 브라우저에서 지원하는 cssText 속성이 있습니다.
style.cssText는 포함된 스타일 문자열을 허용합니다. 여러 속성을 동시에 효율적으로 다시 그릴 수 있습니다.
따라서 style.prop을 사용하여 하나씩 업데이트하는 대신 cssText를 사용하여 동시에 여러 속성을 업데이트할 수 있습니다. 🎜> 예: node.cssText = "heigth:100px; width:100px;top:100px";
물론 애니메이션의 부드러움을 위해 주의할 점은 다음과 같습니다.
1. setInterval의 실습을 통해 10이 한계값이라는 것이 입증되었으며 앞으로는 확실하지 않을 수 있지만 지금은 10보다 작게 설정하면 안 됩니다.
2. 애니메이션 경로의 값을 정기적으로 업데이트하기 위해 setInterval을 사용하고 요소를 다시 그리는 과정에서 복잡한 계산을 수행할 필요가 없습니다. setInterval의 시간 매개변수를 사용하여 최적의 상태로 조정해야 합니다.
4. 단계 수에 대한 알고리즘은 Google에서 검색하면 찾을 수 있습니다.
마지막으로 js 애니메이션 효과에 관심이 있다면 왜 주저해야 할까요? 단계별로 자신만의 "비디오" 구현을 시작해보세요.
문제를 구현하는 데 있습니다. , 인기 있는 js 프레임워크가 이를 어떻게 수행하는지 살펴보겠습니다. 이것이 바로 인생입니다....