PlAnimateGrow

한 점에서 펼쳐지는 내용입니다. 최종 크기에 가까운 데서 시작하고 어느 모서리에도 고정할 수 있어서, 옆에 있는 것에서 열려 나오는 것처럼 읽힙니다.

React

import { PlAnimateGrow } from 'plass-ui';

<PlAnimateGrow origin="top">
  <PlBox>Sort, group and column visibility.</PlBox>
</PlAnimateGrow>;

import 'package:plass_ui/plass_ui.dart';

const PlAnimateGrow(
  origin: Alignment.topCenter,
  child: PlBox(child: Text('Sort, group and column visibility.')),
);

Props

Prop	타입	기본값	설명
mode	'in' | 'out'	'in'	내용이 펼쳐지는지 접히는지. out은 같은 키프레임을 거꾸로 돌린 것입니다
from	number	0.8	최종 크기에 대한 배수로서, 시작하는 배율. 1보다 크면 페이지 위로 솟아오르는 대신 내려앉습니다
origin	string	'center'	나머지가 움직이는 동안 제자리에 있는 점 — CSS transform-origin 그대로. top은 아래로 펼치고, bottom left는 모서리에서 나옵니다
fade	boolean	true	커지면서 함께 나타납니다. 이미 페이지에 있고 크기만 바뀌는 것이라면 끄세요
duration공통	number	320	한 번 도는 데 걸리는 시간(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	—	<div> 대신 다른 요소로 렌더링합니다

Prop	타입	기본값	설명
mode	PlassAnimateMode	PlassAnimateMode.enter	내용이 펼쳐지는지 접히는지. in이 Dart의 예약어라 enter/exit입니다
from	double	0.8	최종 크기에 대한 배수로서, 시작하는 배율. 1보다 크면 페이지 위로 솟아오르는 대신 내려앉습니다
origin	Alignment	Alignment.center	나머지가 움직이는 동안 제자리에 있는 점. CSS 문자열이 아니라 Alignment입니다 — topCenter는 아래로 펼치고, bottomLeft는 모서리에서 나옵니다
fade	bool	true	커지면서 함께 나타납니다. 이미 페이지에 있고 크기만 바뀌는 것이라면 끄세요
duration공통	Duration	Duration(milliseconds: 320)	한 번 도는 데 걸리는 시간(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	—	무엇이 펼쳐지는지

네이티브 <div> 속성은 그대로 통과하고, render로 요소 자체를 바꿀 수 있습니다.

origin은 CSS transform-origin 문자열이 아니라 Alignment입니다. 프레임워크에 이미 타입이 있기 때문입니다. duration과 delay는 Duration, curve는 Curve, repeat은 null이 멈추지 않음을 뜻하는 int?입니다.

공유되는 열 가지 설정 — duration, delay, easing, repeat, alternate, paused, trigger, play, once, threshold — 은 모든 PlAnimate* 컴포넌트에서 같습니다. trigger의 네 값은 PlAnimateFade 페이지에 있습니다.

세 가지가 더 있고, 이들은 효과를 상자에서 떼어 안의 것들로 옮깁니다. stagger는 각 자식을 자기 위치만큼 뒤로 미루고, durationStep은 자식마다 앞의 것보다 길거나 짧은 재생 시간을 주며, reverse는 집합의 끝에서부터 시작합니다. 키프레임 하나짜리 효과 여섯 개 모두에 있고, PlAnimateFade 페이지에 설명이 있습니다. timeline="view"와 range도 같은 자리에 있고, 효과를 시계가 아니라 독자의 스크롤 위치에 맡깁니다.

Examples

origin

고정점이 이것과 PlAnimateZoom을 가르는 전부입니다. top에서 펼쳐지는 패널은 위에 있는 컨트롤에서 나오는 패널이고, bottom right에서 펼쳐지는 것은 고정된 모서리에서 나오는 것입니다. 가운데에 고정된 것은 zoom이고, 그 생각에 대한 컴포넌트는 하나뿐입니다.

React

import { PlAnimateGrow, PlBox } from 'plass-ui';

const origins = ['center', 'top', 'bottom right'];

export default function AnimateGrowOrigin() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-4">
      {origins.map((origin) => (
        <PlAnimateGrow
          key={origin}
          origin={origin}
          from={0.4}
          duration={1400}
          repeat="infinite"
          alternate
        >
          <PlBox size="sm">{origin}</PlBox>
        </PlAnimateGrow>
      ))}
    </div>
  );
}

