react-native抽奖转盘制作

一

二
一的代码

import React, { Component } from 'react'
import { View, TouchableWithoutFeedback, Animated, Easing } from 'react-native'
import styled from 'styled-components'
import { pxw, pxh } from '../px'
import { Overlay } from 'react-native-elements'export default class Turntable2 extends Component {state = {index: 0,span: 50,visible: false,rotate: new Animated.Value(0),inputRange: 1}render() {const { index, visible, rotate, inputRange } = this.statereturn (<Container><Center style={{ elevation: 5 }}><Card><InnerCard bgc={index === 5 ? '#000' : '#faa'}><Text bottom='45px' right='30px'>5</Text></InnerCard><InnerCard bgc={index === 6 ? '#000' : '#faa'} rotate='-40deg' lateX={pxw(8) + 'px'}><Text rotate='45deg' bottom='100px' right='50px'>6</Text></InnerCard></Card><Card><InnerCard bgc={index === 7 ? '#000' : '#faa'}><Text bottom='83px' right='40px'>7</Text></InnerCard><InnerCard bgc={index === 8 ? '#000' : '#faa'} rotate='40deg' lateX={pxw(9) + 'px'}><Text rotate='-45deg' bottom='30px' right='60px'>8</Text></InnerCard></Card><Card><InnerCard bgc={index === 4 ? '#000' : '#faa'}><Text bottom='90px' right='30px'>4</Text></InnerCard><InnerCard bgc={index === 3 ? '#000' : '#faa'} rotate='40deg' lateX={pxw(9) + 'px'}><Text rotate='-45deg' bottom='40px' right='55px'>3</Text></InnerCard></Card><Card><InnerCard bgc={index === 2 ? '#000' : '#faa'}><Text bottom='57px' right='30px'>2</Text></InnerCard><InnerCard bgc={index === 1 ? '#000' : '#faa'} rotate='-40deg' lateX={pxw(8) + 'px'}><Text rotate='45deg' bottom='110px' right='50px'>1</Text></InnerCard></Card><TouchableWithoutFeedback onPress={this.begin}><ClickRound><Text size='25px' position='relative'>CLICK</Text><AnimatedZhenContainer style={{transform: [{rotate: rotate.interpolate({inputRange: [0, 1, 2, 3, 4, 5, 6, 7,8,16],outputRange: ['0deg', '45deg', '90deg', '135deg', '180deg', '225deg', '270deg', '315deg','360deg', '720deg']})}]}}><Zhen bgc='transparent' /><Zhen /></AnimatedZhenContainer></ClickRound></TouchableWithoutFeedback></Center><OverlayonBackdropPress={() => {this.setState({ visible: !this.state.visible, index: 0 })}}backdropStyle={{ backgroundColor: 'transparent' }}overlayStyle={{ backgroundColor: 'rgba(0,0,0,0.6)', elevation: 0, width: pxw(90), height: pxw(50), justifyContent: 'center' }}isVisible={visible}><View><Text size='50px' position='relative'>恭喜</Text><Text size='50px' position='relative'>{index}号奖励</Text></View></Overlay></Container>)}begin = () => {const resultNum = Math.floor(1 + Math.random() * 8) - 0.3;Animated.timing(this.state.rotate,{toValue: 16,duration: 5000,easing: Easing.back(),useNativeDriver: false}).start(() => {Animated.timing(this.state.rotate,{toValue: 0,duration: 0,easing: Easing.linear(),useNativeDriver: false}).start()Animated.timing(this.state.rotate,{toValue: resultNum,duration: 3000,easing: Easing.linear(),useNativeDriver: false}).start(() => {this.setState({index: Math.floor(resultNum) + 1})setTimeout(()=>{this.setState({visible: true})},700)})})}
}
const ZhenContainer = styled.View`width: ${pxw(60)}px;height: 4px;flex-direction: row;position: absolute;/* transform: rotate(30deg) */
`
const AnimatedZhenContainer = Animated.createAnimatedComponent(ZhenContainer)
const Zhen = styled.View`flex: 1;background-color: ${props => props.bgc || '#9f9'};
`
const Text = styled.Text`font-weight: bold;font-size: ${props => props.size || '30px'};color: ${props => props.color || '#fff'};text-align: center;position: ${props => props.position || 'absolute'};bottom: ${props => props.bottom || '0px'};right: ${props => props.right || '0px'};transform: rotate(${props => props.rotate || '0deg'});
`const ClickRound = styled.View`position: absolute;background-color: #000;width: ${pxw(30)}px;height: ${pxw(30)}px;border-radius: ${pxw(30)}px;top: ${pxw(30)}px;left: ${pxw(30)}px;justify-content: center;align-items: center
`const Card = styled.View`width: 50%;height: 50%;background-color: ${props => props.bgc || '#faa'};flex-direction: row;overflow: hidden;
`
const InnerCard = styled(Card)`width: auto;height: auto;flex: 1;transform: rotate(${props => props.rotate || '0deg'}) translateX(${props => props.lateX || '0px'}) scale(2)
`const Center = styled.View`background-color: #fff;width: ${pxw(90)}px;height: ${pxw(90)}px;flex-direction: row;flex-wrap: wrap;border-radius: ${pxw(90)}px;overflow: hidden
`const Container = styled.View`justify-content: center;align-items: center;min-height: 100%;background-color: #fffae5
`

