晴转多云
先看看效果
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/2017e776db6ee0dd3fb66aa592654bd6.gif)
背景:类似与拼单的业务需求,需要告诉用户总份数、购买份数、保底份数,所以需要进度条有三个层级
定义初始化变量
this.state = {
isShow: false,
lineFillAnimation: new Animated.Value(0),
lineFillSumAnimation: new Animated.Value(0)
};
定义插值器
this.lineAnimation = this.state.lineFillAnimation.interpolate({
inputRange: [ 0, 100 ],
outputRange: [ 0, screen_width - 32 / ratio_width ],
extrapolate: 'clamp'
});
this.lineSumAnimation = this.state.lineFillSumAnimation.interpolate({
inputRange: [ 0, 100 ],
outputRange: [ 0, screen_width - 32 / ratio_width ],
extrapolate: 'clamp'
});
启动动画
Animated.spring(
this.state.lineFillSumAnimation,
{
toValue: mul(div(safePart, totalProgress), 100),
friction: 15,
tension: 50
}
).start(
(finished) => {
if (finished) {
this.setSaleNumberAnimated(buyProgress, totalProgress);
}
}
);
Animated.spring(
this.state.lineFillAnimation,
{
toValue: mul(div(buyProgress, totalProgress), 100),
friction: 8,
tension: 2,
velocity: 3
}
).start();
整体布局
组件整体用 View 包裹,主 View 可以搞成总份数,里面第一个 Animated.View 是购买份数的View,第二个则为保底份数的View,TextValueView 是用文字提示告诉用户当前份额
return (
<View style={styles.progressView}>
<View style={styles.progressTotalView}>
<Animated.View style={[styles.progressBuyView, {width: this.lineAnimation}, isWinning === 5 ? {backgroundColor: '#98A6B9'} : null]}/>
<Animated.View style={[styles.progressSumView, {width: this.lineSumAnimation}]}/>
<TextValueView
ref={view => {
this.textValueBuy = view;
}}
textStyles={[styles.progressBuyTextView, {marginLeft: 8 / ratio_width}]}
textValue={'已购0份'}
/>
<TextValueView
ref={view => {
this.totalValueBuy = view;
}}
textStyles={[styles.progressBuyTextView, {marginRight: 8 / ratio_width}]}
textValue={'共0份'}
/>
</View>
</View>
);