React 移动端翻牌抽奖

抽奖活动的主要流程。（ps：移动端哦）

1、前端控制翻牌效果。

2、服务端控制主要参数。

3、MySql存储信息。

 

在这里我只介绍步骤1了，也就是前端部分。如果童鞋们的公司分工明确的话，你们用到步骤1的部分就ok 了。

                                        

                                              

    首先呢，我强调一下，我做这个效果使用的框架是 react 框架。要想做到卡牌翻牌效果，首先你需要有两张图片，我们先说一下在用户未中奖的状态。一张翻牌的图片，一张未中奖的图片。前端代码：

 

  constructor (props) {

    super(props)

    this.state = {

      count: window.CONFIG.count,

      haveGift: '',

      back: false

    }

    this.choice = this.choice.bind(this)

  }

 

这是我们的 constructor 部分。

 

choice () {

     this.setState({back：true})

}

 

这是我们绑定的抽奖事件。

 

count 代表抽奖的次数，这个 count 是我在服务端设置的并且挂在到了 window.CONFIG上，所以我们前端部分直接在 window.CONFIG上获取就行了。在服务端我设置了每人一次的抽奖机会。所以凡是打开该页面的人，都会拥有一次抽奖的机会。

haveGift 代表获得礼物。服务端返回来的是一个值，前端把这个值对应上各自的礼物就行了。

back 代表翻牌的效果值，初始给他一个 false 代表他为翻转，如果为 true 则为翻转之后的效果，我们通过绑定一个 click 事件来改变back 的值，从而实现牌子的翻转效果。

 

<div className = ’show'>

    <div className = {this.state.back ? 'flipped' : '' } onClick={this.choice}>

        <div className='front'>

                        <img src={require(`../img/raffle-win.png`)}/>

                 </div>

        <div className='front'>

                        <img src={require(`../img/raffle-lose.png`)}/>

                 </div>

    </div>

</div>

 

 

类名为 .show 的 div 将会用于制作3D空间， .filpped 的 div 作为3D对象的包装器，它里面有两个单独的 div 元素时卡片的正反两面。第二个 div 的类名使用了三元判断，相当于 if..else..语句。通过判断 this.state.back 的真假来调用不同的类名，当然 flipped 这个类就是会让卡牌翻转的类名。下面会有相应的 css 代码哦。

 

（如果你不想放入图片，你也可以在 div 里面输入文字来进行抽奖效果。按照抽奖的通常效果来说，如果中奖的话，会有提示，输入手机号之类的，从而进而领奖。当然你也可以在类名为 back 的 div 中添加 <input> 输入框。自己脑洞打开，随你喽。）

 

下面我们为它们添加样式，首先给 3D 空间元素 .show 一个 相对定位方式

 

.show{

  position: relative;

};

 

在我对网上的一些相关调查来看， 有的博文上说需要添加 perspective  属性，给他一个3D空间的大小，但是不知道为什么在我使用 React 框架中添加了这个属性之后反而不好使了。这确实是一个坑啊。如果其他童鞋用到的，你们可以尝试一下。看看行不行。 记得 perspective 要有兼容性的。

 

接下来我们用 css3 transition 来添加一些过度效果：

 

.flipped{

  width: 100%;

  height: 100%;

  position: absolute;

  transform-style: preserve-3d;

  transition: transform 1s;

  transform: rotateY( 180deg );

}

 

transform 这三个属性，不懂得童鞋自行搜索喽。

 

.front{

  height: 2.2rem;

  display: block;

  position: absolute;

  width: 100%;

  backface-visibility: hidden;

};

 

这个是翻牌那一层 div 

 

.back{

  height: 2.2rem;

  width: 100%;

  display: block;

  position: absolute;

  backface-visibility: hidden;

  transform: rotateY( 180deg );

};

 

这是牌子下一层 div。

 

在 HTML 代码中特意设置了两个 div ，想一想哈，如果想通过一个div 实现翻转效果这个当然是很简单的啦，更换图片就行了。那我们中奖的效果呢？礼物有好多呢？总不能让 UI 给你做 N 张 多态图吧。显然是不可能的，所以就需要我们在服务端传入多种礼物值，然后在前端进行转换，在 div 中显示。这是其一。其二呢，目前大部分的抽奖翻牌效果都是，中奖后会出现一个弹框，让你输入领奖手机号之类的。如果再搞一个弹框，多麻烦。如果按照我这种设计方法呢，就不用加入弹框了。我们只需要在 .back 的 div 中添加一个 input 输入框就行了。提交时我们仍然绑定上事件，把输入的值连接到 URL 上传给服务端。再通过服务端使用 SQL 语句将输入的值保存到数据库中。

好啦，到此我们前端的一个 react 框架抽奖效果就结束啦。如有疑问可以加我 qq ，联系我哦。

转载于:https://my.oschina.net/Osen/blog/1542036