二，代码

import React, { Component } from 'react'
import { View, TouchableWithoutFeedback, Modal } from 'react-native'
import styled from 'styled-components'
import { pxw, pxh } from '../px'
import {Overlay } from 'react-native-elements'export default class Turntable extends Component {state = {index: 0,span: 50,visible: false}render () {const { index, visible } = this.statereturn (<Container><Center style={{ elevation: 5 }}><Card><InnerCard bgc={index === 1 ? '#000' : '#faa'}><Text bottom='45px' right='30px'>1</Text></InnerCard><InnerCard bgc={index === 2 ? '#000' : '#00f'} rotate='-40deg' lateX={pxw(8) + 'px'}><Text rotate='45deg' bottom='100px' right='50px'>2</Text></InnerCard></Card><Card><InnerCard bgc={index === 3 ? '#000' : '#f00'}><Text bottom='83px' right='40px'>3</Text></InnerCard><InnerCard bgc={index === 4 ? '#000' : '#0ff'} rotate='40deg' lateX={pxw(9) + 'px'}><Text rotate='-45deg' bottom='30px' right='60px'>4</Text></InnerCard></Card><Card><InnerCard bgc={index === 8 ? '#000' : '#0fa'}><Text bottom='90px' right='30px'>8</Text></InnerCard><InnerCard bgc={index === 7 ? '#000' : '#a5f'} rotate='40deg' lateX={pxw(9) + 'px'}><Text rotate='-45deg' bottom='40px' right='55px'>7</Text></InnerCard></Card><Card><InnerCard bgc={index === 6 ? '#000' : '#971'}><Text bottom='57px' right='30px'>6</Text></InnerCard><InnerCard bgc={index === 5 ? '#000' : '#f0f'} rotate='-40deg' lateX={pxw(8) + 'px'}><Text rotate='45deg' bottom='110px' right='50px'>5</Text></InnerCard></Card><TouchableWithoutFeedback onPress={this.begin}><ClickRound><Text position='relative'>CLICK</Text></ClickRound></TouchableWithoutFeedback></Center><OverlayonBackdropPress={()=>this.setState({visible: !this.state.visible})}backdropStyle={{ backgroundColor: 'transparent' }}overlayStyle={{ backgroundColor: 'rgba(0,0,0,0.6)', elevation: 0,width: pxw(90),height: pxw(50),justifyContent: 'center' }}isVisible={visible}><View><Text size='50px' position='relative'>恭喜</Text><Text size='50px' position='relative'>{index}号奖励</Text></View></Overlay></Container>)}begin = () => {const resultNum = parseInt(30 + Math.random() * 10);let temp = 0;let that = this;let time;setTimeout(function innerFn () {that.setState({index: that.state.index >7 ? 1 : that.state.index + 1 })temp++time = setTimeout(innerFn,that.state.span)if(temp === resultNum) {clearTimeout(time)time = nullthat.setState({span: 100},()=>{setTimeout(()=>{that.setState({visible: true})},1000)})}if(resultNum - temp < 10){that.addSpan()}},that.state.span)}addSpan = () => {this.setState({span: this.state.span + 100})}
}const Text = styled.Text`font-weight: bold;font-size: ${props => props.size || '30px'};color: ${props => props.color || '#fff'};text-align: center;position: ${props => props.position || 'absolute'};bottom: ${props => props.bottom || '0px'};right: ${props => props.right || '0px'};transform: rotate(${props => props.rotate || '0deg'});
`const ClickRound = styled.View`position: absolute;background-color: #000;width: ${pxw(30)}px;height: ${pxw(30)}px;border-radius: ${pxw(30)}px;top: ${pxw(30)}px;left: ${pxw(30)}px;justify-content: center
`const Card = styled.View`width: 50%;height: 50%;background-color: ${props => props.bgc || '#faa'};flex-direction: row;overflow: hidden;
`
const InnerCard = styled(Card)`width: auto;height: auto;flex: 1;transform: rotate(${props => props.rotate || '0deg'}) translateX(${props => props.lateX || '0px'}) scale(2)
`const Center = styled.View`background-color: #fff;width: ${pxw(90)}px;height: ${pxw(90)}px;flex-direction: row;flex-wrap: wrap;border-radius: ${pxw(90)}px;overflow: hidden
`const Container = styled.View`justify-content: center;align-items: center;min-height: 100%;background-color: #fffae5
`

