From 2c04c79d517356089cea5b8d699755f0eebe0501 Mon Sep 17 00:00:00 2001 From: Marc Shilling Date: Tue, 12 Apr 2016 17:00:56 -0400 Subject: [PATCH 1/2] Add function performLinearAnimation --- src/AnimatedCircularProgress.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/AnimatedCircularProgress.js b/src/AnimatedCircularProgress.js index 8e6238c..0a7333f 100644 --- a/src/AnimatedCircularProgress.js +++ b/src/AnimatedCircularProgress.js @@ -33,6 +33,13 @@ export default class AnimatedCircularProgress extends React.Component { } ).start(); } + + performLinearAnimation(toValue, duration) { + Animated.timing(this.state.chartFillAnimation, { + toValue: toValue, + duration: duration + }).start(); + } render() { const { fill, prefill, ...other } = this.props; @@ -49,7 +56,7 @@ export default class AnimatedCircularProgress extends React.Component { AnimatedCircularProgress.propTypes = { style: View.propTypes.style, size: PropTypes.number.isRequired, - fill: PropTypes.number.isRequired, + fill: PropTypes.number, prefill: PropTypes.number, width: PropTypes.number.isRequired, tintColor: PropTypes.string, From 1231cf2113fc38fab6afcfc87b0d84315e563b0e Mon Sep 17 00:00:00 2001 From: Marc Shilling Date: Tue, 12 Apr 2016 17:06:31 -0400 Subject: [PATCH 2/2] Update README.md --- README.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/README.md b/README.md index 0013285..971715b 100644 --- a/README.md +++ b/README.md @@ -48,6 +48,17 @@ You can also define a function, that'll receive current progress and for example ``` +Finally, you can manually trigger a duration-based timing animation by putting a ref on the component and calling the `performLinearAnimation(toValue, duration)` function like so: +```jsx + +``` +```javascript +this.refs.circularProgress.performLinearAnimation(100, 8000); // Will fill the progress bar linearly in 8 seconds +``` + ## Configuration You can configure the passing by following props: