diff --git a/README.md b/README.md index dbbe15e..e2d143f 100644 --- a/README.md +++ b/README.md @@ -95,6 +95,7 @@ prefill | number (0-100) | 0 | Initial duration | number | 500 | Duration of animation in ms easing | function | Easing.out(Easing.ease) | Animation easing function onAnimationComplete | function | | Function that's invoked when the animation completes (both on mount and if called with `.animate()`) +tintColorSecondary | string | the same as tintColor | To change fill color from tintColor to tintColorSecondary as animation progresses `AnimatedCircularProgress` also exposes the following functions: @@ -107,7 +108,7 @@ reAnimate | (prefill: number, toVal: number, duration: number, ease: function) ```sh git clone https://github.com/bgryszko/react-native-circular-progress.git -cd react-native-circular-progress/example +cd react-native-circular-progress/example-app yarn yarn start ``` diff --git a/example-app/App.tsx b/example-app/App.tsx index 914b5ef..daf8c65 100644 --- a/example-app/App.tsx +++ b/example-app/App.tsx @@ -69,7 +69,8 @@ export default class App extends React.Component { width={15} backgroundWidth={5} fill={fill} - tintColor="#00e0ff" + tintColor="#00ff00" + tintColorSecondary="#ff0000" backgroundColor="#3d5875" arcSweepAngle={240} rotation={240} diff --git a/screenshot.gif b/screenshot.gif index 370dc03..cf50688 100644 Binary files a/screenshot.gif and b/screenshot.gif differ diff --git a/src/AnimatedCircularProgress.js b/src/AnimatedCircularProgress.js index 09876e3..d57de9b 100644 --- a/src/AnimatedCircularProgress.js +++ b/src/AnimatedCircularProgress.js @@ -35,7 +35,7 @@ export default class AnimatedCircularProgress extends React.PureComponent { const toValue = toVal >= 0 ? toVal : this.props.fill; const duration = dur || this.props.duration; const easing = ease || this.props.easing; - + const anim = Animated.timing(this.state.fillAnimation, { toValue, easing, @@ -46,10 +46,23 @@ export default class AnimatedCircularProgress extends React.PureComponent { return anim; } + animateColor() { + if (!this.props.tintColorSecondary) { + return this.props.tintColor + } + + const tintAnimation = this.state.fillAnimation.interpolate({ + inputRange: [0, 100], + outputRange: [this.props.tintColor, this.props.tintColorSecondary] + }) + + return tintAnimation + } + render() { const { fill, prefill, ...other } = this.props; - return ; + return ; } }