archive-gh-me/react-native-circular-progress
1
0
Fork 0
mirror of https://github.com/bartgryszko/react-native-circular-progress.git synced 2026-01-18 16:13:10 +00:00
Code Issues Projects Releases Wiki Activity

Fix bug #45, linear animation is not actually linear

Browse Source
This commit is contained in:
Markus Lindqvist 2017-11-21 14:30:49 +02:00
parent 4d41c089f0
commit c0c983395e
2 changed files with 7 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
expoexample/progresschart/ProgressChart.js
View File

@ -1,5 +1,5 @@
import React from 'react';
import { AppRegistry, StyleSheet, Text, View, PanResponder } from 'react-native';
import { AppRegistry, Button, StyleSheet, Text, View, PanResponder } from 'react-native';
import { AnimatedCircularProgress } from 'react-native-circular-progress';
const MAX_POINTS = 500;
@ -27,11 +27,13 @@ export default class ProgressChart extends React.Component {
},
onPanResponderMove: (evt, gestureState) => {
this.refs.circularProgress.performLinearAnimation(0, 0);
// For each 2 pixels add or subtract 1 point
this.setState({ pointsDelta: Math.round(-gestureState.dy / 2) });
},
onPanResponderTerminationRequest: (evt, gestureState) => true,
onPanResponderRelease: (evt, gestureState) => {
this.refs.circularProgress.performLinearAnimation(100, 2000);
let points = this.state.points + this.state.pointsDelta;
console.log(Math.min(points, MAX_POINTS));
this.setState({
@ -77,8 +79,9 @@ export default class ProgressChart extends React.Component {
<AnimatedCircularProgress
size={100}
width={25}
fill={fill}
fill={0}
tintColor="#00e0ff"
ref="circularProgress"
backgroundColor="#3d5875" />
<Text style={[styles.pointsDelta, this.state.isMoving && styles.pointsDeltaActive]}>

3
src/AnimatedCircularProgress.js
View File

@ -1,6 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import { View, ViewPropTypes, Animated } from 'react-native';
import { Animated, Easing, View, ViewPropTypes } from 'react-native';
import CircularProgress from './CircularProgress';
const AnimatedProgress = Animated.createAnimatedComponent(CircularProgress);
@ -41,6 +41,7 @@ export default class AnimatedCircularProgress extends React.Component {
Animated.timing(this.state.chartFillAnimation, {
toValue: toValue,
easing: Easing.linear,
duration: duration
}).start(onLinearAnimationComplete);
}