diff --git a/README.md b/README.md index d738b31..f5f764b 100644 --- a/README.md +++ b/README.md @@ -42,6 +42,7 @@ import { Image, Dimensions, Platform, + Animated, } from 'react-native' import Parabola from 'react-native-smart-parabola' @@ -253,14 +254,14 @@ export default class ParabolaDemo extends Component { }) } - _renderParabola = ({index, translateX, translateY}) => { + _renderParabola = ({index, AnimatedVaule}) => { return ( - ) @@ -283,4 +284,4 @@ renderParabola | func | No | | determine the parabola view [0]: https://github.com/cyqresig/ReactNativeComponentDemos [1]: http://cyqresig.github.io/img/react-native-smart-parabola-preview-ios-v1.0.1.gif -[2]: http://cyqresig.github.io/img/react-native-smart-parabola-preview-android-v1.0.1.gif \ No newline at end of file +[2]: http://cyqresig.github.io/img/react-native-smart-parabola-preview-android-v1.0.1.gif diff --git a/parabola.js b/parabola.js index 8455031..82b0ce8 100644 --- a/parabola.js +++ b/parabola.js @@ -14,6 +14,7 @@ import { View, Text, Dimensions, + Animated, } from 'react-native' export default class Parabola extends Component { @@ -46,12 +47,13 @@ export default class Parabola extends Component { // εˆε§‹ηŠΆζ€ this.state = { parabolas: [], + ParabolaAnimated : [], } this._isAnimating = false } - componentWillReceiveProps (nextProps) { - let {start, end, isTrigger,} = nextProps + start () { + const {start, end, isTrigger,} = this.props if (isTrigger) { let parabola = { start, @@ -64,16 +66,14 @@ export default class Parabola extends Component { this._addBall(parabola) } } - render () { - let parabolas = this.state.parabolas.map((parabola, index) => { - let {translateX, translateY,} = parabola + const parabolas = this.state.parabolas.map((parabola, index) => { return this.props.renderParabola({ index, - translateX, - translateY, + AnimatedVaule : this.state.ParabolaAnimated[index].getLayout() }) }) + return ( {parabolas} @@ -83,6 +83,7 @@ export default class Parabola extends Component { _addBall (parabola) { this.state.parabolas.push(parabola) + this.state.ParabolaAnimated.push(new Animated.ValueXY(0)) if(!this._isAnimating) { this._updateBalls() @@ -97,9 +98,9 @@ export default class Parabola extends Component { return } - let {duration, rate, top: rry1,} = this.props + let {duration, rate, top: rry1,endFunc} = this.props - //let r_animationEnd //test code + let r_animationEnd let parabolas = this.state.parabolas.map((parabola) => { @@ -114,7 +115,7 @@ export default class Parabola extends Component { else { interval = duration parabola.animationEnd = true - //r_animationEnd = true //test code + r_animationEnd = true } } @@ -149,13 +150,24 @@ export default class Parabola extends Component { return parabola != null }) - this.setState({ - parabolas, + parabolas.map((data,i)=>{ + this.state.ParabolaAnimated[i].setValue({ + x:data.translateX, + y:data.translateY + }) }) - //if(!r_animationEnd) //test code + if(parabolas.length!=this.state.parabolas){ + this.setState({ + parabolas, + }) + } + + + if(r_animationEnd){ + endFunc() + } requestAnimationFrame(this._updateBalls.bind(this)) } } -