import 'package:flutter/widgets.dart';
import 'package:plass_ui/plass_ui.dart';

class AnimateGrowOrigin extends StatelessWidget {
  const AnimateGrowOrigin({super.key});

  static const Map<String, Alignment> _origins = <String, Alignment>{
    'center': Alignment.center,
    'topCenter': Alignment.topCenter,
    'bottomRight': Alignment.bottomRight,
  };

  @override
  Widget build(BuildContext context) {
    return Wrap(
      spacing: 16,
      runSpacing: 16,
      alignment: WrapAlignment.center,
      children: <Widget>[
        for (final MapEntry<String, Alignment> origin in _origins.entries)
          PlAnimateGrow(
            origin: origin.value,
            from: 0.4,
            duration: const Duration(milliseconds: 1400),
            repeat: null,
            alternate: true,
            child: PlBox(size: PlassSize.sm, child: Text(origin.key)),
          ),
      ],
    );
  }
}

from

1보다 크면 실제보다 크게 도착해서 제자리로 내려앉습니다. 짧은 이동 거리가 유리 위에서 이것을 안전하게 만듭니다. 0.8에서 커지는 시트는 처음부터 끝까지 알아볼 수 있는 같은 시트이고, 뒤의 blur가 곧 될 크기의 5분의 1짜리 표면을 풀어내야 할 일이 없습니다.

React

import { PlAnimateGrow, PlChip } from 'plass-ui';

export default function AnimateGrowFrom() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-3">
      {[0.6, 0.9, 1.25].map((from) => (
        <PlAnimateGrow key={from} from={from} duration={1200} repeat="infinite" alternate>
          <PlChip color={from > 1 ? 'warning' : 'primary'}>from={from}</PlChip>
        </PlAnimateGrow>
      ))}
    </div>
  );
}

import 'package:flutter/widgets.dart';
import 'package:plass_ui/plass_ui.dart';

class AnimateGrowFrom extends StatelessWidget {
  const AnimateGrowFrom({super.key});

  @override
  Widget build(BuildContext context) {
    return Wrap(
      spacing: 12,
      runSpacing: 12,
      alignment: WrapAlignment.center,
      children: <Widget>[
        for (final double from in <double>[0.6, 0.9, 1.25])
          PlAnimateGrow(
            from: from,
            duration: const Duration(milliseconds: 1200),
            repeat: null,
            alternate: true,
            child: PlChip(
              color: from > 1 ? PlassColor.warning : PlassColor.primary,
              child: Text('from=$from'),
            ),
          ),
      ],
    );
  }
}

패널 열기

가장 흔한 쓰임이고, 기본값이 그것을 위해 골라졌습니다. origin="top", 짧은 거리, 빠른 duration. 패널이 옆에 나타나는 대신 그것을 연 컨트롤에서 펼쳐집니다.

React

import { useState } from 'react';
import { PlAnimateGrow, PlBox, PlButton } from 'plass-ui';

export default function AnimateGrowPanel() {
  const [open, setOpen] = useState(false);

  return (
    <div className="flex w-full max-w-sm flex-col items-start gap-2">
      <PlButton size="sm" variant="glass" color="secondary" onClick={() => setOpen(!open)}>
        {open ? 'Hide options' : 'Show options'}
      </PlButton>

      {open ? (
        <PlAnimateGrow className="w-full" origin="top" from={0.92} duration={260}>
          <PlBox size="sm">Sort, group and column visibility.</PlBox>
        </PlAnimateGrow>
      ) : null}
    </div>
  );
}

import 'package:flutter/widgets.dart';
import 'package:plass_ui/plass_ui.dart';

class AnimateGrowPanel extends StatefulWidget {
  const AnimateGrowPanel({super.key});

  @override
  State<AnimateGrowPanel> createState() => _AnimateGrowPanelState();
}

