AnimateShake

세트에서 유일하게 아니라고 말하는 효과입니다. 틀린 비밀번호, 보내지지 않은 양식, 놓은 자리에 놓일 수 없던 행. 여기 있는 다른 애니메이션이 전부 도착하는 내용이라면 이것은 대답입니다.

import { AnimateShake } from 'neba';

<AnimateShake key={attempts} play={failed}>
  <TextField label="Passphrase" error={message} />
</AnimateShake>;

Props

Prop	타입	기본값	설명
stagger공통	number	0	한 자식 뒤 다음 자식이 시작하기까지의 간격(ms). 0이면 상자 자체가 재생되고, 그보다 크면 효과가 자식 하나하나에게 넘어갑니다
durationStep공통	number	0	자식마다 재생 시간에 더해지는 값(ms). 음수면 뒤로 갈수록 빨라지며, 0 아래로는 내려가지 않습니다
reverse공통	boolean	false	마지막 자식부터 실행합니다. 순서만 뒤집히고 각 자식은 그대로 재생됩니다
duration공통	number	420	한 번 재생되는 시간(ms)
delay공통	number	0	시작 전 대기(ms)
easing	string	—	CSS 이징 곡선. 기본값은 라이브러리의 곡선
repeat공통	number | 'infinite'	1	반복 횟수
alternate공통	boolean	false	한 번 걸러 거꾸로 재생합니다. 반복이 처음으로 튀지 않고 되돌아옵니다
trigger공통	'mount' | 'visible' | 'hover' | 'manual'	'mount'	무엇이 재생을 시작하는지. visible은 화면에 들어올 때, hover는 포인터가 올라올 때(포커스 포함), manual은 play가 정합니다
play	boolean	—	trigger가 manual일 때 재생합니다. false → true 될 때마다 처음부터 다시 시작합니다
once공통	boolean	true	trigger가 visible일 때 처음 한 번만 재생할지. 끄면 화면에 들어올 때마다 다시 재생됩니다
threshold공통	number	0.2	trigger가 visible일 때 화면에 얼마나 들어와야 하는지, 0에서 1 사이
paused공통	boolean	false	있는 자리에 붙들어 둡니다
distance	number | string	6	가장 크게 흔들릴 때의 이동 거리. 숫자는 px입니다
render	useRender.RenderProp	—	div 대신 다른 요소로 렌더링합니다 (render={<label />}). Base UI의 render prop 그대로
children	ReactNode	—	흔들릴 것

나머지 <div> 속성은 루트로 그대로 전달됩니다. 모든 Animate*가 공유하는 설정은 prop 규약에 있습니다.

여기 있는 다른 효과와 달리 기본값이 trigger="manual"입니다. mount에서 실행되는 흔들림은 장식이고, 움직이는 장식은 독자가 무시하는 법을 배우는 것입니다. 실패한 것에 play를 묶으세요. 거절될 때마다 새 key를 주는 것이 되감기라서, 두 번째 오답도 첫 번째만큼 움직입니다.

mode는 없습니다. 요소가 앉아 있는 자리에서 시작해 그 자리에서 끝나므로 도중에 끊겨도 어긋난 채 남지 않고, repeat는 절대 주지 마세요.

예시

distance

가장 크게 흔들릴 때의 이동 거리입니다. CSS 길이나 픽셀 숫자를 받습니다. 기본값은 6입니다. 고개를 젓는 정도이지 물건을 흔드는 정도가 아닙니다.

이 효과가 예외인 이유

컨트롤을 transform하지 않는다는 것이 이 라이브러리의 규칙입니다. 이 규칙은 hover, press, on, off 같은 컨트롤의 정지 상태에 적용되며, 그런 상태는 색으로 나타내는 편이 더 분명합니다. 흔들림은 상태가 아닙니다. 독자가 방금 한 조작에 대한 일회성 응답이고 400ms 만에 끝나며, 실패했다는 것을 이만큼 분명하게 전달하는 색은 없습니다.

접근성

• 모션 감소 설정에서는 애니메이션이 꺼지므로, 흔들림이 메시지를 나르는 유일한 수단이어서는 안 됩니다. 말로도 적으세요. 필드의 error가 스크린 리더가 읽는 것입니다.
• 실패한 컨트롤로 focus도 옮기세요. 그것을 보고 있지 않은 독자에게 움직임은 아무것도 전하지 못합니다.