一、业务背景:
最近接了一个“扎水球”的小程序项目,用户使用“金针”扎破水球,可以扎到奖励,或者扎到炸弹,其实也可以看作是一次抽奖,扎破水球后,显示对应的奖励。关于页面样式及扎水球后的结果,UI同学给了下面两张图:
经过我的一番“添油加醋”后,做出的效果是下面这样的,感谢UI同学,给了我自由发挥的空间,让我又提起“笔”,写了这篇博客。
css3 抽奖实现炸弹爆炸效果 卡片翻转效果 雪花效果
二、卡片翻转效果
抽完奖后,直接把奖励显示出来,这样做效果太一般,而且也没有悬念(好歹我们也是个游戏公司,得对得起这个行业)。在这里,我能想到最简单的效果就是卡片翻转了。来个对比吧,看完后,是不是瞬间就觉得卡片翻转的效果要好很多。
这里用到的几个知识点:
transform: rotateY(180deg),将图片进行水平翻转。animation-fill-mode: forwards,当动画结束后,停留在最后一帧。backface-visibility: hidden,用来设置当元素背面向屏幕时是否可见。
页面结构代码:
<view class="img_box"><image class="zhengImg rotateAmview" src="./assets/blue.png" /><view class="fanImg rotateAmview"><image class="img" src="./assets/icon_bomb@2x.png" /><text class="num">x1</text></view></view>
css样式代码:
.img_box {width: 77rpx;height: 77rpx;position: relative;}.zhengImg {width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: 1;backface-visibility: hidden;}.fanImg {width: 100%;height: 100%;position: absolute;top: 0;left: 0;//因为这里用的是Png图,正反面在一起没有重叠的部分就会露出来,所以加了透明度为0opacity: 0;}.img {width:100%;height: 100%;transform: rotateY(180deg);}.num {position: absolute;left: 5rpx;bottom: 5rpx;color: #fff;font-size: 19rpx;transform: rotateY(180deg);}.rotateAmview {animation: rotateAm 0.5s linear;animation-fill-mode: forwards;}@keyframes rotateAm {0% {transform: rotateY(0deg);}100% {transform: rotateY(180deg);opacity: 1;}}
三、礼花效果(雪花效果)
记得刚开始工作的时候,最经典的一道题就是用js面向对象写雪花效果。用一张最小单元的雪花的图片,随机大小、随机位置、随机速度,飘满了屏幕,此刻回想起来也是很开心的。现在我们可以用一张png图片来搞定这个效果。
这里用到的就是下面这张图,其原理就是把这张透明图当成背景,不断改变它的background-position,然后通过animation设置无限循环(如果换成雪花的图片,就可以实现下雪的效果)。
注意:如果是PC端的项目,记得兼容各个浏览器,-webkit- 等前缀要用起来。
页面结构代码:
<view class="popup_wrap"><view class="popup_title">恭喜获得</view><!--省略其它内容--><!--礼花图片 小程序的背景图不能使用本地资源,这里只是做个展示--><view class="snow-animation" style='background-image: url("./assets/snow.png");'></view></view>
css代码:
.popup_wrap{width:300rpx;height:300rpx;position: relative;}.snow-animation {position: absolute;left: 0;top: 0;right: 0;bottom: 0;animation: snow 3s linear infinite;pointer-events: none; //设置击穿,此盒子下面的任何点击划过等交互事件,可以正常显示}@keyframes snow {0% {background-position: 0px 0px;}100% {background-position: 100px 1000px;}}
四、爆炸效果
讲完了抽奖和抽到奖品,接下来该是抽到炸弹了。炸弹的出现,我想的是让它从页面的中间,从小到大(用到scale)显示出来后,再左右抖动(用到rotate)两下。写的过程中,不停地修改值尝试效果, 发现如果把 scale 的值设置一定大,再把透明度设成0,这不就是“炸开”的效果了,就像下面这样。
写完上面的效果,该去做核酸了。在楼下排队做核酸的时候,我一直在想,爆炸的效果已经有了,可是感觉这个爆炸效果太过于苍白无力,怎样能让效果更震憾呢,我想到了可以给屏幕加“闪白”的效果,后来觉得还不够,又给页面加了“抖动”的效果,这样跟上面对比是不是好多了。(其实也想说,工作的时候,不要一直埋头苦干,偶尔站起来走走,离开那个固定的思维圈,换个角度去想,也许就会有更好的想法。)
4.1 炸弹效果
使用 scale 和 rotate 结合,就可以实现炸弹在爆炸前的晃动,结构代码:
<image class="img" src="./assets/icon_bomb@2x.png" />
css样式代码:
.img {width: 200rpx;height: 200rpx;animation: bomb 3s both;}@keyframes bomb {0% {transform: scale(0, 0);}60% {transform: scale(1, 1) rotate(-3deg);opacity: 1;}70%,73% {transform: scale(0.9) rotate(3deg);}77%,83%,90%,97% {transform: scale(1.1) rotate(-3deg);}80%,87%,93% {transform: scale(1.3) rotate(3deg);opacity: 1;}100% {transform: scale(10) rotate(0);opacity: 0;}}
4.2 页面的抖动和白屏
页面的抖动是控制最外层的元素小幅度旋转,白屏效果是控制遮罩层的背景色从黑到白再到黑,实际在写的时候,还要考虑卡片翻转的时间、炸弹炸开的时间、页面什么时候开始抖动,各种动效怎样衔接。
//页面抖动.tremble {animation: trembleAni 1s linear 3s;}@keyframes trembleAni {0% {transform: rotate(0);}10%,30%,50%,70%,90% {transform: rotate(1deg);}20%,40%,60%,80% {transform: rotate(-1deg);}100% {transform: rotate(0);}}// 页面白屏.bomb_mask {width: 100vw;height: 100vh;background-color: rgba(0, 0, 0, 0.7);position: fixed;left: 0;top: 0;z-index: 2;animation: maskChange 1s linear 3s;}@keyframes maskChange {0% {background-color: rgba(0, 0, 0, 0.7);}30% {background-color: rgba(255, 255, 255, 0.85);}100% {background-color: rgba(0, 0, 0, 0.7);}}
五、结束
做这个需求的时候感觉像是打了鸡血,特别亢奋。一方面在想该做成什么效果,一方面在想怎样去实现这个效果。基本上自己想到的都实现了,有小小的成就感。
写博客的时候,又去看了一遍需求文档,好吧,文档里写的是“用户使用金针扎水球,水球炸开之后,展示对应奖励。”额…,我这个卡片翻转好像不太符合“炸开”的效果,不过炸弹都能炸开了,水球还炸不开么,哈哈哈,感兴趣的小伙伴自己改改吧~