012-React-Native-动画基础-抽奖转盘

欢迎各位同学加入：
React-Native群：397885169
大前端群：544587175
大神超多，热情无私帮助解决各种问题。

本人提供 React-Native技术服务，坐标杭州余杭区文一西路智能小镇，限时周六周日，免费。

AnimatedParallelPage.js

export default class AnimatedParallelPage extends Component {
    static navigationOptions = ({ navigation }) => ({
        title: `${navigation.state.params.nameAnimated}`,
    });

    constructor(props){
        super(props);
        this.state = {
            viewTransY : new Animated.Value(0),
            trans : new Animated.ValueXY({
            x: Dimensions.get('window').width/2,
            y: Dimensions.get('window').height/2,
        })};
    }

    componentWillMount(){
        var timing = Animated.timing;
        Animated.parallel([
                timing(this.state.viewTransY, {
                    //react-navigation的header title高度为64
                    toValue: Dimensions.get('window').height/2-100-32,
                    duration: 1000,
                    easing: Easing.inOut(Easing.ease),
                }),
                timing(this.state.trans, {
                    toValue: {
                        x : -Dimensions.get('window').width/2,
                        y : -Dimensions.get('window').height/2+50+32,
                    },
                    duration: 2000,
                    delay: 1000
                }),
            ]).start(()=>{
                this.props.navigation.goBack();
            })

    }

    render(){
        return(
                <View style={styles.container}>
                    <Animated.View style={[{transform: this.state.trans.getTranslateTransform()}]} >
                        <Image source={{uri: "https://img3.doubanio.com/view/photo/photo/public/p2396117560.jpg"}} style={styles.img}/>
                    </Animated.View>
                    <Animated.View style={[styles.viewBox, {transform: [{translateY: this.state.viewTransY}]}]} />
                </View>
        )
    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems:'center',
    },
    viewBox:{
        width:Dimensions.get('window').width,
        height:100,
        backgroundColor:'red'
    },
    img:{
        width:100,
        height:100,
        borderRadius:50,
        backgroundColor:'yellow'
    }
});

AnimatedTurnTableDrawPage.js

export default class AnimatedTurnTableDrawPage extends Component {
    static navigationOptions = ({ navigation }) => ({
        title: `${navigation.state.params.nameAnimated}`,
    });

    constructor(props){
        super(props);
        this.state = {
            offOn:true,
            rotateDeg:new Animated.Value(0),
        };
    }

    rotateImg=()=>{
      if(this.state.offOn){
          this.setState({
              offOn:!this.state.offOn,
              rotateDeg:new Animated.Value(0),
          },()=>{
              this.rotateImg();
          });
      }
    };


    rotateImg=()=>{
        let number=Math.ceil(Math.random()*8);
        if((number/8)==0.875){
            number=1;
        }
        let  oneTimeRotate=number/8+1;
        Animated.timing(this.state.rotateDeg, {
            toValue: oneTimeRotate,
            duration: 2000,
            easing: Easing.out(Easing.linear),
        }).start(()=>{

            this.setState({
                        offOn:!this.state.offOn,
                    });
            //动画结束时，会把toValue值，回调给callback

            this.state.rotateDeg.stopAnimation((oneTimeRotate)=>{
                this.changeValue(oneTimeRotate);
            })});
    };

    changeValue=(number)=>{
        alert("可以根据"+number+"的值，进行相关计算");
    };


    render() {
        return (
            <View style={styles.container}>
                <Animated.Image
                    source={require('../img/rotate.png')}
                    style={[styles.mainImg,{transform: [
                     {
                        rotate: this.state.rotateDeg.interpolate({
                                inputRange: [0, 0.125,0.25,0.375,0.5,0.625,0.75,0.825,1,1.125,1.25,1.375,1.5,1.625,1.75,1.825,2],
                                outputRange: ['0deg','45deg','90deg','135deg','180deg','225deg','270deg','315deg','360deg','405deg','450deg','495deg','540deg','585deg','630deg','675deg','720deg']
                        })
                      }]}]}>
                </Animated.Image>
                <TouchableOpacity onPress={()=>{this.rotateImg()}} style={styles.centerPoint}>
                    <Image source={require('../img/point.png')} style={styles.imgPoint}/>
                </TouchableOpacity>

            </View>
        );
    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
    },
    imgPoint:{
        width:100,
        height:100,
    },
    centerPoint:{
        position:'absolute',
        left:Dimensions.get('window').width/2-50,
        top:150,
    },
    mainImg:{
        width:Dimensions.get('window').width,
        height:400,
        alignItems:'center',
        justifyContent:'center',
        resizeMode:'contain',
        position:'relative'
    }
});

运行效果：

animall.gif