재료 파급 효과에 대한 CSS 기술

CSS와 JavaScript를 사용하는 파급 효과에 대한 다른 기술에 대한 안내서

최근에는 머티리얼 디자인에서 웹 애플리케이션으로의 파급 효과를 구현해야했습니다. 그리고 나는 그것이 어떻게 구현되었는지 전혀 모른다는 것을 깨달았습니다. 이를 통해 기존 구현을 연구하고 유용한 새로운 기술을 발견하게되었습니다.

이 파급 효과는 무엇입니까?

잠깐, Google 머티리얼 디자인의 파급 효과를 모르십니까? 몇 년 동안 동굴에서 살고 있습니까?

잔물결 효과는 버튼을 누를 때 사용됩니다. 마우스 또는 터치 상호 작용에 대해 동일한 방식으로 작동합니다.

버튼을 클릭하거나 터치하는 위치를 접점이라고합니다. 여기에서 리플은 바깥쪽으로 이동하여 전체 버튼을 채울 때까지 불투명하게 커집니다. 그런 다음 완전히 사라집니다.

이 잔물결 효과의 역학은 액체 표면을 만지거나 바위를 호수에 떨어 뜨릴 때 얻는 잔물결과 유사합니다.

웹에서 찾을 수있는 잔물결

몇 가지 연구를 한 후에 웹 응용 프로그램에 파급 효과를 구현하는 데 사용되는 두 가지 주요 기술을 찾을 수있었습니다.

:: 후 의사 요소 사용

이 기술을 사용하여 버튼의 :: after 의사 요소는 반투명 원으로 스타일이 지정되고 애니메이션이 커지거나 희미 해집니다. 컨테이너 버튼에는 오버플로가 있어야합니다. 숨겨져있어 원이 버튼 표면 밖으로 넘치지 않도록하고 위치 : 상대를 버튼에 쉽게 배치 할 수 있습니다. 이 기사에서이 기술에 대한 자세한 내용을 Ionuț Colceriu가 읽을 수 있습니다.

이 기술의 가장 큰 장점 중 하나는 파급 효과에 대한 순수한 CSS 솔루션이라는 것입니다. 그러나 잔물결 효과는 항상 접점 대신 버튼 중앙에서 시작됩니다. 가장 자연스러운 피드백은 아닙니다.

JavaScript를 사용하여 접점을 저장하고 리플을 배치하는 데이를 사용하여 개선 할 수 있습니다. 이것이 바로 material.io가 웹 리플 구성 요소에 대해 수행 한 작업입니다. CSS 변수를 사용하여 접점을 저장하고 :: after pseudo-element는 이러한 변수를 사용하여 위치를 지정합니다.

자식 요소 사용

본질적으로이 기술은 이전과 동일한 전략을 사용합니다. 그러나 의사 요소 대신 버튼 안에 범위 요소를 추가 한 다음 JavaScript를 통해 배치 할 수 있습니다. 이 기술은이 기사에서 Jhey Tompkins에 의해 설명됩니다.

가장 간단한 구현은 버튼을 클릭 할 때마다 범위를 만들고 클릭 이벤트에서 마우스 위치를 사용하여 범위의 위치를 ​​변경합니다. CSS 애니메이션을 사용하면 범위가 완전히 투명해질 때까지 범위가 커지고 사라집니다. 애니메이션이 완료되면 DOM에서 스팬을 제거하거나 카펫 아래에 스팬을 남겨두면 아무도 투명 스팬을 볼 수 있습니다.

하위 요소가 범위가 아닌 svg이고 svg가 JavaScript를 통해 애니메이션되는 다른 변형을 찾았습니다. 이 변형은 Dennis Gaebel에 의해 설명되지만 본질적으로 동일한 것으로 보이며 복잡한 SVG 모양과 효과를 사용할 수 있습니다.

제출 입력 문제

위에서 설명한 두 기술 모두 훌륭해 보입니다. 그러나 이것은 type = submit 인 입력 요소에 적용하려고 할 때 발생합니다.

왜 작동하지 않습니까?

입력 요소는 교체 된 요소입니다. 즉, DOM 및 CSS와 관련하여 이러한 요소로 수행 할 수있는 작업이 거의 없습니다. 특히 자식 요소를 사용할 수 없으며 의사 요소도 없습니다. 이제 이러한 기술이 실패한 이유가 분명합니다.

머티리얼 디자인을 사용하는 경우 입력 [type = submit]에서 벗어나 버튼 요소를 사용하는 것이 좋습니다. 아니면 계속 읽으십시오.

입력을 제출하기 위해 잔물결 추가

