React Native实现圆形进度条
React Native实现自定义的圆形进度条动画,主要需要用到Animated和react native svg这个插件。先看看最终实现的效果:
大致思路如下:
1. 使用Svg创建画布,指定画布的宽高;
2. 创建外层倒计时Circle,这里需要使用两个完全重合的Circle叠起来实现,这两个Circle都只保留边框,其中一个Circle显示为进度条背景色(上图中的灰色),另一个Circle显示为进度条的前景色(上图的绿色)。而且由于Svg采用的是渲染叠加图层的方式,所以下层的图形会叠在上层图形之上。因此作为背景的Circle需要放置在上方。
const outerCircleCommonConfig = {
fill: 'none', // 填充色为空
cx: halfOfSvgSize, // 圆心x坐标值(相对于Svg画布)
cy: halfOfSvgSize, // 圆心y坐标值(相对于Svg画布)
r: radius, // 圆半径
strokeWidth: strokeWidth, // 圆边框宽度
strokeDasharray: `${circumference} ${circumference}` // 绘制圆边点划线的图案范式,说白了就是定义虚线的渲染形式,circumference是整个圆的周长
};
<Svg width={svgSize} height={svgSize}>
{/* 外层倒计时圆圈 */}
<G rotation={-90} origin={`${halfOfSvgSize}, ${halfOfSvgSize}`}>
<Circle
stroke='#D2D2D2'
{...outerCircleCommonConfig}
/>
<Circle
stroke='#25BB7E'
{...outerCircleCommonConfig}
strokeDashoffset={circumferenceWithProgress}
/>
</G>
</Svg>
上面代码中使用<G>标签包裹两个外层Circle,主要是为了逆时针旋转Circle 90度。默认Circle使用strokeDashoffset绘制偏移量时的起点是时钟的3点钟位置,这样通过逆时针旋转90度,可以修改起点至12点钟位置。绘制圆形进度条的核心属性就是这个strokeDashoffset,通过定时改变绘制偏移量从而产生进度条的效果。所以上面代码中的circumferenceWithProgress是一个Animated动画值。
3. 添加动画属性
const { progress, durationTime } = props;
const radian = progress.interpolate({
inputRange: [0, 1],
outputRange: [0, 2 * Math.PI]
});
const circumferenceWithProgress = Animated.multiply(radius, radian);
const AnimatedCircleProgress = Animated.createAnimatedComponent(Circle);
为了让父级组件能够灵活的控制进度条,所以这里将progress和durationTime(持续时间)定义在父级:
const durationTime = 5; // 持续时间(单位:s)
const [progress, setProgress] = useState(new Animated.Value(0)); // 倒计时动画进度
<CircleProgress progress={progress} durationTime={durationTime}/>
回到CircleProgress组件中,这里将progress动画值使用interpolate做了一层动画值的映射(插值),我们的进度一般都是[0, 1],而strokeDashOffset偏移量应该是[0, 2 * Math.PI] * radius(弧度 * 半径)范围内。最后为了保证外层Circle的stroke能够“动起来”,需要使用Animated.createAnimatedComponent()方法创建一个能执行动画效果的Circle组件AnimatedCircleProgress。修改后如下:
<Svg width={svgSize} height={svgSize}>
{/* 外层倒计时圆圈 */}
<G rotation={-90} origin={`${halfOfSvgSize}, ${halfOfSvgSize}`}>
<Circle
stroke='#D2D2D2'
{...outerCircleCommonConfig}
/>
<AnimatedCircleProgress
stroke='#25BB7E'
{...outerCircleCommonConfig}
strokeDashoffset={circumferenceWithProgress}
/>
</G>
</Svg>
之后在父级组件中,调用如下方法,修改progress动画值即可。
// 开始倒计时
const startCountdown = () => {
Animated.timing(progress, {
toValue: 1,
duration: durationTime * 1000,
easing: Easing.linear
}).start(() => {});
};
如果我们想停止并重置进度条,可以调用如下方法:
const resetCountDown = () => {
progress.stopAnimation(); // 停止当前动画
progress.setValue(0); // 重置动画值
};
4. 添加内层Circle,并显示倒计时时间,还是在CircleProgress组件中:
const [count, setCount] = useState(durationTime);
useEffect(() => {
progress.addListener(({ value }) => {
const ratio = 1 - value;
setCount(Math.round(durationTime * ratio));
});
return () => {
progress.removeAllListeners();
}
}, []);
<Svg width={svgSize} height={svgSize}>
{/* 内层显示倒计时时间圆圈 */}
<Circle
stroke='#25BB7E'
fill='#25BB7E'
cx={halfOfSvgSize}
cy={halfOfSvgSize}
r={innerRadius}
strokeWidth={strokeWidth}
strokeDasharray={`${circumference} ${circumference}`}
/>
<Text
fill="#fff"
fontSize="20"
fontWeight="bold"
x={halfOfSvgSize}
y={halfOfSvgSize + 5}
textAnchor="middle"
>
{`${count} s`}
</Text>
</Svg>
这里使用progress.addListener监听动画值progress的进度,并计算对应的倒计时的值。然后渲染在Text文本中。
最后我们只需要在父级组件中修改常量durationTime的值就能改变总倒计时时间。非常的方便。
CircleProgress组件完整代码如下:src/components/CirclProgress/index.js文件
/**
* 圆形进度条
*/
import React, { useState, useEffect } from 'react';
import { Animated } from 'react-native';
import Svg, { Circle, Text, G } from 'react-native-svg';
import { LogUtil } from '@utils';
const svgSize = 100; // 画布的宽高
const halfOfSvgSize = svgSize / 2;
const strokeWidth = 2; // 圆形进度条宽度
const radius = (svgSize - strokeWidth) / 2; // 外层倒计时进度半径
const innerRadius = radius - 6; // 内层半径
const circumference = 2 * radius * Math.PI; // 总周长
const CircleProgress = (props) => {
const { progress, durationTime } = props;
const radian = progress.interpolate({
inputRange: [0, 1],
outputRange: [0, 2 * Math.PI]
});
const circumferenceWithProgress = Animated.multiply(radius, radian);
const AnimatedCircleProgress = Animated.createAnimatedComponent(Circle);
const outerCircleCommonConfig = {
fill: 'none',
cx: halfOfSvgSize,
cy: halfOfSvgSize,
r: radius,
strokeWidth: strokeWidth,
strokeDasharray: `${circumference} ${circumference}`
};
const [count, setCount] = useState(durationTime);
useEffect(() => {
progress.addListener(({ value }) => {
const ratio = 1 - value;
setCount(Math.round(durationTime * ratio));
});
return () => {
progress.removeAllListeners();
}
}, [])
return (
<Svg width={svgSize} height={svgSize}>
{/* 内层显示倒计时时间圆圈 */}
<Circle
stroke='#25BB7E'
fill='#25BB7E'
cx={halfOfSvgSize}
cy={halfOfSvgSize}
r={innerRadius}
strokeWidth={strokeWidth}
strokeDasharray={`${circumference} ${circumference}`}
/>
<Text
fill="#fff"
fontSize="20"
fontWeight="bold"
x={halfOfSvgSize}
y={halfOfSvgSize + 5}
textAnchor="middle"
>
{`${count} s`}
</Text>
{/* 外层倒计时圆圈 */}
<G rotation={-90} origin={`${halfOfSvgSize}, ${halfOfSvgSize}`}>
<Circle
stroke='#D2D2D2'
{...outerCircleCommonConfig}
/>
<AnimatedCircleProgress
stroke='#25BB7E'
{...outerCircleCommonConfig}
strokeDashoffset={circumferenceWithProgress}
/>
</G>
</Svg>
);
};
export default CircleProgress;