react-motion概念简述

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

• Simple Transition
• Chat Heads
• Draggable Balls
• TodoMVC List Transition
• Photo Gallery
• Spring Parameters Chooser
• Water Ripples
• Draggable List

参考

• react-motion
• 用react-motion实现react动画