React Spring实战之API以及animated 组件的运用

Posted 黎燃黎燃

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React Spring实战之API以及animated 组件的运用相关的知识,希望对你有一定的参考价值。

@[toc]

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 useTrail
xxx 为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($xpx, 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($xpx, 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

以上是关于React Spring实战之API以及animated 组件的运用的主要内容,如果未能解决你的问题,请参考以下文章

7手把手教React Native实战之ReactJS

Spring Cloud微服务安全实战_3-5_API安全之常见问题

Spring Cloud微服务安全实战_3-8_API安全之登录

Spring Cloud微服务安全实战_3-4_API安全机制之认证

Spring cloud微服务安全实战-3-10API安全机制之授权_batch

Spring cloud微服务安全实战-3-6API安全机制之数据校验_batch