当前位置：网站首页>h5实现一个刮刮卡的动画效果

h5实现一个刮刮卡的动画效果

2022-07-19 09:38:00 【InfoQ】

前言

又到了每天更文的时刻了，有句话怎么说来说，只要你每天坚持学习，最终胜利属于一定是 —— 在考场上发挥好的人~ 哈哈哈，这么说来，只要我每天坚持更文，最后的大奖一定属于 —— 抽奖中幸运的人。

当然啦，选择更文更主要的是想要逼着自己坚持做点事情，现在最难的是什么？最难的不就是坚持吗？想要好的身材，却不能坚持健身；想要高薪的工作，却不坚持学习；大多数人的人生大概就是在“ 想要...不坚持...” 中徘徊挣扎的度过的吧~

啊，不小心闲聊了这么多，下面开始我们今天的刮刮卡特效主题吧！

需求

之前有个需求，是要求h5网页实现一个刮刮卡的效果，并且刮到一定程度后，底图会完全展示出来。本来考虑着用canvas制作，可是做的过程中才发觉自己的canvas水平实在不行，于是就想着找找别人造过的轮子来用，最终找到了

wScratchPad.js

，实现出来的效果奇佳~

下面就来看看实现的过程吧~

实现过程

wScratchPad.js

是依赖于JQ的来写的库，所以要先引入JQ，再引入

wScratchPad.js

，

wScratchPad.js

的主要属性配置如下：

size:50, // 刷子的大小
bg:'./img/一等奖.jpg', // 背景图片（最底下的图片），可以是颜色（颜色必须是十六进制的）
fg:'./img/纯灰色图片.jpg', // 前景图片（最外层的图片，刮掉的就是该层），可以是颜色（颜色必须是十六进制的）
realtime:true, // 计算实际时间的百分比，当设置为false时，百分比的计算仅在scratchUp抬起时计算，此方法可以用于提高性能。
scratchDown:null, // 刷子（鼠标）点击就执行该函数
scratchUp:null, // 刷子（鼠标）点击后松开执行该函数
scratchMove:null, // 刷子（鼠标）点击并移动执行该函数
cursor:'crosshair', // 刷子（光标）的样式

主要方法如下：

$('#elem').wScratchPad('reset') // 重置刮刮卡蒙版效果
$('#elem').wScratchPad('clear') // 清除刮刮卡蒙版层
$('#elem').wScratchPad('enabled', true) //启用禁用当前dom的刮刮卡效果

看完了

wScratchPad.js

配置，根据配置写demo就很简单了，我的代码如下：

 <script src=&quot;https://cdn.bootcdn.net/ajax/libs/jquery/3.2.0/jquery.min.js&quot;></script>
 <script type=&quot;text/javascript&quot; src=&quot;./wScratchPad.js&quot;></script>


 <style>
 #box{
 width: 600px;
 height: 600px;
 }
 </style>

 <div id=&quot;box&quot;></div>
 <script>
 $('#box').wScratchPad({
 size: 50,
 bg: './food.png',
 fg: '#ccc',
 realtime: true,
 scratchDown: null,
 scratchUp: function(e, percent){
 percent > 50? $('#box').wScratchPad('clear') : '' // 当刮出区域大于百分之五十，就将底图全部展示
 }, 
 scratchMove: null,
 cursor: 'crosshair', 
 });
 function clear(){
 
 }
 </script>