@dloizides/ui-motion (英语)

名副其实的 原生反应( RN- web) 运动原始人——共享 dloizides.com UI工具包的动画层.

• 建于 RN 上 Animated 只有这个. 没有 被重新激活 / moti / 帧 .
• 本地本地司机,网上联署材料司机useNativeDriver: Platform.OS !== 'web') (中文(简体) ).
• 每出动画都会在用户喜欢减少动作时崩溃到瞬间 (单位:千美元)useReducedMotion(),从 @dloizides/rn-web-hooks) (中文(简体) ).
• 运动值(期限+放松)来自 @dloizides/design-tokens网络 (预算外) cubic-bezier)和土生土长(Easing.bezier动画 相同的曲线。 。 。 .

安装

npm install @dloizides/ui-motion

端点 : react >=18, (中文(简体) ), react-native >=0.74。运行时道克 @dloizides/design-tokens 财务报告和审定财务报表 @dloizides/rn-web-hooks 自动安装.

键

import { motionDurations, motionEasings, DEFAULT_MOTION } from '@dloizides/ui-motion';

motionDurations; // { instant: 0, fast: 140, base: 200, slow: 300 } (ms)
motionEasings.standard;   // RN EasingFunction built from cubic-bezier(0.2,0,0,1)
motionEasings.decelerate; // entering elements
motionEasings.accelerate; // leaving elements
DEFAULT_MOTION.easings.standard.css; // 'cubic-bezier(0.2,0,0,1)' for web/CSS consumers

钩子

useReducedMotion() 编号 : prefersReducedMotion()

从 @dloizides/rn-web-hooks (克能克之门——不是要塞). 网络读取 matchMedia('(prefers-reduced-motion: reduce)'); 本地回归 false。 。 。 .

useEnterExit({ visible, duration?, translateY?, fromScale? })

可重复使用的出/入模式(取消+可选翻译/比例) ui-feedback敬酒厅 返回动画 style 财务报告和审定财务报表 (单位:千美元) mounted 因此,旗帜 节点留在树上直到其退出动画完成.

const { style, mounted } = useEnterExit({ visible: open, translateY: -6 });
if (!mounted) return null;
return <Animated.View style={style}>{children}</Animated.View>;

useFocusLift(focused, spring, { scale?, lift? })

弹出一个平板 scale (违约1.06)和 -lift px( 默认 8) 时 focused继续休息 否则。 焦点变化重定向运行的弹簧. 运动减少:无运动(信号聚焦) 以环/阴影取而代之。 展开 style 打开 Animated.View。纯目标 : focusLiftTarget。 。 。 .

useSequence(items, { totalMs, itemMs?, playKey?, playOnMount? })

沿着固定总数中任何订购的列表串起:最后一项结束于 totalMs 不论时间长短 名单是. progressAt(index) 0 - 1 的动画值。 一个新的 playKey 从第一个项目重放; playOnMount: false 开始决赛,等待一个。 减少 动作: 每件物品同时是最后的。 输入永远不会被屏蔽:没有交互手柄,没有等待的. 纯时间 : sequenceItemRange。 。 。 .

构成部分

<ScreenTransition transitionKey duration? easing? testID?>

将孩子从右侧滑入窗口宽度 transitionKey 更改; 第一个 做不动静。 默认 : motionDurations.slow, (中文(简体) ), motionEasings.decelerate减少动议 直接切到内容。 路由器-不可知:通过路径名作为密钥.

<ScreenTransition transitionKey={usePathname()}>
  <Stack screenOptions={{ animation: 'none' }} />
</ScreenTransition>

<FadeIn duration? delay? translateY? style? testID>

他们的子孙在山上.

<FadeIn><Card /></FadeIn>

<Collapse open duration? style? testID>

动画高度扩展/缩合 网络工作 - 它测量内容 自然高度和动画真实 Animated.Value 高度( 不同于 LayoutAnimation, (中文(简体) ), (原始内容存档于2018-09-21) (英语). a ourn- only no-op on RN-web. 儿童留守;溢出被切断.

<Collapse open={expanded}><Details /></Collapse>

<PressableScale pressedScale? innerStyle? ...PressableProps>

A 类 Pressable 缩放( 默认值) 0.96在新闻和弹簧回 压出。 前进 全部 可压缩道具和无障碍. 设计用于替换赤色 activeOpacity 内 @dloizides/ui-buttons。 。 。 .

<PressableScale accessibilityLabel="Save" accessibilityHint="Saves the form" onPress={save}>
  <Text>Save</Text>
</PressableScale>

<Skeleton width? height? borderRadius? duration? backgroundColor? highlightColor? style? testID>

一个四舍五入的占位器 上面有一个突出的乐队横扫着它 一个更强大的 加载信号比不透明脉冲 ui-feedback是佩克·斯克勒顿.

<Skeleton width="60%" height={20} borderRadius={6} />

<Reorder itemKeys spring staggerMs? cap? testID>{(key) => node}</Reorder>

FLIP 对按键列表重新排序 : itemKeys 更改顺序, 移动从旧项目中跳出 位置到新位置, 交错( 默认值 18ms), 最多 cap (默认8)动画. 减少 动作项目跳跃。 倒数是纯的 computeFlipDeltas。 。 。 .

减少动议

每个原始人都尊重OS的"减少运动"设定: FadeIn 在休息时显示内容, Collapse 到达目标高度, PressableScale 保持比例 1, (中文(简体) ), Skeleton 显示一个静态块,以及 useEnterExit 崩溃其持续时间为 0。 。 。 .

测试哲学

单元测试覆盖 逻辑 (减少运动倒塌、上载/出载寿命周期、标志) 衍生,道具转发),不是动画帧——由帧驱动的路径是 在应用程序 E2E 套房中验证.

许可证

麻省理工学院

发线图( R)@dloizides/ui-motion/hairline(中文(简体) )

环绕 @lucasmarkes/[email protected] (准确的指针)所以应用程序从不直接导入. 道具 : figure (单位:千美元)HairlineFigureName, (中文(简体) ), colors 联合国 ModeColors 从 @dloizides/design-tokens绘制到 --hairline-* 以 hairlineVars, (中文(简体) ), intensity (0-1), (中文(简体) ), label (译出), testID。 。 。 .

• 网络(RN-web, browser 条件 : 在 View 的 DOM 节点上挂起香草 API; 在卸载上被销毁 .
• 原生( B)react-native 条件 : 使上游捆绑内嵌为 HTML react-native-webview (可选的对等点;安装后在iOS/Android上使用此子路径). 每个屏幕一个图.
• 一个图是装饰:从不将用户需要的信息放入其中. 在触摸第一屏幕上,偏好横向/区域数字(terrain, (中文(简体) ), riffle, (中文(简体) ), keyboard, (中文(简体) ), router, (中文(简体) ), rail, (中文(简体) ), dish, (中文(简体) ), turntable, (中文(简体) ), plot) (中文(简体) ).

日志播放器( L)@dloizides/ui-motion/logo(中文(简体) )

无框架( 导入图中没有反应; 只) @dloizides/design-tokens),用于普通的HTML页面和香草Vite应用. 标记被绘制到其他地方;用 data-motion-layer="<name>"。 。 。 .

import { playLogo, bindMicro, type LogoTimeline } from '@dloizides/ui-motion/logo';

const intro: LogoTimeline = [
  { layer: 'sheet', keyframes: [{ opacity: 0, transform: 'translateY(6px)' }, { opacity: 1, transform: 'none' }], duration: 'slow', easing: 'decelerate' },
  { layer: 'fold', keyframes: [{ opacity: 0 }, { opacity: 1 }], duration: 'base', delay: 160 },
];
const { finished, cancel } = playLogo(svg, intro);
const unbind = bindMicro(svg, pulse, 'hover');

• playLogo(svg, timeline, { reducedMotion?, iterations? }) => { finished, cancel }一个WAAPI动画每个匹配层, fill: 'both'· ; finished 在完成或取消时解决.
• 击: { layer, keyframes, duration: 'instant'|'fast'|'base'|'slow'|ms, easing?: 'standard'|'decelerate'|'accelerate', delay?: ms },从 DEFAULT_MOTION。 。 。 .
• 减少运动(可选,其他) prefers-reduced-motion)或没有WAAPI:最后一个键框同时被应用,没有动画.
• bindMicro(svg, timeline, 'hover'|'focus'|'loading', { reducedMotion? }) => unbind:徘徊=指向/出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出入出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出.
• 击出 required: true如果标记有那个层的节点, playLogo 应用最终帧,不开始动画.

