반응 스프링을 사용하여 부품 애니메이션

Sep 12, 2025

어떻게

(이미지 크레디트 : 매트 크라우치)

반응 스프링은 애니메이션을 통해 웹에서 구현하기에 악명 높은 까다로운 애니메이션을 도울 수 있습니다. CSS 애니메이션 최선의 선택이지만 부드러운 결과를 조성하려면 수업, 지하 및 이벤트를주의 깊게 저글링해야합니다. 던지는 A. 자바 스크립트 프레임 워크 믹스에 반응하는 것처럼, 일을 더 복잡하게 만 해당합니다.

사용자 상호 작용에 의존하는 애니메이션의 경우 값을 JavaScript로 계산하고 요소에 직접 적용 할 수 있습니다. 이 수동 접근법을 취함으로써 우리는 애니메이션이 더 자연스럽게 보이게하기 위해 자신의 완화를 계산하고 적용해야합니다.

반응 봄 웹에서 애니메이션에 관해서 많은 일반적인 텅출을 다루기 위해 구축 된 라이브러리입니다. 직선 지속 시간에 대한 물리학에 초점을 맞추고 정의 된 기능을 정의함으로써 약간 다른 접근 방식이 필요합니다. 이는 일을 부드럽고 자연스럽게 유지하는 데 도움이됩니다.

대부분의 시간은 시각 효과에 사용되는 동안 라이브러리는 해당 값이 스타일에 사용되는지 여부에 관계없이 두 값간에 전환됩니다. 예를 들어 커뮤니티가 얼마나 큰지를 강조하기 위해 여러 가입을 카운트 업하는 데 사용될 수 있습니다.

이 자습서에서는 사용자가 이미지를 평가할 수있는 카드 구성 요소를 만들 것입니다. 카드는 스타 등급을 드러내고 사용자를 클릭하여 자신을 추가 할 수 있습니다. 우리는 반응 버전 16.8 이상을 요구하는 React Spring의 새로운 후크 구현을 사용할 것입니다. 시작하기 전에, 여기에서 자습서 파일을 다운로드하십시오 (그리고 그들을 다시 뒷받침하십시오 클라우드 스토리지 짐마자

복잡한 코드 프로세스가없는 사이트를 구축하려면 괜찮은 경우를 사용하십시오. 웹 사이트 빌더 ...에 탐험 해보십시오 웹 호스팅 옵션도 있습니다.

Generate CSS — CSS 생성을 위해 9 월 26 일에 런던에 가입하십시오 - 이미지를 클릭하여 티켓을 예약하십시오. (이미지 크레디트 : 미래)

01. 종속성을 설치합니다

파일을 다운로드하면 패키지 종속성을 시작하기 전에 설치해야합니다. 이 CREATE REAST APP 기반 프로젝트는 다음을 포함합니다 반응 스프링 패키지와 필요한 모든 로컬 서버가 시작되기 위해 필요한 모든 로컬 서버를 설정합니다.

명령 줄에서 프로젝트 파일을 찾아 설치 한 다음 실행하십시오.

 & gt; 실
& gt; 원사 시작

02. 상태에서 이미지 생성

첫째, 우리는 비율을 위해 몇 가지 이미지가 필요합니다. 이 튜토리얼의 경우 일부 이미지를 응용 프로그램 상태로 강조하지만이 데이터는 모든 소스에서 가져올 수 있습니다. app.js를 열고 새 이미지를 만듭니다 usestate. 반응에서 후크. 이렇게하면 각 이미지가 나중에 표시되고 업데이트 할 수있는 초기 등급을 제공합니다.

 const [카드] = usestate ([
CreateImage (image1),
createImage (image2),
createImage (image3)
]);

03. 각 이미지 카드를 표시합니다

이미지가 배열에 저장되므로 해당 상태를 반복하여 각각에 대해 별도의 구성 요소를 만듭니다. 반응 봄에 대한 애니메이션 논리는 & lt; ratingscard / & gt; 우리가 필요로하는 곳에서 사용할 수있는 구성 요소.

app.js의 렌더링 방법 안에 있으면 상태 배열의 각 카드에 해당 구성 요소 복사본을 만듭니다. 이미지와 초기 등급을 포함하여 상태의 모든 값을 받게됩니다.

 {cards.map ((카드, 색인) = & gt; (
& lt; ratingscard 키 = {index} {... 카드} / & gt;
)))}}

04. 카드 구조를 추가하십시오

Three plain cards — (이미지 크레디트 : 매트 크라우치)

애니메이션을 추가하기 전에 카드에는 일부 콘텐츠가 필요합니다. 각 카드에는 전면과 뒤로 구현됩니다. & lt; div & gt; 서로 겹쳐서 계층화 된 요소.

