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