教师节 H5 案例制作思路分享

前言



为了庆祝教师节，我做了一个H5，形式类似于拼团。玩法很简单，第一个人进入H5后即可创建班级，显示有一个【进入教室】按钮，点击后会看到镜头由近至远，看到的教室除了有班级牌和黑板字之外，其他的地方是空空如也。可修改班级号，选择一个空位坐下即可弹出生成海报的选项，生成的海报可以分享给朋友。第二个人扫码进来即可看到第一个人创建的班级，点击一个空位即可坐下。当然后来的人也可以自己创建班级，然后操作流程同上。当一个班级坐满了学生后，老师就会出现。





H5项目演示二维码如下：





制作思路



技术的关键点有五点，一是首屏点击【进入教室】镜头的缩放，以及老师和同学淡出的效果；二是动画结束后出现引导提示遮罩层；三是点击班牌号可以修改班级；四是选择一个空座位点击座位即可坐下；五是点击【生成海报】按钮即可生成一张图片，可以保存发给朋友，也可以发到朋友圈。下面我针对这五点做详细说明。



镜头缩放



这个要用两个div做，外层是一个固定的可视区域，内层是一个放大后的div，设置初始的缩放为1.44倍，也就是transform: scale(1.44);。由于镜头是从左上角为中心点的，而CSS的缩放默认是中心点，所以需要设置transform-origin: 0 0;。然后给黑板字、老师、同学设置单独的类，每个类都有animation动画。最后给【进入教室】按钮加一个点击事件，当点击后给需要动画的元素加上对应的类名，即可实现镜头缩放和元素淡出的动画效果。



引导遮罩层



动画结束后，让之前隐藏的遮罩层div显示出来，需要用到animationend这个事件。这里有个小技巧，在一个全屏div盒子里面先加一个遮罩层div，给它设置背景为background: rgba(0,0,0,.5);，然后放一张定位的适当大小图片盖上去。如果是单独给最外层的盒子加背景透明，那么里面的img图片也会受到影响随之改变。采用我这个方法，不仅也可以让背景铺满屏幕，同时也不会影响其他图片元素。



修改班级牌



这个其实很简单，点击班级牌这里加一个点击事件，点击后弹窗，弹窗里面有input输入框和确定按钮，输入内容后确定即可修改成功。由于班牌的宽度比较狭窄，所以只能写固定的几个字才能获得最佳效果，为此我贴心地在下方加入了一行白色小字，告诉用户输入内容尽量跟先前的内容格式一致。如果你写错了或者想换，可以重新点击班级号编辑。



点击空位坐下



如果你是第一次创建班级，那么所有的位置都是空的，这时候你选择哪个位置都是可以的。但是如果你是扫描别人的班级二维码进来的，那么你会面临两种情况，一是你只能选择其他的空位，二是你可能会和其他人选择同一个位子而冲突。第一种情况好说，只要你不点别人位置坐下就好了；第二个就需要做判断了，这个位置是否被他人占用，此时前端页面就需要发送请求去验证这个位置的占用情况，如果是空的就可以坐下，否则弹出提示该位置已经被坐下。这点和电影票APP的逻辑是十分类似的，如果你没有一开始就以最快的速度选择你要的座位，那么心仪的位置很可能被其他人抢占。



生成海报



这个地方的坑就比较多了，我用的是html2canvas这个js库生成海报，这个库的优点是简单快捷，可以生成和屏幕宽高相同的图片，原理是首先把页面上的DOM元素转化为canvas画布，然后通过canvas的toDataUR()方法生成一张图片，也就是我们要的海报了。但是缺点也很明显，经常会出现页面内容缺失、生成图片模糊等问题。我遇到的问题是，该显示的元素没有显示，应该隐藏的都显示出来了，这个让人很抓狂。后来发现是因为我用了animation动画，动画结束后停留在最后一帧，而CSS还是初始的状态，所以我不得不在动画结束后把所有的animation动画清除，移除掉和动画相关的类名，然后强制用jQuery强制css为设置会动画结束后的状态。后面我学到了一种用原生canvas绘制的解决方案，今后会另写一篇做介绍。



总结



这个H5总的来说制作难度并不大，只是第一次做这样的需要自己爬坑，在这些大大小小的坑上会花费些许时间。另外这个对切图要求比较高，需要分三层显示课桌、同学、椅子。分享出去的班级和创建班级是两个分开的页面，还需要后台联调才能实现全部功能，在此感谢我们的后台小哥“小周佩奇”的加班赶工，以及帮忙测试的同事们。我怀着一颗感恩的心，在教师节当天把这个H5发给了我曾经的老师，收到了老师的感谢和赞许。这是一个很有意义的H5，希望你有天也能用上。