재료 설계 버튼의 파급 효과를 재현하는 방법

재료 디자인을 처음 만났을 때 버튼 구성 요소의 디자인 개념에 깊은 인상을 받았습니다. 파급 효과를 영리하게 사용하여 간단하고 우아한 방식으로 사용자에게 피드백을 제공합니다.

이 효과는 어떻게 달성됩니까? Material Design의 버튼은 단순한 잔물결 애니메이션 일뿐 만 아니라 애니메이션의 위치는 클릭 된 버튼의 위치에 따라 다릅니다.

코드를 통해 동일한 효과를 얻을 수 있습니다. 먼저 ES6 JavaScript를 사용하여 깨끗한 솔루션을 제공 한 다음 몇 가지 대안을 탐색합니다.

HTML 구조

우리의 목표는 불필요한 HTML 태그를 피하는 것이므로 코드를 최소한으로 사용합니다.

 <button>자세히 알아보십시오</button>

버튼 스타일

JavaScript를 사용하여 Ripples 요소의 스타일을 동적으로 설정해야하지만 CSS에서 다른 모든 스타일을 수행 할 수 있습니다. 버튼의 경우 두 가지 속성 만 포함해야합니다.

 버튼 {
  위치 : 상대;
  오버플로 : 숨겨진;
}

position: relative 우리는 position: absolute 요소는 우리가 그 위치를 제어하는 ​​데 필요합니다. 한편, overflow: hidden 파문이 버튼의 가장자리를 초과하는 것을 방지합니다. 다른 모든 속성은 선택 사항입니다. 그러나 이제 우리 버튼은 약간 날짜가 보입니다. 더 현대적인 출발점은 다음과 같습니다.

 /* 로봇은 재료의 기본 글꼴입니다*/
@import url ( 'https://fonts.googleapis.com/css2?family=roboto&display=swap');

버튼 {
  위치 : 상대;
  오버플로 : 숨겨진;
  전환 : 배경 400ms;
  색상 : #ffff;
  배경색 : #6200ee;
  패딩 : 1REM 2REM;
  Font-Family : 'Roboto', Sans-Serif;
  글꼴 크기 : 1.5REM;
  개요 : 0;
  국경 : 0;
  Border-Radius : 0.25REM;
  Box-Shadow : 0 0 0.5REM RGBA (0, 0, 0, 0.3);
  커서 : 포인터;
}

잔물결 스타일

나중에 JavaScript를 사용하여 Ripples를 .ripple 클래스로 사용합니다.<span></span> 요소는 HTML에 주입됩니다. 그러나 JavaScript로 이동하기 전에 CSS 에서이 잔물결의 스타일을 정의하여 언제든지 사용할 수 있습니다.

 span.ripple {
  위치 : 절대; /* 위에서 언급 한 절대 포지셔닝*/
  국경-라디우스 : 50%;
  변환 : 스케일 (0);
  애니메이션 : 리플 600ms 선형;
  배경색 : RGBA (255, 255, 255, 0.7);
}

잔물결을 둥글게 만들기 위해 border-radius 50%로 설정했습니다. 모든 잔물결이 처음부터 나타나도록 기본 스케일을 0으로 설정합니다. 이제 우리는 아직 아무것도 볼 수 없습니다. top , left , width 또는 height 특성에 대한 값을 설정하지 않았기 때문입니다. JavaScript를 사용하여 곧 이러한 속성을 주입하겠습니다.

CSS의 경우 마지막으로 추가해야 할 것은 애니메이션의 최종 상태입니다.

 @keyframes ripple {
  에게 {
    변환 : 스케일 (4);
    불투명도 : 0;
  }
}

keyframes 에서 시작 상태를 정의하기 위해 from Keyword를 사용하지 않습니까? 우리는 from 할 수 있고 CSS는 애니메이션 요소에 적용되는 값에 따라 결 측값을 구축합니다. 관련 값이 명시 적으로 선언 된 경우 (예 : transform: scale(0) ) 또는 기본값 (예 : opacity: 1 ) 인 경우 발생합니다.

JavaScript 구현

마지막으로, 우리는 잔물결의 위치와 크기를 동적으로 설정하려면 JavaScript가 필요합니다. 크기는 버튼의 크기를 기준으로해야하며 위치는 버튼 및 커서의 위치를 ​​기준으로해야합니다.

클릭 이벤트를 인수로 취하는 빈 함수로 시작합니다.

 기능 createripple (이벤트) {
  //
}

이벤트의 currentTarget 찾아 버튼에 액세스 할 것입니다.

 const button = event.currentTarget;

다음으로, 우리는 우리를 인스턴스화 할 것입니다<span></span> 버튼의 너비와 높이에 따라 직경과 반경을 요소하고 계산하십시오.

 const circle = document.createelement ( "span");
const 직경 = math.max (button.clientwidth, button.clientHeight);
const 반경 = 직경 / 2;

이제 잔물결에 필요한 나머지 속성을 정의 할 수 있습니다 : left , top , width 및 height .

 Circle.style.width = circle.style.height =`$ {직경} px`;
Circle.style.left =`$ {event.clientx- (button.offsetleft radius)} px`;
circle.style.top =`$ {event.clienty- (button.offsettop radius)} px`;
Circle.classList.add ( "Ripple");