来找我玩啊

react-native抽奖转盘制作相关推荐

Unity抽奖转盘制作代码
话不多说,直接上代码具体代码使用,可观看视频附视频链接如果您觉得有用,记得点赞收藏哦! using UnityEngine; using UnityEngine.UI;/// <summar ...
React canvas 抽奖转盘
文章目录地址实现代码仓库代码片段添加选项 canvas绘制转盘确定旋转角度最后地址实现思路颜色对应选项从选项列表中随机选中一个根据索引生成相应的选装角度在完成动画后弹出蒙版 ...
Web前端：什么是 React Native?
React Native 是一种 JavaScript 框架,可让开发人员构建强大且响应迅速的交互式应用程序.技术驱动型企业现在选择使用React -Native框架来构建超越现代移动应用程序. ...
2021年，Flutter 与 React Native该如何选择？
????????关注后回复 "进群" ,拉你进程序员交流群???????? 作者 | Wasim Charoliya 译者 | 王强策划 | 田晓旭 2021 年,跨平台程序员之 ...
Flutter 与 React Native 该如何选择
跨平台程序员之间关于 React Native 和 Flutter 的旷日持久的争论越来越白热化了.前几年,React Native 还是开发人员的首选框架,但是自 2017 年 Flutter 发布 ...
android自定义抽奖,Android自定义view制作抽奖转盘
本文实例为大家分享了Android自定义view制作抽奖转盘的具体代码,供大家参考,具体内容如下效果图 TurntableActivity package com.bawei.myapplicati ...
【REACT NATIVE 系列教程之十三】利用LISTVIEW与TEXTINPUT制作聊天/对话框获取组件实例常用的两种方式...
本站文章均为李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/react-native/2346.html ...
html让图片自动旋转360,html5 canvas 360图片旋转制作抽奖转盘代码
特效描述:html5canvas 360图片旋转抽奖转盘代码.60图片旋转制作抽奖转盘代码代码结构 1. HTML代码 var colors = ["#B8D430", &qu ...
【JavaScript】制作一个抽奖转盘页面
开发H5项目,有时会遇到一个需求,需要制作抽奖转盘的网页,这个实现步骤,如果拿现成的改来做是容易的,但是想着全靠自己做是不容易的,下面会讲,全靠自己做,能掌握到吗目录一览 1.设计网页 2. 编写脚 ...

react-native抽奖转盘制作

react-native抽奖转盘制作相关推荐

最新文章

热门文章