当前位置: 首页 > 工具软件 > React Motion > 使用案例 >

react-motion概念简述

孙帅
2023-12-01

react-motion

React-Motion 是一个动画库,拥有一种更轻松的方法来创建和实现逼真的动画。React-Motion利用物理学来为React元素创建几乎自然的动画。

基本概念

spring

  • 基本描述:spring是react-motion最简单也是最深奥的一个函数,是react-motion构筑动画的基石,用户可以通过spring实现各种物理效果
  • 参数:
    • val: 终点值,即你希望达到的最后状态的数值,number类型
    • config: 用于生成物理效果的配置

stiffness 和 damping

  • stiffness: 相当于弹簧的强度,其影响的是弹簧回弹的速度,相同damping情况下,stiffness越大,回弹速度越快;
  • damping: 是弹簧的减震性,其影响的是弹簧的回弹次数,相同stiffness情况下,damping越大,回弹次数越少
  • 点击这里查看官方连接的效果

presets

  • 基本描述:一般情况下,大多数用户其实是不想手动去配置stiffness和damping的,所以react-motion也单独提供了一些预设值

安装

yarn add react-motion 

or

npm i react-motion

Demos

参考

 类似资料: