类《重装战姬》的网页点击特效

类《重装战姬》的网页点击特效

作为一个游戏开发者,网站上没点交互特效怎么行?

之前注意到了《重装战姬》加载时的点击特效,仿佛点击在电子屏障上的效果,觉得特别酷,想着我这网站能否也整个同款点击效果?

一开始我的思路是用特效做成gif,然后点击时生成gif并播放,结束后摧毁,后来请教了前端大佬老鬼,原来可以用css动画制作就可以了,用gif反而更麻烦,突然就好奇了起来。

今天周一加完班回来洗完澡接近12点,点开老鬼今天发给我的 监控鼠标的位置点击实现圆形扩散动画 和他写好的案例参考,细细琢磨研究,大概摸透了css动画大概是怎么个实现套路。

拿着之前网站做的点击小心心特效,琢磨了下尝试修改

1
2
3
4
5
6
7
8
9
10
​    function i(e){
​ var a=t.createElement("div");
​ a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)
​ var a=t.createElement("div");
​ a.className="heart",d.push({el:a,x:e.clientX-10,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)
​ var a=t.createElement("div");
​ a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-10,scale:1,alpha:1,color:s()}),t.body.appendChild(a)
​ var a=t.createElement("div");
​ a.className="heart",d.push({el:a,x:e.clientX-10,y:e.clientY-10,scale:1,alpha:1,color:s()}),t.body.appendChild(a)
​ }

嘿嘿嘿,出现4个小心心!

发现每个元素都需要加上div,总感觉哪里不对劲,但好像只能这样。

每天一点点进展,明天还得上班,早点休息,等明晚回来继续整,奶思!

——————

今晚稍微研究下形状,发现星星形状其实是一个正方形+两个原型拼起来的,有点怀疑像重装战姬的光环和泛光效果能否做到…

不过还是稍微整了下,虽然现在的方法有点蠢,纯手工复制代码拼位置,但已经有点点感觉了(差远了好吧!!)

——————

以为挺简单,瞎摸索下就能搞出来,就不用花太多时间在这块上面,但反而发现瞎摸索还不如我先去学习了解下,然后再做,反而效率高一些而且效果好一些,于是就找到了这篇博客 CSS3动画详解(图文教程)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 .heart{
width: 10px;
height: 10px;
position: fixed;
z-index:99999;
animation: anima 2.5s;
animation-delay: 1s;
opacity: 0.8;
}
@keyframes anima{
50% {
transform: scale(2);
opacity: 1;
}
100% {
transform: scale(0.2);
opacity: 0;
}
}

看完教程果然不一样,掌握了动画流程的控制,现在已经可以控制播放动画的延迟,也可以做出分段动画的效果,明晚改下定时器摧毁生成的元素之类的,效果应该就差不多了(还差得远啊喂!!!)

———————

瞎搞,想要定时一段时间播完动画就摧毁生成的元素,看着教程 JS设置定时器和清除定时器 来都能整出一堆莫名奇妙的报错…

还好有老鬼指点了下,附上报错和不报错的代码:

1
2
3
4
5
6
​    function de(a){
​ t.body.removeChild(a);
​ }
setTimeout (‘de(a)’,2000) //报错, de is not defined.
setTimeout (de.bind(a),2000) //报错,a is not of type 'Node'.
setTimeout (de.bind(this,a),2000) // 对了

考虑到setTimeout可能会内存泄漏的问题,就没用匿名函数了,匿名函数也不会报错。

目前实现的效果如下:

有点感觉了,还差偏移的细节,光圈,随机粒子,泛光没实现

——————

看了 css画圆, 如何用纯css实现一个动态画圆环效果 ,实现了圆环的效果

1
2
3
4
5
6
7
8
9
.ring{
width: 56px;
height: 56px;
position: fixed;
box-sizing: border-box;
border: 2px solid #00e0ff;
border-radius: 50%;
overflow: hidden;
}

但是粒子炸开效果有点难搞,怎么控制动画平滑过渡呢?有没有什么办法可以代码修改CSS的Animation关键帧呢?这是个问题…

—————

最后还是通过SetTimeout来控制粒子效果的动画,圆环的粒子特效生成的代码如下:

1
2
3
4
5
6
​        degree = Math.randMinMax(0, 360);
​ d = Math.randMinMax(0, 360);
​ s = Math.randMinMax(0.5,1.8);
​ var r = 45;
​ var x = Math.sin(d) * r ;
​ var y = Math.cos(d) * r ;

先告一段落,泛光效果暂时不做了,因为背景偏白,泛光效果加上去也不太明显。

最后,右键点击也加上效果,顺便把右键给禁了避免影响点击特效的体验hhh

1
2
3
4
​        e.oncontextmenu=function(e){
​ i(e);
​ return false;
​ }

——————

总结:目前实现的方法真蠢。

# Web, 随笔

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×