啊啊.gif

index.js

import React from 'react';
import Render from './render'
import PropTypes from 'prop-types';
import {
  Animated,
  Easing
} from 'react-native';

export default class WithDarw extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
          drawData:[
            { id: 0, title: "谢谢惠顾", icon: require('../../../images/life/icon_active.png') },
            { id: 1, title: "+1金币", icon: require('../../../images/life/icon_active.png') },
            { id: 2, title: "+2金币", icon: require('../../../images/life/icon_active.png') },
            { id: 3, title: "+5金币", icon: require('../../../images/life/icon_active.png') },
            { id: 4, title: "谢谢惠顾", icon: require('../../../images/life/icon_active.png') },
            { id: 5, title: "+10金币", icon: require('../../../images/life/icon_active.png') },
            { id: 6, title: "+100金币", icon: require('../../../images/life/icon_active.png') },
            { id: 7, title: "8折优惠卡", icon: require('../../../images/life/icon_active.png') }
          ],
          rotateDeg: new Animated.Value(0),
          drawIndex:0,
          rotateIndex:0
        }
    }

    componentDidMount(){
      // this.rotateImg1()
    }

    rotateImg1 = () => {
      
      let random = Math.round(Math.random() * 5);
      random = random < 3 ? 3 : random; // 最少加上3整圈
      this.setState({
        drawIndex: 3, // 设置抽奖结果的id
        rotateIndex: this.state.rotateIndex + random // 多滚动几个整圈
      }, () => {
        let needRotate = this.state.drawIndex / this.state.drawData.length
        console.log('算出需要滚动的角度',needRotate * 360);

        // + this.state.rotateIndex 1 = 360度，多加几个整圈
        //  + 0.06 修正滚动结束后的角度
        let endRotate = needRotate + this.state.rotateIndex + 0.06
        console.log('enddddddd',endRotate);
        console.log('滚动的角度',endRotate * 1800 / 5);  // inputRange outputRange 设置的为 0-5 0-1800
        console.log('实际滚动的角度',endRotate * 1800 / 5 % 360); // 不加上0.06 此值和 needRotate 一样

        Animated.timing(this.state.rotateDeg, {
          toValue: endRotate,
          duration: 3000 + (random * 200),
          easing: Easing.out(Easing.quad),
          useNativeDriver: true
        }).start(() => {
         console.log('滚动动画结束，开始显示弹框');
        });
      })
    };

    render() {
        return Render.render.call(this);
    }
}

render.js

import React from 'react';

import {
    View,
    Modal,
    Animated,
    Image,
    Text,
    StatusBar,
    TextInput,
    Dimensions,
    ImageBackground
} from 'react-native';
import styles from './styles'
import I18n from '../../../common/language/I18n'
import AntiRepeatButton from '../../../common/AntiRepeatButton'
import * as c from '../../../common/ScreenUtil'
import ScrollVertical from '../../../component/ScrollVertical'
import ImageLife from '../../../images/life/ImageLife'

export default {
    render() {
      return (
        <Modal visible={this.props.visible} transparent={true} >
          <View style={styles.btn}/>
          <View style={styles.mainView}>
          <Animated.View style={[styles.mainImg, {
            transform: [{
              rotate: this.state.rotateDeg.interpolate({
                inputRange: [0, 5],
                outputRange: ['0deg', '1800deg']
              })
            }]
          }]}>
           <Image style={styles.bgImage} source={require('../../../images/life/icon_active.png')} />
            <View style={styles.animalView}>
            {this.state.drawData.map((one, index) => {
              const rotateDeg = 180 / this.state.drawData.length; // 180 / this.state.drawData.length 需要根据奖励个数进行调整
              let translateX = 0;
              let translateY = 0;
              const rotateTemp = -rotateDeg - (index * 360 / this.state.drawData.length);
              const sinTemp = c.toFixed2(Math.sin(rotateDeg * Math.PI / 180) * 100); // 100 为底部距离中心点大小的基数，数越大，距离中心点越远
              const consTemp = c.toFixed2(Math.cos(rotateDeg * Math.PI / 180) * 100);
              /**
               *  translateX = -sinTemp;
                  translateY = -consTemp;
                  奖品个数不同，值需要根据个数进行调整
               */
              switch (index) {
                case 0:
                  translateX = -sinTemp;
                  translateY = -consTemp;
                  break;
                case 1:
                  translateX = -consTemp;
                  translateY = -sinTemp;
                  break;
                case 2:
                  translateX = -consTemp;
                  translateY = sinTemp;
                  break;
                case 3:
                  translateX = -sinTemp;
                  translateY = consTemp;
                  break;
                case 4:
                  translateX = sinTemp;
                  translateY = consTemp;
                  break;
                case 5:
                  translateX = consTemp;
                  translateY = sinTemp;
                  break;
                case 6:
                  translateX = consTemp;
                  translateY = -sinTemp;
                  break;
                case 7:
                  translateX = sinTemp;
                  translateY = -consTemp;
                  break;
                default:
                  break
              }
              return (
                <View key={index} style={[styles.subView,{
                  transform: [
                    { translateX: translateX },
                    { translateY: translateY },
                    { rotateZ: `${rotateTemp}deg` }
                  ]},{
                    backgroundColor:`rgb(${Math.ceil(Math.random() * 255)},${Math.ceil(Math.random() * 255)},${Math.ceil(Math.random() * 255)})`,
                  }]}>
                  <Image style={{ width: 50, height: 50, resizeMode: "contain", backgroundColor:'red'}}  />
                <Text style={{ fontSize: 24, color: "#fff", marginBottom: 10 }}>{index}</Text>
                </View>
              )
            })}
          </View >
          </Animated.View>
          <AntiRepeatButton style={{backgroundColor:'red',marginTop:20}} onPress={this.rotateImg1}>
            <Text style={{fontSize:20,color:'#fff'}}>点击抽奖</Text>
          </AntiRepeatButton>
          </View>
        </Modal>
      )
    }
}

styles.js

import React from 'react';
import {
    Dimensions,
    StyleSheet,
} from 'react-native';
import {screenH, screenW} from '../../../common/ScreenUtil'
import * as c from '../../../common/ScreenUtil'
import {Colour, Fsize, Gap} from "../../../common/assets/Assets";
import px2dp from "../../../utils/Ratio";

let viewWidth = screenW - px2dp(60) * 2
export default StyleSheet.create({
  btn:{
    height: screenH,
    backgroundColor: Colour.color_black_5,
    position:'absolute',
    width: screenW,
  },
  mainImg: {
    width: viewWidth,
    height: viewWidth,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor:'blue',
  },
  mainView:{
    flex:1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  bgImage:{
    position: "absolute",
    height: 360,
    width: 360,
    resizeMode: 'stretch'
  },
  animalView:{
    height: 360,
    width: 360,
    alignItems: "center"
  },
  subView:{
    justifyContent: "center",
    alignItems: "center",
    position: "absolute",
    zIndex: 99,
    height: 100,
    width: 60,
    top: 130,
  }
})