From 0147a107e159ec360401bc1e5cbb53ed975d3cfa Mon Sep 17 00:00:00 2001 From: Soledad Diez Date: Fri, 1 Sep 2017 11:11:32 +1200 Subject: [PATCH] Add callback function when animation completes. If the animation finished running normally, the completion callback will be invoked with {finished: true}. If the animation is done because stop() was called on it before it could finish (e.g. because it was interrupted by a gesture or another animation), then it will receive {finished: false}. --- README.md | 4 ++-- src/AnimatedCircularProgress.js | 12 ++++++++---- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index a04e7bb..5d79ff0 100644 --- a/README.md +++ b/README.md @@ -84,8 +84,8 @@ You can configure the passing by following props: - **friction** - the friction value for the spring animation (see [here](https://facebook.github.io/react-native/docs/animations.html#core-api)) - **linecap** - the shape to be used at the ends of the circle. Possible values: butt (default), round or square. (see [here](https://developer.mozilla.org/en/docs/Web/SVG/Attribute/stroke-linecap)) - **children(fill)** - you can pass function as a child to receive current fill - - +- **onAnimationComplete** - you can pass a callback function that will be invoked when animation is complete. (see [here](https://facebook.github.io/react-native/docs/animated.html#working-with-animations)) +- **onLinearAnimationComplete** - you can pass a callback function that will be invoked when linear animation is complete. (see [here](https://facebook.github.io/react-native/docs/animated.html#working-with-animations)) ## Working example app You can find working example in the `example` directory of this repository. You can run it by: diff --git a/src/AnimatedCircularProgress.js b/src/AnimatedCircularProgress.js index 50ed0e9..72b9e5d 100644 --- a/src/AnimatedCircularProgress.js +++ b/src/AnimatedCircularProgress.js @@ -24,7 +24,7 @@ export default class AnimatedCircularProgress extends React.Component { } animateFill() { - const { tension, friction } = this.props; + const { tension, friction, onAnimationComplete } = this.props; Animated.spring( this.state.chartFillAnimation, @@ -33,14 +33,16 @@ export default class AnimatedCircularProgress extends React.Component { tension, friction } - ).start(); + ).start(onAnimationComplete); } performLinearAnimation(toValue, duration) { + const { onLinearAnimationComplete } = this.props; + Animated.timing(this.state.chartFillAnimation, { toValue: toValue, duration: duration - }).start(); + }).start(onLinearAnimationComplete); } render() { @@ -64,7 +66,9 @@ AnimatedCircularProgress.propTypes = { tintColor: PropTypes.oneOfType([PropTypes.string, PropTypes.object]), backgroundColor: PropTypes.oneOfType([PropTypes.string, PropTypes.object]), tension: PropTypes.number, - friction: PropTypes.number + friction: PropTypes.number, + onAnimationComplete: PropTypes.func, + onLinearAnimationComplete: PropTypes.func, } AnimatedCircularProgress.defaultProps = {