使用React动画库——react-spring
使用React动画库——react-spring
虚拟JIP属地: 浙江
0.722019.11.08 16:28:04字数 644阅读 16,174
为了让后台系统视觉体验更好，决定增加过渡动画效果。
React官网中提到的动画库有3个：React Transition Group、React Motion 以及 React Spring。·
我选择用react-spring的原因，无非就是文档是3个中看的最顺眼的，所以就选它了。
react-spring 是一个基于弹簧物理学的动画库，满足大多数与UI相关的动画需求，提供了足够灵活的工具，可以自信地将想法投射到不断变化的界面中。
该库代表了一种现代动画方法。它的灵感很大程度上来自克里斯托弗·切多（Christopher Chedeau）的 animated 和成娄（Cheng Lou）的 react-motion 。它继承了animated强大的插值和性能，以及react-motion的易用性。
虽然animated主要是命令式的，而react-motion主要是声明式的，但react-spring却在两者之间架起了桥梁。
react-spring库提供了2种API，一种是 Hooks api（就是 React 16.8 的新增特性——Hook），一种是 Render-props api。
下面是我加到系统后台的过渡动画（以后增加再写出来慢慢补充）：
当值改变时，数字的过渡动画：
// 用 Hooks api 写的话，就是重新写一个函数组件
import { useSpring, animated } from 'react-spring'
function Number(props) {
const props = useSpring({ number: props.number ? props.number : 0 });
return (
<animated.span>
{props.number.interpolate(x => (x * 100).toFixed(0))}
</animated.span>
)
}
// 如果要再已有的Class组件内直接加的话，用 Render-props api
import { Spring, animated } from 'react-spring/renderprops'
<Spring native to={{ number: classWrongScore ? classWrongScore : 0 }}>
{props => (<animated.span>
{props.number.interpolate(x => (x * 100).toFixed(0))}
</animated.span>)}
</Spring>
当值改变时，环形图的过渡动画：
下面的是从我之前用css写的环形图改过来的。
import { Spring, animated } from 'react-spring/renderprops'
<div className={style.annulusBasics}>
<div className={style.centerCircle}></div>
<div className={style.annulusOuter}></div>
<Spring native to={{ number: classWrongScore ? classWrongScore : 0 }}>
{props => <>
<animated.div className={style.leftRectangle} style={{
transform: props.number.interpolate(x => (x > 0.5 ? `rotate(${180 * x}deg)` : 'rotate(0deg)'))
}}></animated.div>
<animated.div className={style.rightRectangle} style={{
transform: props.number.interpolate(x => (x <= 0.5 ? `rotate(${360 * x}deg)` : 'rotate(0deg)')),
background: props.number.interpolate(x => (x > 0.5 ? '#FF7F69' : '#EDEDED'))
}} ></animated.div>
</>}
</Spring>
{/* 加下面一个div是因为hidde在移动端失效导致样式不对 */}
<div className={style.repairAnnulus}></div>
</div>
下面的是从我用canvas写的环形图demo改过来的，我是写成函数组件的形式。
import React, { useEffect } from "react";
export default function canvasDonut(props) {
useEffect(() => {
const ctx = document.getElementById("myCanvas").getContext("2d");
//外圆环
ctx.beginPath();
ctx.arc(50, 50, 47, 0, 2 * Math.PI);
ctx.lineWidth = 1;
ctx.strokeStyle = "#fff";
ctx.fillStyle = "#EDEDED";
ctx.fill();
ctx.stroke();
//内圆环
ctx.beginPath();
ctx.arc(50, 50, 35, 0, 2 * Math.PI);
ctx.lineWidth = 1;
ctx.strokeStyle = "#fff";
ctx.fillStyle = "#fff";
ctx.fill();
ctx.stroke();
// //圆环图的进度条
ctx.beginPath();
ctx.arc(50, 50, 41, -Math.PI / 2, -Math.PI / 2 + props.percent * (Math.PI * 2), false);
ctx.lineWidth = props.percent!==0 && 12;
ctx.lineCap = "round";
ctx.strokeStyle = "rgb(255, 127, 105)";
ctx.stroke();
});
return (
<canvas id="myCanvas" width="100" height="100" />
);
}
<Spring to={{ number: classWrongScore ? classWrongScore : 0 }}>
{props => <CanvasDonut percent={props.number}/>}
</Spring>
定时上下滚动：
//定时上下滚动
function useTimingRolling(time = 1000, distance) {
const [scrolling, setScrolling] = useSpring(() => ({ from: { scroll: 0 } }))
const ref = useRef(null)
useEffect(() => {
if (!distance) { distance = ref.current.clientHeight }
}, [])
useEffect(() => {
let intervalID = setInterval(() => {
setScrolling({ scroll: ref.current.scrollTop + distance });
if (Math.ceil(ref.current.scrollTop + ref.current.clientHeight) >= ref.current.scrollHeight) {
setScrolling({ scroll: 0 });
}
}, time);
return () => { clearInterval(intervalID); }
}, [])
return [scrolling.scroll, ref]
}
function chestnut() {
const [timeTable, timeTableRef] = useTimingRolling(10000);
return (
<animated.div scrollTop={timeTable} ref={timeTableRef} >
{new Array(10).fill('chestnut').map((item, i) => (
<animated.div key={i}> {item}{i} </animated.div>
))}
</animated.div>
)
}
逐条滚动：
function chestnut() {
const [delayTable, setDelayTable] = useState(new Array(10).fill('chestnut'))
useEffect(() => {
let intervalID;
intervalID = setInterval(() => {
new Promise(resolve => {
let ago;
setDelayTable(delayTable => { ago = delayTable.shift(); return delayTable })
resolve(ago)
}).then((res) => {
setDelayTable(delayTable => { delayTable.push(res); return delayTable })
})
}, 5000)
return () => { clearInterval(intervalID); clearTimeout(dingshi) }
}, [])
const transitions = useTransition(delayTable, (item, i) => i, {
from: { transform: 'rotateX(0deg)' },
enter: { transform: 'rotateX(0deg)' },
leave: { transform: 'rotateX(90deg)' },
})
return (
<animated.div>
{transitions.map(({ item, props, key }) =>
<animated.div style={props} key={key}>
<animated.span>{item}{i}</animated.span>
</animated.div>
)}
</animated.div>
)
}
使用 Hooks api注意点：
- Hooks api 中的 useSpring 只能写在函数组件中，写在Class组件中会报错。
使用 Render-props api 注意点：（renderprops是：Spring，Transition，Trail，Keyframes，Parallax）
- 如果需要使用 interpolate插值的话，需要在 renderprops 中加一个 native 标志，不然会报错。
- 如果在 renderprops 加一个 native 标志，接收元素需要变成 animated.[elementName]，（例如div变为animated.div），不然会报错。
这个库在打包的时候可能会有个坑：
我是用roadhog，所以使用了这个库之后编译打包，会报错 Failed to minify the bundle. Error: 2.async.js from UglifyJs。原因是这个 npm 包没有遵守约定，没有转成 es5 就发上去，可以看下这个文章。
解决方案就是可以在.webpackrc里加入以下代码，让 babel 编译 node_modules 下指定的文件
{
"extraBabelIncludes": [
"node_modules/react-spring",
]
}
漫思