预设

import { bindMicro, logoPreset, playLogo } from '@dloizides/ui-motion/logo';

playLogo(svg, logoPreset(config.logoAnimation));
bindMicro(svg, logoPreset(config.logoAnimation, { cut: 'micro' }), 'hover');

logoPreset(name?, { cut? }) 返回 a LogoTimeline名称 : line-draw (违约), day-sweep, (中文(简体) ), orbit-lock, (中文(简体) ), fold (单位:千美元)LOGO_PRESET_NAMES; 一个未知的名称返回默认值。 切数 : intro (违约,最多1.2 s), sting (3.6 s: 300 ms hold, 内向拉伸, 500 ms hold), micro (最多300ms,起止于静地上). 没有预设动画 CSS d。 。 。 .

缺少一个需要的图层的标记显示了它的静态. 标记本身的标记提供了其余的:

• line-draw: 填充形状 pathLength="1" 不得在静地中中风.
• orbit-lock, (中文(简体) ), fold: 中央支助 transform-box: view-box 财务报告和审定财务报表 transform-origin 每层的轨道中心: emblem,这些部件的交汇点 part-*。 。 。 .
• 可选 CSS 变量 : --logo-line, (中文(简体) ), --logo-line-width (视图框单位,默认值) 1.5px, (中文(简体) ), --logo-accent; 颜色回归到 currentColor。 。 。 .