열다 ratingscard / index.js. , 카드의 구조를 추가하십시오. 우리는 궁극적으로 등급이 포함 된 후면으로 이미지를 프론트 카드에 백그라운드로 적용해야합니다.

 & lt; div classname = "ratingscard"& gt;
& lt; Div.
classname = "ratingscard__front"
스타일 = {{
BackgroundImage :`URL ($ {image})`
}}}
/ & gt;
& lt; div classname = "ratingscard__back"/ & gt;
& lt; / div & gt;

05. 호버 스타일을 적용하십시오

Card appearing to rotate horizontally — (이미지 크레디트 : 매트 크라우치)

애니메이션을 통해 직접적으로 업데이트되지 않은 모든 스타일은 CSS를 통해 적용 할 수 있습니다. 여기에는 호버가 올 때 각 카드에 대한 기본 3D 그림자 효과가 포함됩니다. 내부 ratingscard / style.css. 필터를 적용하여 카드를 올려 놓으면 카드가 점프하기 위해 추가 스타일을 추가하십시오.

 .ratingscard : 호버 {
필터 : 드롭 - 그림자 (0 14px 28px.
RGBA (0, 0, 0, 0.25))
드롭 - 그림자 (0 10px 10px.
 RGBA (0, 0, 0, 0.1));
}

06. 기본적으로 그림자를 설정합니다

호버의 갑작스런 그림자는 흔들림 경험입니다. 따라서 우리는 주식을 매끄럽게 유지하기 위해 국가간에 천천히 전환되어야합니다. 가리키지 않을 때 카드에 대한 서브 트러 드롭 - 그림자를 추가하십시오. 사용 전이 그 두 상태 사이에 애니메이션을하는 속성.

 .ratingscard {
[...]
필터 : 드롭 - 그림자 (0 3PX 6px.
RGBA (0, 0, 0, 0.16)))
드롭 - 그림자 (0 3PX 6px.
RGBA (0, 0, 0, 0.1));
전환 : 필터 0.5s;
}

07. 선택한 상태를 유지합니다

우리는 카드의 어느 쪽이 어떤면에 직면하고 있는지에 대한 정보를 저장하고 업데이트해야합니다. 우리는 반응의 내장을 사용할 수 있습니다 usestate. 훅 시작 값을 정의하고 현재 값을 반환하고 메서드를 업데이트하는 방법을 가져옵니다.

그 처음에 ratingscard. 구성 요소 기능,이 기능을 정의하십시오 선택된 상태.

 const [선택, setSelected]
 = usestate (거짓);

08. 플립 애니메이션을 정의하십시오

반응 스프링은 한 값과 다른 값 사이의 숫자를 전환 할 책임이 있습니다. 이것은 봄과 그 일과 함께 할 수 있습니다 수용품 훅. 우리는 몇 가지 설정 정보를 제공하며, 물리학 계산에 따라 업데이트되는 일련의 값을 반환합니다.

플립 애니메이션을위한 봄을 만듭니다. 이 카드는 카드가 그 안에 있는지 여부에 따라 카드를 퇴색 및 회전합니다. 선택된 상태.

 const {불투명도, 변형}
 = Assesspring ({
불투명도 : 선택 되었습니까? 1 : 0,
변환 :`Rotatey (
$ {선택한? 180 : 0} 젠터)`
});

09. 애니메이션 컨테이너로 변환합니다

개체가 돌아 왔습니다 수용품 애니메이션을 정의하지만 필요한 숫자 값을 제공하지 마십시오. 그만큼 생기 있는 팩토리 기능이 정보를 다이제스 한 다음 값을 구성 요소에 숫자로 제공합니다.

을 변환 ratingscard. 요소를 사용하는 요소 생기 있는 함수. 그만큼 애니메이션 구문은 A를 반환하는 기능을 알려줍니다 & lt; div & gt; ...에

& lt; animated.div classname = "ratingscard"& gt; & lt; 애니메이션 classname = "ratingscard__front" 스타일 = {{ BackgroundImage :`URL ($ {image})` }}} / & gt; & lt; animated.div classname =. "ratingscard__back"/ & gt; & lt; /animated.div>

10. 프론트 카드를 움직이게하십시오

React Spring은 값만 애니메이션으로하고 요소 자체의 애니메이션을 수행하지 않습니다. 우리는 그 값을 스타일 소품에 연결하고 그 애니메이션을 즉시 만들 수 있습니다. 프론트 카드를 업데이트하여 새로운 것을 사용하십시오. 불투명 과 변환 값. 이 경우, 우리는 곧 주소 할 불투명도 값을 보간해야합니다.

& lt; animated.div. classname = "ratingscard__front" 스타일 = {{ BackgroundImage :`URL ($ {image})`, 불투명도 : 불투명도 .interPolate ( inguateopacity), 변환 }}} / & gt;

