PlAnimateFloat

가만히 떠서 흔들릴 뿐 어디로도 가지 않는 내용입니다. 여기서 혼자 다릅니다. 다른 모든 효과는 내용이 도착할 때 한 번 재생되는 등장이고, 이것은 끝나지 않습니다.

React

tsx

import { PlAnimateFloat } from 'plass-ui';

<PlAnimateFloat>
  <EmptyStateMark />
</PlAnimateFloat>;

dart

import 'package:plass_ui/plass_ui.dart';

const PlAnimateFloat(child: EmptyStateMark());

Props

Prop	타입	기본값	설명
distance	number \| string	8	시작한 자리에서 얼마나 멀어지는지. 작은 것이 의도입니다 — 열두 픽셀쯤을 넘으면 표류가 아니라 움직이는 무언가가 됩니다
orientation	'vertical' \| 'horizontal'	'vertical'	어느 쪽으로 떠다닐지
duration공통	number	3000	한 번 도는 데 걸리는 시간(ms). CSS 문자열이 아니라 숫자입니다
delay공통	number	0	시작하기까지 기다리는 시간(ms)
easing공통	string	the house curve	CSS가 쓰는 그대로의 이징 곡선
repeat공통	number \| 'infinite'	'infinite'	몇 번 반복할지. 끝없이 돌리려면 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	타입	기본값	설명
distance	double	8	시작한 자리에서 얼마나 멀어지는지. 작은 것이 의도입니다 — 열두 픽셀쯤을 넘으면 표류가 아니라 움직이는 무언가가 됩니다
orientation	PlassOrientation	PlassOrientation.vertical	어느 쪽으로 떠다닐지
duration공통	Duration	Duration(milliseconds: 3000)	한 번 도는 데 걸리는 시간(ms). CSS 문자열이 아니라 숫자입니다
delay공통	Duration	Duration.zero	시작하기까지 기다리는 시간(ms)
curve공통	Curve?	the house curve	CSS가 쓰는 그대로의 이징 곡선
repeat공통	int?	null	몇 번 반복할지. 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이 무엇을 뜻하는지는 다른 트랜지션 어느 페이지에나 있습니다.

멈추지 않는 반복

이 그룹의 나머지는 "이 내용이 어떻게 도착하는가"에 답합니다. 이것은 "무게가 없다는 것은 어떻게 보이는가"에 답하고, 거기서 셋이 따라 나옵니다.

끝나지 않습니다. repeat이 기본으로 무한입니다. 한 번 나갔다 돌아오는 것은 툭 건드리는 것이고, 아무도 그것을 요청하지 않습니다.

효과 union에 들어가지 않습니다. mode와 stagger와 공유 효과 맵이 얹혀 있는 PlassAnimation은 내용이 도착하는 방식의 집합입니다. 표류는 도착이 아니고, 그 맵을 import하는 모든 컴포넌트는 쓰든 안 쓰든 각 항목의 값을 치릅니다. 다른 무엇도 원할 수 없는 항목은 넣지 않습니다. 대신 자기 keyframe을 돌립니다.

mode가 없습니다. 표류에는 역방향이 없습니다. 주기가 이미 대칭이라 거꾸로 돌려도 같은 주기입니다.

주기가 대칭입니다

제자리, 바깥, 제자리. 몇 번을 돌아도 시작한 곳에서 끝나므로, 주기 중간에 멈춘 float가 위젯을 몇 픽셀 어긋난 자리에 영영 남겨 두지 않습니다. 그런 것은 끝난 효과가 아니라 레이아웃 버그로 읽힙니다.

PlAnimateBlink가 같은 모양을 같은 이유로 취합니다.

easing

기본값이 ease-in-out이고, 라이브러리에서 하우스 커브를 쓰지 않는 유일한 컴포넌트입니다.

하우스 커브는 등장의 커브입니다. 출발이 빠르고 자리에 닿을 때 느립니다. 표류에 그 커브를 쓰면 주기의 양 끝에서 돌아서지 않고 덜컥거립니다. 출발선이 없기 때문입니다. 대상은 이미 거기 있고 숨만 쉬고 있습니다.

Examples

빈 상태 위의 마크

흔한 쓰임이고, 거의 유일한 쓰임입니다. 주의의 가장자리에서 느껴지라고 있는 장식입니다.

tsx

<PlEmpty title="No projects yet">
  <PlAnimateFloat>
    <ProjectsMark />
  </PlAnimateFloat>
</PlEmpty>

옆으로, 더 멀리

tsx

<PlAnimateFloat orientation="horizontal" distance={16} duration={5000}>
  <Cloud />
</PlAnimateFloat>

distance의 기본값이 작은 것은 의도입니다. 열두 픽셀쯤을 넘으면 표류가 아니라 페이지 위에서 무언가 움직이는 것이 됩니다.

Notes

아래가 아니라 위입니다. "float"은 어디서든 그 뜻이고, 아래로 가는 기본값은 낙하입니다.
여기의 모든 효과가 그렇듯 transform 축약형이 아니라 독립 속성인 translate로 움직입니다. 그래서 같은 요소에 호출자가 것은 transform이 살아남습니다.

Accessibility

동작을 줄여 달라고 한 사람에게는 아무것도 보이지 않습니다. 이 움직임에 무엇도 기대서는 안 되고, 기댈 것도 없습니다. 장식이고 내용은 어느 쪽이든 전달됩니다.
읽을 것을 안에 넣지 마십시오. 읽는 동안 떠다니는 글자는 쫓아가야 하는 글자입니다.
읽고 있는 페이지 구석에서 멈추지 않고 움직이는 것은 이 라이브러리가 다른 곳에서는 거절하는 유일한 종류의 움직임입니다. 이것은 삽화를 위한 것이지 공지를 위한 것이 아닙니다.

PlAnimateFloat ​

Props ​

멈추지 않는 반복 ​

주기가 대칭입니다 ​

easing ​

Examples ​

빈 상태 위의 마크 ​

옆으로, 더 멀리 ​

Notes ​

Accessibility ​