내가 작업했던 웹 응용 프로그램에는 이미 많은 제출 단추가있었습니다. 모든 요소를 ​​다른 요소로 변경하려면 많은 작업이 필요하며 스타일 시트 및 JavaScript 로직이 손상 될 위험이 높습니다. 그래서 기존 제출 버튼에 잔물결을 추가하는 방법을 찾아야했습니다.

포장 용기 사용

인라인 블록 요소 내부에 제출 버튼을 줄 바꿈하고 인라인 블록 요소를 잔물결 표면으로 사용할 수 있다는 것을 금방 깨달았습니다. 다음은 간단한 데모입니다.

이 솔루션의 단순함을 좋아하지만 여전히 너무 많은 곳에서 마크 업을 변경해야했습니다. 그리고 나는 그것이 깨지기 쉬운 솔루션이라는 것을 알았습니다. 새로운 개발자가 프로젝트에 들어 와서 리플 표면에 제대로 포장하지 않고 제출 버튼을 만들 것입니다. 그래서 DOM을 변경할 필요가없는 다른 솔루션을 계속 검색했습니다.

방사형 그래디언트

방사형 그래디언트 구문을 사용하면 그래디언트의 중심과 크기를 모두 제어 할 수 있습니다. 물론 반투명 색상을 포함하여 그라디언트 색상을 제어 할 수도 있습니다. 그리고 그것이 적용되는 요소를 결코 넘치지 않습니다. 그래서 이미 필요한 모든 것을하는 것처럼 보입니다!

그리 빠르지 않다… 누락 된 한 가지가있다 : background-image 속성은 애니메이션이 불가능하다. CSS 애니메이션을 사용하여 그라디언트를 늘리거나 투명하게 만들 수 없었습니다. 배경 크기 속성에 애니메이션을 적용하여 성장시킬 수 있었지만 그게 전부였습니다.

애니메이션 이미지로 페이딩 서클을 사용하는 것 (apng 형식 사용)과 같은 몇 가지 다른 방법을 시도하여 배경 이미지로 적용했습니다. 그러나 이미지 루프가 시작되고 끝나는 시점을 제어 할 수 없었습니다.

마지막으로 JavaScript를 사용한 솔루션

CSS로 할 수없는 것은 JavaScript로 할 수 있습니다. CSS 애니메이션을 사용하여이 효과를 얻으려고 노력하는 것을 기꺼이 인정하는 것보다 더 많은 시간을 소비 한 후, 그냥 포기하고 JavaScript로 애니메이션을 작성하기로 결정했습니다.

위의 방사형 그라디언트 솔루션으로 시작하고 window.requestAnimationFrame을 사용하여 방사형 그라디언트의 유동 애니메이션을 만들고 자라고 페이딩합니다. 마지막 해결책은 다음과 같습니다.

결론

따라서 CSS 만 아니라 제출 버튼에 잔물결 효과를 줄 수 있습니다.

이 기술을 웹의 어느 곳에서나 문서화 할 수 없었기 때문에 내 기술이라고합니다. Leonardo의 잔물결 기법은 DOM을 변경할 필요가 없으며 의사 요소 또는 하위 요소에 의존하지 않기 때문에 모든 요소에서 작동합니다. 그러나 완벽한 솔루션은 아닙니다.

먼저 성능이 있습니다. JavaScript로 그라디언트에 애니메이션을 적용하면 많은 브라우저 최적화가 손실됩니다. 그러나 변경되는 유일한 속성은 배경 이미지이기 때문에 브라우저가 리플 로우 할 필요가 없으며 스타일을 다시 적용하고 요소를 다시 칠하기 만하면됩니다. 실제로, 그것은 정확히 일어나고, 성능은 정말 좋습니다. 그 문장에 대한 예외는 Firefox Mobile이며, 어떤 이유로 든 애니메이션을 따라 가지 않습니다. (편집 : 최신 Firefox 모바일 버전에서는 애니메이션이 매끄 럽습니다)

둘째,이 기술은 버튼의 배경 이미지 속성을 사용합니다. 디자인에 버튼에 배경에 이미지가 적용되어 있어야하는 경우 파급 효과가 해당 이미지보다 우선합니다. 디자인에 해당 이미지가 실제로 필요한 경우 기존 배경 이미지 위에 방사형 그래디언트를 그리도록 JavaScript를 수정할 수 있습니다.

셋째, Internet Explorer에서 작동하지 않는 것 같습니다. 그러나 IE10 이상에서 작동하지 않는 이유는 없습니다. IE가 방사형 그라데이션에 다른 구문을 사용하기 때문일 수 있습니다. 그러나 오늘날 누가 IE에 관심이 있습니까? (편집 :이 방법은 Internet Explorer 11에서 아무런 문제없이 작동합니다)