11. 뒷 카드를 움직이게하십시오

Three cards with images on them — (이미지 크레디트 : 매트 크라우치)

카드를 뒤집을 때 한 얼굴에 적용되는 애니메이션이 무엇이든 상대방에게 반대로 적용해야합니다. 함께 연주하면 그들은 한 조각으로 움직이는 것처럼 보입니다.

이 경우 뒷 카드에 동일한 스타일을 적용해야하지만 이번에는 변환 대신 값.

& lt; animated.div. classname = "ratingscard__back" 스타일 = {{ 불투명, 변환 : 변형 . 인밀레판 (InversetRansform) }}} / & gt;

12. 값을 보간하십시오

CSS 속성에 값을 직접 적용하는 대신 값을 다른 값으로 매핑하기 위해 몇 가지 기능을 적용 할 수 있습니다. 이 프로세스를 보간이라고합니다.

맨 위로의 보간 기능을 정의하십시오. ratingscard / index.js. ...에 선택하거나 선택 취소 할 때 불투명도 및 변환 애니메이션의 반대쪽을 적용합니다.

const inflingeopacity = o = & gt; 1 - o;
const inversetransform = t = & gt;
 `$ {T} Rotatey (180deg)`;

13. 클릭하십시오

카드의 뒤집기는 클릭으로 연결되어야합니다. 그대로 선택된 상태 값이 표시되는 얼굴을 결정합니다. 카드를 클릭 할 때 해당 상태를 전환해야합니다.

외부에 클릭 수신기를 추가하십시오 ratingscard. 요소. 이런 일이 발생하면 부울 값을 상태로 전환합니다.

& lt; animated.div. classname = "ratingscard" onClick = {() {() & gt; setSelected (! 선택됨)} & gt;

14. 카드 플립 물리학 조정

Information about Common API — (이미지 크레디트 : 공통 API)

지금 당장 우리의 애니메이션이 작동하지만 플립보다 부유 한 것처럼 보입니다. 우리는 각 봄의 일부 값을 변경하여 작동하는 방식을 변경할 수 있습니다. Spring의 설치 개체 내부에서 구성 마찰을 줄이고 긴장을 증가시키는 물체. 이렇게하면 애니메이션이 Snappier 느낌을 줄 것입니다.

 Assesspring ({
구성 : {
마찰 : 22,
장력 : 500.
},
[...]
});

15. 틸트 효과를위한 봄을 만듭니다

초기부터 CSS 구동 호버 효과는 몇 가지 피드백을 제공하지만 커서 위치에 반응하는 틸트 애니메이션이 추가로 향상 될 수 있습니다. 마우스 이동과 같이 고주파로 스프링을 업데이트 할 때 우리는 다음을 사용하여 더 나은 성능을 얻을 수 있습니다. 세트 매일 봄에 반환되는 기능. 이 애니메이션의 새 스프링을 만들고 리턴 된 함수를 유지하십시오.

 const [props, set] = useSpring (() = & gt; ({
주 : [0, 0, 1]
}
)));

16. 틸트 스타일을 적용하십시오

React Spring은 배열이 포함 된 다양한 여러 유형의 값을 움직일 수 있습니다. 하나의 배열에 값을 저장하면 모두를 모두 보간 할 수 있습니다. 변환 하나의 패스의 속성.

A.를 만드십시오 변형 카드 보간 기능을하고 스타일을 메인에 적용합니다 ratingscard. 요소.

 const 변형 카드 = (x, y, scale) = & gt;
 `Perspective (1000px) RotateX ($ {x} deg)
Rotatey ($ {y} °) 스케일 ($ {scale})`;
[...]
& lt; 애니메이션
 classname = "ratingscard"
 onClick = {() {() & gt; setSelected (! 선택됨)}
 스타일 = {{Transform :! 선택 및 amp; & amp;
propsstate.interPolate (
변형 카드)}}} & gt;

17. 마우스 이동시 값을 설정합니다

마우스 이벤트는 그 당시에 커서의 좌표를 제공합니다. 뷰포트 내의 커서 위치를 가져 오려면 클라이언트 좌표에 관심이 있습니다. 마우스를 추가하고 이벤트를 바깥쪽에 남겨 둡니다 & lt; div & gt; ...에 커서가 나뭇잎을 떠날 때 이동 및 재설정 기능에 대한 좌표를 함수에 전달합니다. & lt; div & gt; ...에

