动画效果
动画效果
- useRaf — 在每个 requestAnimationFrame 上重新呈现组件
- useSpring — 根据弹簧动力学随时间插入数字
- useTimeout — 超时后返回true
- useTween — 重新渲染组件，同时补间0到1之间的数字
- useUpdate — 返回一个回调，在调用时重新呈现组件
useRaf
React动画钩子,强制组件在每个 reaquestAnimationFrame 上重新渲染，返回经过的时间百分比。
用法
jsx
import {useRaf} from 'react-use';
const Demo = () => {
const elapsed = useRaf(5000, 1000);
return (
<div>
Elapsed: {elapsed}
</div>
);
};参考
ts
useRaf(ms?: number, delay?: number): number;ms— milliseconds 保持重新渲染组件的时间, 默认为1e12.delay— 延迟（以毫秒为单位），然后开始重新渲染组件, 默认为0.
useSpring
React 动画钩子，根据弹簧动力学随时间更新单个数值。
用法
jsx
import {useSpring} from 'react-use';
const Demo = () => {
const [target, setTarget] = useState(50);
const value = useSpring(target);
return (
<div>
{value}
<br />
<button onClick={() => setTarget(0)}>Set 0</button>
<button onClick={() => setTarget(100)}>Set 100</button>
</div>
);
};参考
js
const currentValue = useSpring(targetValue);
const currentValue = useSpring(targetValue, tension, friction);useTimeout
在指定的毫秒数后返回 true。
用法
jsx
import { useTimeout } from 'react-use';
const Demo = () => {
const ready = useTimeout(2000);
return <div>Ready: {ready ? 'Yes' : 'No'}</div>;
};useTween
React动画钩子，补间0到1之间的数字。
用法
jsx
import {useTween} from 'react-use';
const Demo = () => {
const t = useTween();
return (
<div>
Tween: {t}
</div>
);
};参考
ts
useTween(easing?: string, ms?: number, delay?: number): number返回一个数字，该数字在动画结束时以0开始，以1结束。
easing— 一个有效的 easing names, 默认为inCirc.ms— 保持重新渲染组件的时间, 默认为200.delay— 延迟（以毫秒为单位），然后开始重新渲染组件, 默认为0.
useUpdate
React实用程序钩子，它返回一个强制组件在被调用时重新呈现的函数。
用法
jsx
import {useUpdate} from 'react-use';
const Demo = () => {
const update = useUpdate();
return (
<>
<div>Time: {Date.now()}</div>
<button onClick={update}>Update</button>
</>
);
};