PlAnimateSplit
한 줄의 글이 조각별로 차례로 도착합니다. 다른 효과들은 자식들에 걸쳐 스스로를 나눠 재생하는데, 글 한 줄에는 자식이 없습니다. 그래서 이것이 자식을 만듭니다.
import { PlAnimateSplit } from 'plass-ui';
<PlAnimateSplit effect="slide" stagger={60}>
One design language, two libraries
</PlAnimateSplit>;import 'package:plass_ui/plass_ui.dart';
const PlAnimateSplit(text: 'One design language, two libraries');Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
| children * | string | — | 줄. 문자열이어야 합니다 — 컴포넌트가 그것을 자르고, <strong> 안에는 자를 것이 없습니다 |
| by | 'word' | 'character' | 'word' | 무엇으로 자를지. character는 모든 문자 체계에서 안전하지 않습니다 — 아랍 문자가 이어지지 않고 이모지가 조각납니다 |
| effect | 'fade' | 'grow' | 'slide' | 'zoom' | 'rotate' | 'blink' | 'reveal' | 'fade' | 각 조각이 재생하는 등장 |
| 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 사이 |
| timeline공통 | 'auto' | 'view' | 'auto' | 무엇이 애니메이션을 진행시키는지 — 시계인지 독자의 스크롤 위치인지. view는 duration, delay, repeat, trigger를 무시하고 range로 달립니다 |
| range공통 | string | 'entry 0% cover 45%' | CSS가 animation-range를 쓰는 그대로. timeline이 view일 때만 읽힙니다 |
| stagger공통 | number | 0 | 자식마다 delay에 더해지는 시간(ms). 0이면 상자 자체가 재생되고, 그 외에는 효과가 자식들로 옮겨 가면서 상자에서는 빠집니다 |
| durationStep공통 | number | 0 | 자식마다 duration에 더해지는 시간(ms). 음수도 되고, 0 아래로는 내려가지 않습니다 |
| reverse공통 | boolean | false | 마지막 자식부터 첫 자식까지 순서를 뒤집습니다. 순서만 뒤집히고 각 자식은 그대로 앞으로 재생됩니다 |
| render | ReactElement | (props, state) => ReactElement | — | <span> 대신 다른 요소로 렌더링합니다 (<h2 />) |
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
| text * | String | — | 줄. 문자열이어야 합니다 — 컴포넌트가 그것을 자르고, <strong> 안에는 자를 것이 없습니다 |
| by | PlAnimateSplitBy | PlAnimateSplitBy.word | 무엇으로 자를지. character는 모든 문자 체계에서 안전하지 않습니다 — 아랍 문자가 이어지지 않고 이모지가 조각납니다 |
| style · textAlign | TextStyle? · TextAlign? | — | 줄을 그리는 글자 스타일과, 줄이 넘어갔을 때의 정렬 |
| from · distance · fade | PlassSide · double · bool | bottom · 12 · true | 등장을 방향과 거리와 fade로 적습니다. React는 CSS keyframe의 이름을 적는데, 저쪽에서는 효과가 이름 붙은 것이고 여기서는 위젯으로 만들어지기 때문입니다 |
| stagger · reverse | Duration · bool | 40ms · false | 한 조각 뒤 다음 조각이 얼마나 늦게 시작하는지, 그리고 줄의 끝에서부터 시작할지 |
| 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 사이 |
character는 모든 문자 체계에서 안전하지 않습니다
쓰기 전에 알아야 할 한 가지입니다.
글자 단위로 자르면 글자 사이의 shaping이 끊깁니다. 아랍 문자가 이어지지 않고, 데바나가리 결합자가 흩어지고, 여러 코드 포인트로 만들어진 이모지가 조각납니다. 한 단어였던 것이 서로 무관한 글리프의 나열이 됩니다.
word에는 그런 문제가 없고, 기본값이며, 어차피 제목이 원하는 것입니다. 도착하는 단어는 눈으로 따라갈 수 있고, 도착하는 글자는 장식입니다.
틈과 조각
공백은 공백으로 남고 자기 등장을 받지 않습니다. 두 단어 사이의 공간을 움직이는 것은 아무것도 도착하지 않는 것입니다. 그리고 stagger의 한 칸도 가져가지 않습니다. 두 번째 단어는 첫 번째보다 두 칸이 아니라 한 칸 뒤에 시작합니다.
각 조각은 inline-block입니다. transform은 대체되지 않은 인라인 요소에 적용되지 않으므로, 그것이 없으면 slide가 사라졌다 나타나기만 하고 움직이지는 않습니다.
등장을 적는 방법
effect가 일곱 keyframe 중 하나를 고르고, stagger와 durationStep과 reverse는 <li> 목록을 감싼 PlAnimateFade에서와 정확히 같은 뜻입니다. 이 컴포넌트는 자르는 일이고 그 이상이 아닙니다.
등장은 방향과 거리와 fade로 적습니다. 이미 자식들에 걸쳐 하나의 등장을 나눠 재생하는 위젯인 PlAnimateAppear가 적는 방식 그대로입니다.
React 쪽은 대신 CSS keyframe의 이름을 적는데, 그 차이는 일관성의 문제가 아닙니다. 저쪽에서는 효과가 스타일시트가 아는 이름 붙은 것이고, 여기서는 모든 효과가 위젯으로 만들어집니다. split은 옆에 있는 위젯이 받는 것을 받습니다.
Accessibility
- 스크린 리더는 줄을 한 번 듣습니다. 조각들은 접근성 트리에서 감추고 줄 전체가 그 옆에 있습니다. 쪼개진 제목이 한 단어씩, 혹은 한 글자씩 읽히는 것을 막아 주는 것이 그것입니다. 이 패턴이 그것 없이 등장하는 모든 곳에서 알려진 결함입니다.
- 선택과 복사는 여전히 틈을 포함한 줄 전체를 줍니다.
- 동작을 줄여 달라고 한 사람에게는 아무것도 재생되지 않고 줄이 그냥 거기 있습니다.