onmouseleave = {() = & gt; 세트({ 상태 : [0, 0, 1]})} OnMousemove = {({{ClientX : X, Clienty : Y}) = & gt; 세트({ 주 : CALCULEVALUES (x, y)}) }

18. 애니메이션 값을 계산합니다

우리는 사용자가 그것과 상호 작용할 때 카드가 너무 많이 움직이는 것을 피하기 위해 작은 기울기만을 원합니다. 그만큼 계산음 기능은 커서가 켜져 있고 그 방향으로 기울이고 화면의 측면에서 작동합니다.

함수를 작성하여 그 값을 작성하십시오. 40으로 나누는 것은 기울기 효과를 줄이기 위해 틸트 효과를 줄입니다. 최종 값은 시각적으로 카드를 화면에서 올릴 것입니다.

const calculateValues = (x, y) = & gt; [ - (y - window.innerheight / 2) / 40, (x - window.innerwidth / 2) / 40, 1.1];

19. Star 등급 쇼

Star rating on a card — (이미지 크레디트 : 매트 크라우치)

각 이미지에는 카드 뒷면에 별을 표시 해야하는 등급이 있습니다. 이 논리는 자체 구성 요소 내에 유지되지만 먼저 뒷면에 적용해야합니다.

먼저 등급을 유지하려면 새 상태를 만듭니다. & lt; Starrating & gt; 뒤쪽에있는 구성 요소 & lt; div & gt; ...에

 const [currentrating, setrating]
 = usestate (등급);
[...]
{선택된 & amp; & amp; (
 & lt; Starrating Rating = {currentrating}
setRating = {setrating} / & gt;
)}

20. 스타 애니메이션을 만듭니다

스타 등급은 카드가 뒤집힐 때 즉시 퇴색 할 것입니다. 그를 사용하여 USERRAIL. 리스 스프링에서 후크를 통해 여러 구성 요소에 스프링을 적용 할 수 있습니다.

개방 starrating / index.js. 그리고 후크를 추가하십시오. 첫 번째 인수는 스프링의 수를 정의합니다.

 const animatedstars = usetrail (5, {
구성 : {
마찰 : 22,
장력 : 500.
},
에서 : {불투명도 : 0,
변환 : "Scale (0.8)"},
불투명도 : 1,
변환 : "Scale (1)"
});

21. 부품에 별을 적용하십시오

우리가해야 할 마지막 일은 실제로 그 별을 표시하는 것입니다. 그만큼 animatedstars. 변수는 이제 스프링 배열을 포함하며 카드에 반복하여 카드에 적용 할 수 있습니다.

각 별에 대해서는 Ang을 보여줍니다 & lt; animatedstar & gt; 메인 내부의 구성 요소 별점 매기기 div. 각 구성 요소에 모든 효과를 적용하는 스타일 소품을 확산하십시오. 클릭하면 새 등급을 부모에게 보내십시오. & lt; rateCard & gt; 구성 요소.

 {AnimatedStars.map ((소품, 인덱스) = & gt; (
& lt; animatedstar.
active = {index + 1 & lt;}}
onclick = {e = & gt; {
e.StopPropagation ();
setrating (index + 1);
}}}
키 = {색인}
스타일 = {{... props}}
/ & gt;
)))}}

이 기사는 원래 크리에이티브 웹 디자인 잡지에 출판되었습니다. 웹 디자이너 ...에 구매 28888. 또는 구독 ...에

자세히보기 :

재사용 가능한 반응 구성 요소를 개발하십시오
2019 년에 프로그래밍을위한 최고의 노트북
35 웹 디자인 도구가 더 똑똑해집니다

반응 스프링을 사용하여 부품 애니메이션

01. 종속성을 설치합니다

02. 상태에서 이미지 생성

03. 각 이미지 카드를 표시합니다

04. 카드 구조를 추가하십시오

05. 호버 스타일을 적용하십시오

06. 기본적으로 그림자를 설정합니다

07. 선택한 상태를 유지합니다

08. 플립 애니메이션을 정의하십시오

09. 애니메이션 컨테이너로 변환합니다

10. 프론트 카드를 움직이게하십시오

11. 뒷 카드를 움직이게하십시오

12. 값을 보간하십시오

13. 클릭하십시오

14. 카드 플립 물리학 조정

15. 틸트 효과를위한 봄을 만듭니다

16. 틸트 스타일을 적용하십시오

17. 마우스 이동시 값을 설정합니다

18. 애니메이션 값을 계산합니다

19. Star 등급 쇼

20. 스타 애니메이션을 만듭니다

21. 부품에 별을 적용하십시오

어떻게 - 가장 인기있는 기사

Instagram에서 재 게시하는 방법

WEBVR 시작하기

손을 빨리 스케치하는 방법

VR에서 2D 캐릭터를 삶으로 가져 오는 방법

CSS 변수로 사이트 테마를 설정하는 방법

슈퍼 패스트 CSS 용 5 팁

멋진 인쇄 프로모션 재료를 만들기위한 3 가지 팁

HTML로 할 수있는 5 가지 모르는 5 가지

카테고리