3

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

 2 years ago
source link: https://blog.51cto.com/u_15603561/5635172
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

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

精选 原创

Table of Contents

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

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(${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
}
  • 赞
  • 收藏
  • 评论
  • 分享
  • 举报

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK