PlAnimateShake

거절입니다. 이 묶음에서 등장이 아니라 응답인 유일한 효과이고, 그래서 가만히 멈춘 채 시작합니다. "또"라고 말하는 방법이 replay입니다.

React

tsx

import { PlAnimateShake } from 'plass-ui';

<PlAnimateShake replay={attempts}>
  <PlTextField label="Password" type="password" error={error} invalid />
</PlAnimateShake>;

dart

import 'package:plass_ui/plass_ui.dart';

PlAnimateShake(
  replay: attempts,
  child: PlTextField(label: const Text('Password'), error: error, invalid: true),
);

Props

Prop	타입	기본값	설명
replay	unknown	—	이 값이 바뀔 때마다 다시 흔듭니다. 첫 렌더링에서는 절대 재생하지 않습니다 — 거절은 두 번 일어날 수 있고 bool로는 "또"라고 말할 수 없습니다
distance	number \| string	6	시작한 자리 양옆으로 얼마나 움직이는지
duration공통	number	400	한 번 도는 데 걸리는 시간(ms). CSS 문자열이 아니라 숫자입니다
delay공통	number	0	시작하기까지 기다리는 시간(ms)
easing공통	string	the house curve	CSS가 쓰는 그대로의 이징 곡선
repeat공통	number \| 'infinite'	1	몇 번 반복할지. 끝없이 돌리려면 Infinity가 아니라 'infinite' — CSS에 그 단어로 그대로 쓰이기 때문입니다
alternate공통	boolean	false	한 번 걸러 거꾸로 돌립니다. 반복이 처음으로 튀어 돌아가는 대신 되돌아옵니다
paused공통	boolean	false	있는 자리에 멈춰 세웁니다
trigger공통	'mount' \| 'visible' \| 'hover' \| 'manual'	'mount'	무엇이 시작시키는지. mount는 화면에 올라오자마자, visible은 스크롤되어 보일 때, hover는 포인터나 focus가 닿을 때, manual은 play가 시킬 때만
play공통	boolean	—	trigger가 manual일 때 실행합니다. false → true가 될 때마다 처음부터 다시 돕니다
once공통	boolean	true	trigger="visible"에서 처음 한 번만 돌릴지. 끄면 화면에 다시 들어올 때마다 다시 돕니다
threshold공통	number	0.2	trigger="visible"에서 얼마나 보여야 보이는 것으로 칠지, 0에서 1 사이
render	ReactElement \| (props, state) => ReactElement	—	<div> 대신 다른 요소로 렌더링합니다

Prop	타입	기본값	설명
replay	Object?	—	이 값이 바뀔 때마다 다시 흔듭니다. 첫 렌더링에서는 절대 재생하지 않습니다 — 거절은 두 번 일어날 수 있고 bool로는 "또"라고 말할 수 없습니다
distance	double	6	시작한 자리 양옆으로 얼마나 움직이는지
duration공통	Duration	Duration(milliseconds: 400)	한 번 도는 데 걸리는 시간(ms). CSS 문자열이 아니라 숫자입니다
delay공통	Duration	Duration.zero	시작하기까지 기다리는 시간(ms)
curve공통	Curve?	the house curve	CSS가 쓰는 그대로의 이징 곡선
repeat공통	int?	1	몇 번 반복할지. null이 멈추지 않음을 뜻합니다 — 적을 'infinite'가 없고, -1은 찾아봐야 하는 sentinel입니다
alternate공통	bool	false	한 번 걸러 거꾸로 돌립니다. 반복이 처음으로 튀어 돌아가는 대신 되돌아옵니다
paused공통	bool	false	있는 자리에 멈춰 세웁니다
trigger공통	PlassAnimateTrigger	PlassAnimateTrigger.mount	무엇이 시작시키는지. mount는 화면에 올라오자마자, visible은 스크롤되어 보일 때, hover는 포인터나 focus가 닿을 때, manual은 play가 시킬 때만
play공통	bool	false	trigger가 manual일 때 실행합니다. false → true가 될 때마다 처음부터 다시 돕니다
once공통	bool	true	trigger="visible"에서 처음 한 번만 돌릴지. 끄면 화면에 다시 들어올 때마다 다시 돕니다
threshold공통	double	0.2	trigger="visible"에서 얼마나 보여야 보이는 것으로 칠지, 0에서 1 사이
child *	Widget	—	무엇이 거절되는지

공유 애니메이션 prop이 무엇을 뜻하는지는 다른 트랜지션 어느 페이지에나 있습니다.

replay가 존재 이유입니다

거절은 두 번 일어날 수 있고, bool인 play로는 "또"라고 말할 수 없습니다. 그것으로 다시 재생하려면 껐다 켜야 하는데, 한 사건에 렌더링 두 번이고 되돌려 놓는 것이 유일한 일인 상태가 하나 생깁니다.

값이 바뀌었다는 사실은 React가 가진 사건에 가장 가까운 것이고, 폼이 이미 세고 있는 실패 횟수가 바로 그 값입니다.

tsx

const [attempts, setAttempts] = useState(0);

<PlAnimateShake replay={attempts}>…</PlAnimateShake>;

첫 렌더링에서는 절대 재생하지 않습니다. 마운트에서 스스로 흔들리는 shake는 일어나지도 않은 사건에 답하는 것입니다.

이벤트에 대한 반응

여기 다른 모든 효과는 "이 내용이 어떻게 도착하는가"에 답하고 마운트에서 시작합니다. 이것은 사용자가 한 일에 답하므로 멈춘 채 시작하고(trigger의 기본값이 manual입니다) 시키는 때에만 재생합니다.

mode와 stagger가 얹혀 있는 PlassAnimation에도 들어가지 않습니다. PlAnimateFloat과 같은 이유입니다. 그 union은 내용이 도착하는 방식의 집합이고, 응답은 도착이 아닙니다.

멈추는 자리

제자리 양옆으로 세 번 떨고 아무것도 아닌 상태로 돌아옵니다.

이 묶음의 다른 어느 것보다 여기서 더 중요합니다. 호출자가 아직 입력 중인 내용 위에 돌리게 될 유일한 효과이기 때문입니다. 라벨에서 몇 픽셀 어긋난 채 남은 입력란은 그것이 보고하던 오류보다 나쁜 결함입니다.

Examples

잠긴 컨트롤

tsx

<PlAnimateShake replay={refusals}>
  <PlButton disabled>Delete workspace</PlButton>
</PlAnimateShake>

더 짧고 더 넓게 떨기

tsx

<PlAnimateShake replay={attempts} distance={10} duration={300}>

Accessibility

동작을 줄여 달라고 한 사람에게는 아무것도 보이지 않습니다. 그래서 흔들림보다 글자가 더 중요합니다. 거절이 말하려는 것은 글로도 말해야 합니다. 입력란의 error나 live region의 메시지가 그 자리입니다. 흔들림은 강조이지 메시지가 아닙니다.
입력란을 흔드는 것은 스크린 리더에게 아무 말도 하지 않습니다. 그것을 하는 입력란 자신의 error와 invalid와 함께 쓰십시오.
내용을 감싸는 장식이지 내용이 무엇인지를 바꾸는 wrapper가 아닙니다. 안에 있는 것은 자기 role과 포커스와 이름을 그대로 유지합니다.

PlAnimateShake ​

Props ​

replay가 존재 이유입니다 ​

이벤트에 대한 반응 ​

멈추는 자리 ​

Examples ​

잠긴 컨트롤 ​

더 짧고 더 넓게 떨기 ​

Accessibility ​