자바스크립트 페이드인 및 페이드아웃 효과 구현을 위한 아이디어_javascript 기술

제목처럼 아이디어만 있고 코드는 없습니다.

이 아이디어는 최근 XScroll.js 클래스를 작성할 때 깨달았습니다. 우리가 흔히 말하는 페이드 효과는 일반적으로 두 부분으로 나뉘는데, 절반은 페이드 인, 나머지 절반은 페이드 아웃됩니다. 하지만 분석해 보니 절반만 있어도 충분하다고 생각됩니다.

예를 들어 그림 전환 클래스를 작성하는 경우 전환 효과는 페이드 인 및 페이드 아웃입니다. 일반적으로 다음과 같이 씁니다. 전환이 발생하면 현재 표시된 그림이 페이드 아웃됩니다(점진적으로 숨겨짐). 표시할 사진이 페이드 인(점진적으로 나타남)되는 경우 일반적으로 두 사진의 애니메이션 속도가 동일하므로 현재 사진이 완전히 숨겨지면 다음 사진이 완전히 표시됩니다.

간단한 단계를 나열해 보겠습니다.

현재 사진이 페이드 아웃되고 동시에 투명도가 100%에서 90%로 변경되고 다음 사진이 페이드 아웃되며 투명도도 변경됩니다. 0부터 10까지.
현재 사진의 투명도는 80%이고, 다음 사진의 투명도는 20%입니다.
현재 사진의 투명도는 70%이며, 다음 사진의 투명도는 입니다. 30%.
. . . .
현재 사진 10%, 다음 사진 90%
완전 전환
사실 이건 완전 낭비!

생각해보자 다음 사진의 zIndex가 현재 사진 위에 있으면 점차 나타나게 되면 점점 불투명해지기 때문에 시각적으로는 그 아래 현재 사진이 점점 더 돋보이게 됩니다 불투명하다!

예를 들어 다음 사진의 투명도가 20%라면 현재 사진을 덮기 때문에 현재 사진의 투명도는 100%-20%=80%처럼 보입니다!

따라서 페이드인 및 페이드아웃 전환 효과를 만들 때는 페이드인 효과만 필요하며, 페이드인이 끝나면 페이드아웃이 발생합니다. 종료됩니다. 이렇게 하면 페이드인과 페이드아웃이 동기화되지 않을까 걱정할 필요가 없습니다.

이 방법의 핵심은 차단된 사진(즉, 현재 사진)에 신경 쓰지 않고 루프에서 한 사진(즉, 다음 사진)의 투명도만 동시에 설정하면 된다는 것입니다. , 계산의 절반을 절약합니다. 이는 자바스크립트의 실행 효율성을 최적화한 것이라고 볼 수 있죠?

페이드 인 및 페이드 아웃 전환 효과를 구현하는 방법은 다음과 같습니다.

현재 사진 위에 다음 사진의 zIndex를 설정합니다.
페이드 인(페이드 인) 다음 사진은 반복됩니다. 현재 사진은 작동되지 않습니다.
페이드인이 진행되는 동안 페이드아웃도 동시에 발생하며, 페이드인이 완료되면 동시에 페이드아웃도 완료됩니다.
참고: 이 아이디어는 현재 사진이 다음 사진과 겹치는 상황에만 적합합니다(대부분의 경우입니다).