~ 안에<span></span> DOM에 요소를 추가하기 전에 이전 클릭에서 나왔을 수있는 잔물결이 있는지 확인하고 다음 잔물결을 실행하기 전에 삭제하는 것이 가장 좋습니다.

 const ripple = button.getElementsByClassName ( "Ripple") [0];

if (ripple) {
  ripple.remove ();
}

마지막 단계에서는 우리가 할 것입니다<span></span> 버튼 요소에 버튼 요소로 버튼 요소가 추가되어 버튼 내부에 주입됩니다.

 버튼. AppendChild (원);

우리의 기능이 완료된 후에는 남아있는 모든 것은 그것을 호출하는 것입니다. 이것은 여러 가지 방법으로 수행 할 수 있습니다. 페이지의 각 버튼에 잔물결을 추가하려면 다음과 같은 코드를 사용할 수 있습니다.

 const buttons = document.getElementsByTagName ( "버튼");
(버튼의 const 버튼) {
  button.addeventListener ( "클릭", Createripple);
}

이제 우리는 일하는 파급 효과가 있습니다!

확장 된 기능

이 효과를 버튼 위치 나 크기의 다른 변화와 결합하여 한 걸음 더 나아가고 싶다면 어떻게해야합니까? 결국, 사용자 정의는 우리 자신의 영향을 재현하기로 선택한 주요 장점 중 하나입니다. 확장 기능의 용이성을 테스트하기 위해 버튼이 특정 영역 내에있을 때 커서를 향해 버튼을 움직이는 "자석"효과를 추가하기로 결정했습니다.

Ripple 함수에 정의 된 동일한 변수 중 일부에 의존해야합니다. 불필요한 코드 복제를 피하려면 코드가 모두 액세스 할 수 있도록 어딘가에 저장해야합니다. 그러나 공유 변수의 범위를 각 개별 버튼으로 제한해야합니다. 이를 달성하는 한 가지 방법은 다음 예와 같이 클래스를 사용하는 것입니다.

자석 효과는 커서가 움직일 때마다 커서를 추적해야하므로 더 이상 잔물결을 만들기 위해 커서 위치를 계산할 필요가 없습니다. 대신, 우리는 cursorX 와 cursorY 에 의존 할 수 있습니다.

두 가지 중요한 새로운 변수는 magneticPullX 와 magneticPullY 입니다. 그들은 커서 뒤에서 버튼을 당기는 우리의 자석 방법의 강도를 제어합니다. 따라서 잔물결의 중심을 정의 할 때는 새 버튼의 위치 (x 및 y)와 자기를 조정해야합니다.

 const offsetleft = this.left this.x * this.magneticpullx;
const offsettop = this.top this.y * this.magneticpully;

이러한 조합 효과를 모든 버튼에 적용하려면 각 버튼에 대한 새로운 클래스 인스턴스를 인스턴스화해야합니다.

 const buttons = document.getElementsByTagName ( "버튼");
(버튼의 const 버튼) {
  새 버튼 (버튼);
}

다른 기술

물론 이것은 파급 효과를 달성하는 한 가지 방법 일뿐입니다. Codepen에는 다른 구현을 보여주는 많은 예가 있습니다. 다음은 제가 가장 좋아하는 예입니다.

순수한 CSS 구현

사용자가 JavaScript를 비활성화하면 파급 효과에는 백업 솔루션이 없습니다. 그러나 CSS 만 사용하여 :active 의사 클래스를 사용하여 클릭에 응답하면 원래 효과에 가까워 질 수 있습니다. 주요 제한 사항은 잔물결이 한 지점 (일반적으로 버튼의 중앙)에서만 클릭 위치에 응답하지 않아야한다는 것입니다. Ben Szabo 의이 예는 특히 간결합니다.

ES6 이전의 JavaScript

Leandro Parice의 데모는 구현과 유사하지만 이전 버전의 JavaScript와 호환됩니다.

jQuery

이 예제는 jQuery를 사용하여 파급 효과를 달성합니다. 이미 jQuery를 종속성으로 가지고 있다면 몇 줄의 코드를 저장하는 데 도움이 될 수 있습니다.

반응

마지막으로, 저의 또 다른 예가 있습니다. State 및 Refs와 같은 React의 기능은 파급 효과를 만드는 데 사용될 수 있지만 절대적으로 필요하지는 않습니다. 잔물결의 위치와 크기는 각 클릭마다 계산해야 하므로이 정보를 주에 유지하는 데 이점이 없습니다. 또한 클릭 이벤트에서 버튼 요소에 액세스 할 수 있으므로 심판도 필요하지 않습니다.

이 반응 예제는이 기사의 첫 번째 구현과 동일한 createRipple 기능을 사용합니다. 주요 차이점은 Button 구성 요소의 방법으로서 우리의 기능이 해당 구성 요소에 스코핑된다는 것입니다. 또한 onClick 이벤트 리스너는 이제 JSX의 일부입니다.

이 응답은 원래 이미지 형식을 유지하고보다 자연스러운 흐름과 개선 된 가독성을 위해 문구와 문장을 보상하면서 텍스트의 핵심 의미를 변경하지 않습니다. 또한 이미지에 대한 설명적인 ALT 텍스트를 사용합니다.

위 내용은 재료 설계 버튼의 파급 효과를 재현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!