Taro Reacti native 实现九宫格抽奖

Taro React native 实现九宫格抽

先上效果图

说明

因为这是中间按钮点击抽奖，所以实际奖品只有8个。

详细注释都在代码中写了注释

state = {
//这是奖品，只有8个，图是我在网上找的
 LotteryData:
  [
		   {
		   url:"https://m.renrendai.com/cms/59bb80994eac411e88fe8a9b/app/zhuanpanchoujiang/APP1031JFZP-score_10.png",
		   name: "10积分",
		   indexKey : 0
		  },
		  {
		    url: "https://m.renrendai.com/cms/59bb80994eac411e88fe8a9b/app/zhuanpanchoujiang/APP1031JFZP-666.png",
		    name: "666元现金",
		    indexKey : 1
		  },
		  {
		    url: "https://m.renrendai.com/cms/59bb80994eac411e88fe8a9b/app/renrenzuan/lottery/money_88.png",
		    name: "88元现金",
		    indexKey : 2
		  },
		  {
		    url: "https://m.renrendai.com/cms/59bb80994eac411e88fe8a9b/app/zhuanpanchoujiang/APP1031JFZP-money_10.png",
		    name: "10元优惠券",
		    indexKey : 3
		  },
		  {
		    url: "https://m.renrendai.com/cms/59bb80994eac411e88fe8a9b/app/zhuanpanchoujiang/APP1031JFZP-thanks.png",
		    name: "谢谢参与",
		    indexKey : 4
		  },
		  {
		    url: "https://m.renrendai.com/cms/59bb80994eac411e88fe8a9b/app/zhuanpanchoujiang/APP1031JFZP-score_100.png",
		    name: "100积分",
		    indexKey : 5
		  },
		  {
		    url: "https://m.renrendai.com/cms/59bb80994eac411e88fe8a9b/app/renrenzuan/lottery/money_168.png",
		    name: "168优惠券",
		    indexKey : 6
		  },
		  {
		    url: "https://m.renrendai.com/cms/59bb80994eac411e88fe8a9b/app/zhuanpanchoujiang/APP1031JFZP-score_50.png",
		    name: "50积分",
		    indexKey : 7
		  },
      ],
      // 被选中的格子的ID
      activedId: '',
      // 中奖ID
      prizeId: null,
      // 获得prizeId之后计算出的动画次数
      times: 0,
      // 当前动画次数
      actTimes: 0,
      // 是否正在抽奖
      isRolling: false
      
	handleBegin() {
	    // this.state.isRolling为false的时候才能开始抽,不然会重复，报错。
	    if (!this.state.isRolling) {
	      // 点击抽奖之后，可以将于九宫格有关的状态都还原默认。然后
	      this.setState({
	        activedId: '',
	        prizeId: null,
	        times: 0,
	        actTimes: 0,
	        isRolling: true
	      }, () => {
	        // 状态还原再开始真正的抽奖
	        this.handlePlay()
	      })
	    }
	  }
	 handlePlay() {
	 	//此处可以调用后台。一般抽奖都是后台返回前端
	   // 中将indexKey ，可随机，可自己设定，我这里暂且定为5
	   let prize = 5
	   this.setState({
	     prizeId: prize,
	     activedId: 0
	   })
	   // 随机算出一个动画执行的最小次数，这里可以随机变更数值，按自己的需求来
	   let times = 20
	   this.setState({
	     times: times
	   })
	   // 抽奖正式开始
	   this.begin = setInterval(() => {
	     let num;
	     if (this.state.activedId === this.state.prizeId && this.state.actTimes > this.state.times) {
	       // 符合上述所有条件时才是中奖的时候，两个ID相同并且动画执行的次数大于(或等于也行)设定的最小次数
	       clearInterval(this.begin)
	       //将抽奖状态转为false。
	       this.setState({
	         isRolling: false
	       })
	       //这里可以加一些modol等一些东西。转盘结束，告诉用户此次抽奖中否
	       return
	     }
	     // 以下是动画执行时对id的判断，每40秒执行一次
	     if (this.state.activedId === '') {
	     //从0开始转动
	       num = 0
	       this.setState({
	         activedId: num
	       })
	     } else {
	       num = this.state.activedId
	      //从0开始转动，转到到7的时候，也就意味是最后一个，将num置为0.重新开始转
	       if (num === 7) {
	         num = 0
	         this.setState({
	           activedId: num
	         })
	       } else {
	         num = num + 1
	         this.setState({
	           activedId: num
	         })
	       }
	     }
	     this.setState({
	       actTimes: this.state.actTimes + 1
	     })
	   }, 40)
	 }
render() {
    const { LotteryData,activedId  } = this.state;
    return (
		 {LotteryData&&LotteryData.length>  0 &&
		 	 <View className='lottery_box'>
		        <View className='lottery_box_s'>
		        // 当选中的id和indexKey相等时给加上active
		            <View className={activedId === LotteryData[0].indexKey ? 'lottery_box_view lottery_box_view_active' : 'lottery_box_view'} id={`lottery_box_view_${LotteryData[0].indexKey}`} >
		              <Image className='lottery_box_view_img' src={LotteryData[0].prizeImageUrl} />
		            </View>
		            <View className={activedId === LotteryData[1].indexKey ? 'lottery_box_view lottery_box_view_active' : 'lottery_box_view'} id={`lottery_box_view_${LotteryData[1].indexKey}`}>
		              <Image className='lottery_box_view_img' src={LotteryData[1].prizeImageUrl} />
		            </View>
		            <View className={activedId === LotteryData[2].indexKey ? 'lottery_box_view lottery_box_view_active' : 'lottery_box_view'} id={`lottery_box_view_${LotteryData[2].indexKey}`}>
		              <Image className='lottery_box_view_img' src={LotteryData[2].prizeImageUrl} />
		            </View>
		          </View>
		          <View className='lottery_box_s'>
		            <View className={activedId === LotteryData[7].indexKey ? 'lottery_box_view lottery_box_view_active' : 'lottery_box_view'} id={`lottery_box_view_${LotteryData[7].indexKey}`}>
		              <Image className='lottery_box_view_img' src={LotteryData[7].prizeImageUrl} />
		            </View>
		            <View className='lottery_box_view'  onClick={this.handleBegin.bind()}>
		              <Image className='lottery_box_view_img' src={choujiang} />
		            </View>
		            <View className={activedId === LotteryData[3].indexKey ? 'lottery_box_view lottery_box_view_active' : 'lottery_box_view'} id={`lottery_box_view_${LotteryData[3].indexKey}`}>
		              <Image className='lottery_box_view_img' src={LotteryData[3].prizeImageUrl} />
		            </View>
		          </View>
		          <View className='lottery_box_s'>
		            <View className={activedId === LotteryData[6].indexKey ? 'lottery_box_view lottery_box_view_active' : 'lottery_box_view'} id={`lottery_box_view_${LotteryData[6].indexKey}`}>
		              <Image className='lottery_box_view_img' src={LotteryData[6].prizeImageUrl} />
		            </View>
		            <View className={activedId === LotteryData[5].indexKey ? 'lottery_box_view lottery_box_view_active' : 'lottery_box_view'} id={`lottery_box_view_${LotteryData[5].indexKey}`}>
		              <Image className='lottery_box_view_img' src={LotteryData[5].prizeImageUrl} />
		            </View>
		            <View className={activedId === LotteryData[4].indexKey ? 'lottery_box_view lottery_box_view_active' : 'lottery_box_view'} id={`lottery_box_view_${LotteryData[4].indexKey}`}>
		              <Image className='lottery_box_view_img' src={LotteryData[4].prizeImageUrl} />
		            </View>
		          </View>
		      	</View>
		      }
		    )
  }

我的CSS如下，css也可以自己随意发挥。

.lottery_box{
  margin-top: 20px;
  padding: 20px;
  border-color: #fff;
  border-style: solid;
  border-width: 2px;
  border-radius: 16px;

}

.lottery_box_view{
  width: 33.3%;
  padding: 4px;
  border-radius:16px ;

}
.lottery_box_view_img{
  width: 100%;
  height: 160px;
  border-radius:16px ;
}

.lottery_box_view_active{
  background-color: black;
  opacity: .8;
}
.lotterys{
  background: #fff001;
  width: 100%;
  height: 420px;
  min-height: 420px;
  border-bottom-left-radius: 80px;
  border-bottom-right-radius: 80px;
}

这只是简易的效果。如果有兴趣的话可以
可以研究一下转盘运动刚开始加速，慢慢匀速，到最后减速并且停止的过程。
或者可以去看react-native-supper-lottery开源组件完成了布局和动画等核心功能，之后的封装组件提供start、stop等抽奖函数就很简单了，这里不再详述，详细代码可以参考组件react-native-supper-lottery，也可以直接使用。