js 애니메이션과 CSS 애니메이션의 차이점은 무엇입니까

차이점: 1. JS는 프레임별 애니메이션이고 각 프레임은 코드로 제어되며 코드 복잡성이 높습니다. CSS는 키 프레임 애니메이션이며 트윈 애니메이션 부분은 브라우저에 의해 완료됩니다. 코드 복잡도가 낮습니다. 2. js 애니메이션은 차단 및 대기하기 쉬운 메인 스레드에서 실행됩니다. CSS 애니메이션은 작업 전용이며 메인 스레드를 차단하지 않는 합성 스레드에서 실행됩니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, CSS3&&javascript 버전 1.8.5, Dell G3 컴퓨터.

js 애니메이션과 CSS 애니메이션의 차이점

차이점 1:

js는 프레임별 애니메이션이며, 각 프레임이 코드로 제어되지 않으면 쉽게 역류가 발생할 수 있습니다

css. 핵심 프레임입니다. 애니메이션 및 트위닝 애니메이션 부분은 브라우저에서 완료되므로 브라우저 최적화가 용이하고 애니메이션 실행 프로세스를 더 잘 제어할 수 있습니다. js 애니메이션의 코드 복잡성은 CSS 애니메이션의 코드 복잡성보다 높습니다.

Node.js 애니메이션은 메인 스레드에서 수행해야 할 다른 작업이 있어 쉽게 차단 및 대기가 발생하고 애니메이션 실행 효율성이 저하됩니다.

CSS 애니메이션은 합성 스레드에서 실행되며 해당 작업에 전념하지 않습니다. 메인 스레드를 차단하면 합성 스레드의 애니메이션이 리플로우 및 다시 그리기

CSS animation

장점:

(1) 브라우저에서 애니메이션을 최적화할 수 있습니다.

(2) 코드가 비교적 간단하고 성능 튜닝 방향이 정해져 있습니다

(3) 프레임 속도 성능이 낮은 저버전 브라우저의 경우 CSS3가 자연스럽게 저하될 수 있지만 JS에서는 추가 코드 작성이 필요합니다

단점 :

1. 실행 중인 프로세스 제어가 약하고 이벤트 바인딩 콜백 기능을 연결할 수 없습니다. CSS 애니메이션은 일시중지만 가능하고, 애니메이션에서 특정 시점을 찾을 수 없으며, 애니메이션을 중간으로 되돌릴 수 없고, 시간 척도를 변경할 수 없으며, 특정 위치에 콜백 기능을 추가하거나 재생 이벤트를 바인딩할 수 없으며, 진행 보고서가 없습니다

2 , 코드가 장황합니다. 약간 더 복잡한 애니메이션을 구현하기 위해 CSS를 사용하려는 경우 CSS 코드는 결국 매우 번거로워집니다.

JS animation

장점:

(1) JavaScript 애니메이션 제어 기능이 매우 강력하므로 애니메이션 재생 프로세스(시작, 일시 정지, 재생, 종료 및 취소) 중에 애니메이션을 제어할 수 있습니다. .

(2) 애니메이션 효과는 CSS3 애니메이션보다 풍부합니다. 곡선 동작, 충격 깜박임 및 시차 스크롤 효과와 같은 일부 애니메이션 효과는 JavaScript 애니메이션으로만 완성할 수 있습니다.

(3) CSS3에는 호환성 문제가 있지만 JS는 대부분 문제

단점:

(1) JavaScript는 브라우저의 메인 스레드에서 실행되며, 필요한 다른 JavaScript 스크립트, 스타일 계산, 레이아웃, 그리기 작업 등이 있습니다. 이를 방해하면 스레드가 차단되어 프레임이 손실될 수 있습니다.

(2) 코드 복잡도가 CSS 애니메이션보다 높습니다

요약

애니메이션이 단순한 상태 전환이고 중간 프로세스 제어가 필요하지 않은 경우 이 경우 CSS 애니메이션이 선호됩니다. 해결책. 페이지를 Javascript 라이브러리로 가득 채우지 않고도 스타일 파일에 애니메이션 로직을 넣을 수 있습니다.

그러나 매우 복잡한 리치 클라이언트 인터페이스를 디자인하거나 복잡한 UI 상태가 있는 앱을 개발하는 경우. 그런 다음 애니메이션의 효율성을 유지하고 작업 흐름을 보다 쉽게 ​​제어할 수 있도록 js 애니메이션을 사용해야 합니다.

따라서 작은 대화형 효과를 구현할 때 더 많은 CSS 애니메이션을 고려하세요. 일부 복잡하게 제어되는 애니메이션의 경우 JavaScript를 사용하는 것이 더 안정적입니다.

더 많은 프로그래밍 관련 지식을 보려면

프로그래밍 비디오

를 방문하세요! !

위 내용은 js 애니메이션과 CSS 애니메이션의 차이점은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!