React 移动端翻牌抽奖

原创
2017/09/22 19:00
阅读数 726

抽奖活动的主要流程。(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 ,联系我哦。

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部