class _AnimateGrowPanelState extends State<AnimateGrowPanel> {
  bool _open = false;

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 320,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.start,
        spacing: 8,
        children: <Widget>[
          PlButton(
            size: PlassSize.sm,
            variant: PlassVariant.glass,
            color: PlassColor.secondary,
            onPressed: () => setState(() => _open = !_open),
            child: Text(_open ? 'Hide options' : 'Show options'),
          ),
          if (_open)
            const PlAnimateGrow(
              origin: Alignment.topCenter,
              from: 0.92,
              duration: Duration(milliseconds: 260),
              child: PlBox(size: PlassSize.sm, child: Text('Sort, group and column visibility.')),
            ),
        ],
      ),
    );
  }
}

Accessibility

• prefers-reduced-motion에서는 애니메이션이 통째로 없어지고 내용은 그냥 거기 있습니다.
• wrapper는 role도 label도 붙이지 않습니다. 이미 자기가 무엇인지 알리는 내용을 감싼 <div>일 뿐입니다.
• 배율 변화는 안에 있는 것을 다시 샘플링하므로, 본문 위에서는 이동 거리를 짧게 두세요. from의 기본값이 0.8인 이유입니다. 긴 이동은 도형이나 아이콘, 사진의 몫입니다.
• 이것은 wrapper이지 disclosure가 아닙니다. 내용을 mount하고 unmount하는 것은 caller의 몫이고, 그 일을 한 컨트롤에 붙을 aria-expanded도 마찬가지입니다.

• 플랫폼에서 애니메이션이 꺼져 있으면(MediaQuery.disableAnimations) 효과가 통째로 없어지고 내용은 그냥 거기 있습니다.
• widget은 자기 semantics를 붙이지 않습니다. 이미 자기가 무엇인지 알리는 내용을 감싼 Transform일 뿐입니다.
• 배율 변화는 안에 있는 것을 다시 샘플링하므로, 본문 위에서는 이동 거리를 짧게 두세요. from의 기본값이 0.8인 이유입니다. 긴 이동은 도형이나 아이콘, 사진의 몫입니다.
• 이것은 wrapper이지 disclosure가 아닙니다. 내용을 넣고 빼는 것은 caller의 몫이고, 그것에 대해 스크린리더에게 무엇을 말할지도 마찬가지입니다.

React 빌드와 다른 점

React	Flutter	이유
origin이 CSS transform-origin 문자열	Alignment	프레임워크에 이미 타입이 있고, Alignment.topCenter가 'top'보다 잘 읽힙니다.
fade가 항상 opacity 레이어를 그림	fade가 꺼지면 Opacity widget 자체가 없음	합성할 레이어가 하나 줄고, 하지 않는 일을 한다고 주장하는 것이 트리에 없습니다.
mode="in" | "out"	PlassAnimateMode.enter / .exit	in은 Dart의 예약어입니다.
render	—	Flutter에는 다형적 요소가 없습니다.
duration, delay가 밀리초	Duration	프레임워크에 이미 타입이 있습니다.
easing이 CSS 문자열	curve, Curve	같은 것에 대한 Dart 자신의 이름입니다.
repeat: number | 'infinite'	int?, null이 멈추지 않음	적을 'infinite'가 없고, -1은 caller가 찾아봐야 하는 sentinel입니다.
trigger="visible"이 IntersectionObserver	가장 가까운 Scrollable을 봅니다	여기에는 observer가 없습니다. 위에 scrollable이 없으면 볼 것이 없으므로 그냥 돕니다.
prefers-reduced-motion	MediaQuery.disableAnimations	플랫폼 자신의 신호입니다.
stagger, durationStep, reverse	—	React 빌드는 효과를 자식들 자신에게 써 넣으므로 호출자의 레이아웃은 그대로입니다. Flutter에는 집합을 배치할 스타일시트가 없어서, 차등을 준 효과는 행이나 열까지 자기가 가져야 합니다. 그것이 바로 PlAnimateAppear이고, 그것을 여섯 개 더 만드는 일이 됩니다.
timeline="view"	—	animation-timeline은 여기에 대응물이 없는 CSS 속성입니다. Flutter에서 스크롤 연동 효과는 ScrollPosition으로 구동하는 AnimationController이고, 위젯이 prop으로 받는 것이 아니라 애플리케이션 자신의 배선입니다.
className, style	—	통과시킬 class 목록도 style 속성도 없습니다.