FramerJS 클래스 소개 및 머티리얼 파급 효과

클래스는 원하는 동작이나 속성을 추가하기 위해 확장 할 수있는 개체입니다. 예를 들어 Framer Studio의 모든 구성 요소는 Layer 클래스를 확장 한 클래스입니다. 이러한 모든 구성 요소를 하위 클래스라고 부를 수 있습니다.

평신도의 언어로 클래스 (예 : 버튼)를 사용하여 컴포넌트를 생성하고 매번 새 버튼을 생성하고 모든 버튼에 동일한 코드를 작성하는 대신 프로토 타입에 버튼이 필요할 때마다이를 반복해서 사용할 수 있습니다. .

예제 : 레이어 클래스

Framer Studio에서 위 코드를

작성하면 e 새 레이어가 생성됩니다. 생성 된 레이어의 이름을 “버튼”이라고합니다.

Framer에는 Layer라는 클래스가 있습니다. 클래스 이름과 함께 키워드 ‘ new ‘를 추가하면 Layer의 인스턴스가 생성됩니다.

Layer 클래스의 모든 속성을 확장하는 자체 클래스를 만들고 인스턴스가있을 때마다 잔물결을 생성하는 기능과 같은 고유 한 속성을 몇 가지 추가합니다. 탭하거나 클릭하고 스타일을 지정할 수 있습니다.

아래 코드를 확인하세요.

클래스를 만들려면 먼저 ‘ class YOUR_CLASS_NAME extends Layer ‘를 작성합니다. 위의 코드에서 우리는 Container 클래스를 명명했습니다. 일반적으로 클래스 이름을 지정할 때 camelcase를 사용합니다. 즉, 이름을 대문자로 시작합니다. 이것은 우리가 클래스와 그 인스턴스를 구별하는 데 도움이 될 것입니다. 예 :

대문자 C 가있는 컨테이너는 클래스이고 소문자 c 가있는 컨테이너는 인스턴스입니다.

첫 번째 줄은 Container 클래스가 Framer Studio 내부에 정의 된 Layer 클래스의 모든 속성을 확장 함을 의미합니다.

생성자 함수는 클래스의 인스턴스가 생성 될 때 원하는 레이어의 모든 초기 속성을 입력하는 특수 함수입니다.

‘options = {}’는 클립 보드 역할을하며 모든 특수 및 맞춤 기능을 여기에 할당 할 수 있습니다.

super (options) 함수 내에 정의한 모든 속성을 래핑하고 사용자 정의 기능을 Layer 클래스에 추가합니다.

위에서 만든 rippleColor 와 같은 고유 한 속성을 만들어 클립 보드 옵션에 추가 할 수 있습니다. ( 클립 보드의 이름은 옵션 대신 원하는대로 지정할 수 있으며 기능 등의 이름을 지정할 수도 있습니다 )

options.rippleColor에는 흰색 값이 할당되지만 같음 (=) 기호로 값을 할당하는 대신 물음표 (?) 도 사용했습니다. 이를 통해 인스턴스를 만들 때 속성 값을 변경할 수 있습니다. 즉, 인스턴스가 생성 될 때 rippleColor의 초기 값은 흰색이지만 원하는 경우 빨간색으로 변경할 수 있지만 물음표를 사용하지 않으면 값이 영구적이되어 새 인스턴스가 생성 될 때 변경할 수 없습니다. . 예 :

위 코드는 초기 값이었던 흰색 대신 rippleColor red를 사용하여 Container 클래스의 인스턴스를 생성합니다. 그러나 물음표를 사용하지 않았다면 빨간색을 색상으로 지정하더라도 흰색이 잔물결의 색상이되었을 것입니다.

스크린 샷에 표시된 위 코드에서 정의한 속성을 살펴 보겠습니다. 우리는 다른 요소에 대한 컨테이너 역할을 할 수 있고 클릭 할 때마다 잔물결을 생성 할 수있는 클래스를 원합니다. 컨테이너 크기는 배경색, 잔물결 색상, 잔물결 크기, 잔물결 시간 및 x & amp; y 좌표.

레이어 클래스에 정의되지 않은 몇 가지 사용자 지정 속성 인 rippleColor, rippleSize, rippleTime을 추가했음을 알 수 있습니다. 이제 컨테이너 클래스 내의 레이어에 이러한 변수를 할당하는 방법을 살펴 보겠습니다.

Container 클래스의 인스턴스를 탭하거나 클릭 할 때마다 형성되는 잔물결 레이어를 만들 수 있습니다. 잔물결 레이어는 생성자 함수 내부와 super (옵션)

아래에 있어야합니다.

코드를 작성하여 리플 레이어를 Container 클래스의 자식으로 만들었습니다

@는 짧은 형식의 ‘이 항목’을 의미합니다. ‘ this ‘는 클래스 객체 자체를 의미하며이 경우 컨테이너 클래스를 의미합니다. 컨테이너 클래스는 Layer의 하위 클래스입니다. 따라서 Container의 인스턴스가 생성되면 기본적으로 기능이 추가 된 Layer 클래스의 인스턴스가 생성되었습니다.

이제 생성자 함수에서 super (options) 코드 바로 전에 할당 한 리플 레이어에 특수 기능을 추가합니다.

이제 잔물결의 상호 작용을 만들어 보겠습니다. 우리는

@onClick은 this.onClick 을 의미하며, 여기서 this 는 클래스 객체 자체를 나타냅니다.

ripple.midX 는 X 축에서 레이어의 중심이고 ripple.midY 는 Y 축에서 레이어의 중심입니다. ripple.midX & amp; ripple.midY event.offsetX & amp; event.offsetY , 클릭 또는 탭의 위치를 ​​확인하고 잔물결 레이어의 중심을 클릭 또는 탭의 좌표에 매핑합니다. 따라서 클릭 / 탭할 때마다 해당 위치에서 잔물결이 시작됩니다. 마지막으로 0으로 크기를 조정하고 불투명도를 0.3으로 만드는 것입니다. 클릭 / 탭시 크기를 3 배로 조정하고 불투명도를 0으로 줄일 수 있습니다.

이제 컨테이너 클래스를 만들었습니다. 이제 클래스의 인스턴스를 만들 수 있습니다.

위 코드를 확인하여 클래스의 새 인스턴스를 만드는 방법을 확인하세요. 컨테이너에서 잔물결을 정의하는 데 사용되는 rippleSize, rippleColor와 같은 고유 한 속성을 어떻게 사용했는지 알 수 있습니다.

코드를 가지고 놀려면 여기에서 프로토 타입을 확인하세요.