API
react-spring 库中与动画相关的 API 支持两种不同的使用渲染道具和 react 钩子的方法。接下来，我们将介绍 react hook 的一些动画相关 API：react spring hook 创建的 spring 动画的基本配置可以通过 usestate、useref 等进行外部控制，以更改动画。动画过渡属性（从、到）也可以设置为状态控制，但无法实现过渡效果，并且变换非常严格动画定义 API（负责创建动画）Usespring：创建一个简单的动画弹簧使用弹簧：创建一组同时执行的弹簧 Usetrail：创建一组按顺序执行的弹簧（创建的弹簧属性一致）使用转换：在生命周期发生变化时添加动画，如已安装/未安装的组件 Usechain：用于自定义 spring 执行顺序动画绘制 API（负责动画执行）动画：是实现 react spring 动画效果的基础。通过上述 API 生成的所有弹簧必须通过动画标记才能绘制动画（动画的执行器）插值：将 spring 中执行过程的转换属性值与动画 XXX 绑定（添加到属性，如 style\classname）、数据映射或属性值修改（绑定动画和执行器）进行比较默认配置配置：弹簧属性的默认值（影响动画的速度、加速度、延迟和错误等基本属性）（官方示例）to 属性可以是异步函数(过渡效果从上到下依次实现)
{ to: async (next: any, cancel: any) => { await next({ opacity: 1, color: '#ffaaee', fontSize: 30 }); await next({ opacity: 0.5, color: 'rgb(14,26,19)', fontSize: 20 }); },}
复制代码
to 属性可以是数组(过渡效果从左到右依次实现)
{ to: [{opacity: 1, color: '#ffaaee'}, {opacity: 0, color: 'rgb(14,26,19)'}], }
复制代码
to 属性的值可以与其他属性平级(props 的其他属性)
{ from: { o: 0.3, xyz: [0, 0, 0], color: 'red' }, o: 1, xyz: [10, 20, 5], color: 'green', reverse: visible,}
复制代码
useSpring
Usespring 用于创建单独的动画，这是 API 其余部分的基础。它接收包含动画属性的对象或返回值为对象作为参数的箭头函数参数为 object 接收 usespringprops 类型的对象返回 animatedvalue 类型的对象可以通过外部 usestate 控制动画属性的更改。通过 ref 修改状态并调整重置和其他属性将执行相应的动画
config.default { mass: 1, tension: 170, friction: 26 }config.gentle { mass: 1, tension: 120, friction: 14 }config.wobbly { mass: 1, tension: 180, friction: 12 }config.stiff { mass: 1, tension: 210, friction: 20 }config.slow { mass: 1, tension: 280, friction: 60 }config.molasses { mass: 1, tension: 280, friction: 120 }
复制代码
参数是一个箭头函数，返回对象 arrow 函数返回 usespringprops 类型的对象返回[animationvalue，set，stop]的数组动画属性的更改只能通过 set 函数重新传递。可以使用“停止”方法提前结束动画返回值为对象时 useSpring 返回值为数组 useSprings useTrailxxx 为 from 和 to 属性中返回的属性
interface AnimatedValue { [key in (form & to)]: AnimatedInterpolation;}type AnimatedValues = Array<AnimatedValue>;
复制代码
animated 组件
在 react 弹簧挂钩中使用动画相对简单。您可以直接使用 animated XXX 导出要从 animated 中使用的 HTML 标记，然后将 spring 直接分配给属性，例如 style 无需附加任何属性，直接使用传入 from 和 to 的值作为 style 的属性。springs 当生成 spring 动画数组时，通过 map 解构获取单个 spring，然后将值添加给 animated。通过 interpolate 获取传入的参数，返回新的 style 属性
const spring = useSpring({...})
<animated.div style={spring}></animated.div><animated.div style={{transfrom: spring.xxx.interpolate(x=>`translate2d(${x}px, 0)`)}}></animated.div>
const springs = useSpring(5, [{...}])// springs.map((spring, index) => (<animated.div key={index} style={{...spring}} />))}springs.map((spring, index) => (<animated.div key={index} style={{transfrom: spring.xxx.interpolate(x=>`translate2d(${x}px, 0)`)}} />))}
复制代码
UseTransitionProps 生命周期动画属性与返回值
from 的功能与 initial 的功能相同，initial 是 enter 的起始值。但是，“初始”仅在首次加载组件时有效，而“自”在每次装入组件时有效。初始优先级较高
interface UseTransitionProps { // 动画弹簧基本属性 config?: SpringConfig | ((item: TItem) => SpringConfig) // 如果为true，key值相同的Spring将被重用 unique?: boolean default false // 动画开始前的延迟（毫秒），每次进入/更新和离开时加起来 trail?: number // 动画开始的起始属性(每次mounted是enter的起始值) from?: InferFrom<DS> | ((item: TItem) => InferFrom<DS>) // 组件mounted的动画属性 enter?: InferFrom<DS> | InferFrom<DS>[] | ((item: TItem) => InferFrom<DS>) // 组件unmounted的动画属性 leave?: InferFrom<DS> | InferFrom<DS>[] | ((item: TItem) => InferFrom<DS>) // 组件的属性更新时的动画属性(Item的值变化时，在enter之后启动，可以通过hook控制state变化) update?: InferFrom<DS> | InferFrom<DS>[] | ((item: TItem) => InferFrom<DS>) // 动画初始值，第一次加载的值(只有第一次mounted有效) initial?: InferFrom<DS> | ((item: TItem) => InferFrom<DS>) | null // 在组件销毁时调用 onDestroyed?: (isDestroyed: boolean) => void}
interface UseTransitionResult { // items的单个项，如果items是boolean则为boolean的值 item: TItem // key值，如果不设置为null，则默认key=>key自动生成 key: string // 当前值状态 inital、enter、leave、update state: State // 动画属性 props: AnimatedValue}
复制代码
评论