反应原生 Staggger
反相原生 Stagger 组件,由再动电源所提供:
- 电源: 重新命名 3 布局动画
- 与 博览
- - 跨平台(iOS、Android、Web - 需要)
reanimated@>=3.4.0(中文(简体) ) - 60-120小时
- QQ 具有任何反应原生元素/组件的工作
- QQ 在类型脚本中写入
安装
npm install @animatereactnative/stagger
还有,你需要安装 反应-原生再激活,并遵循其安装指令.
使用量
import { Stagger } from '@animatereactnative/stagger';
// ...
export function Example() {
return (
<Stagger
stagger={50}
duration={300}
exitDirection={-1}
entering={() => ZoomInEasyDown.springify()}
exiting={() => FadeOutDown.springify()}
style={{
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'center',
gap: 12,
}}
>
<Paragraph>1. Custom duration</Paragraph>
<Paragraph>2. Custom stagger</Paragraph>
<Paragraph>3. Custom animation</Paragraph>
<Paragraph>4. Custom enter/exit direction</Paragraph>
<Heading>AnimateReactNative.com</Heading>
<Heading>Powered by Reanimated 3</Heading>
<Heading>Works with Expo ❤️</Heading>
</Stagger>
);
}
道具
| 名称 | 说明 | 所需经费 | 类型 | 默认 |
|---|---|---|---|---|
children | 您想要应用无限滚动/ Marquee 效果的任何组件 | 对 | React.ReactNode | 1个 |
enabled | 启用交错动画 | 无 | boolean | 真实 |
stagger | 元素之间的间隔时间 | 无 | number | 第50条 |
duration | 输入/退出动画持续时间 | 无 | number | 400个 |
enterDirection | 动画的方向. 1 -> top to bottom, (中文(简体) ), -1 -> bottom to top | 无 | number | 0 个 |
exitDirection | 动画的方向. 1 -> top to bottom, (中文(简体) ), -1 -> bottom to top | 无 | number | 0 个 |
initialEnteringDelay | 初始输入动画延迟 | 无 | 编号 | 1个 |
initialExistingDelay | 初始退出动画延迟 | 无 | 编号 | -1号 |
onEnterFinished | 调用以宣布上次项目动画完成时( 取决于方向) | 无 | () 无效 | 未定义 |
onExitFinished | 调用以宣布上次项目动画完成时( 取决于方向) | 无 | () 无效 | 未定义 |
enter | 重新激活的 Enter 动画 | 无 | () => ComplexAnimationBuilder | FadeInDown |
exiting | 重新激活的退出动画 | 无 | () => ComplexAnimationBuilder | FadeOutDown |
style | 查看将应用到 Marquee 容器的样式 . | 无 | StyleProp<ViewStyle> |
捐款
见 贡献指南 学习如何为储存库和发展工作流程作出贡献.
许可证
