js 实现鼠标点击出现小物体上升特效（2020年12月5日）

制作背景

大二上，网页设计第三次作业，让做一个花卉的网页，我想在网页中添加一些特殊的特效，以前在有的博客网站见到过点击屏幕就会有一堆颗粒掉落下来的效果，今天我就想挑战一下，我就做一个点击屏幕有一个小花飘上去的效果，就像看直播点赞，有一个大拇指飘上去的效果一样。

效果展示

flower

TIM截图20201211172945

源代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
/**
 * 鼠标按下屏幕上飞出一个花朵的特效
 * 日期：2020年12月5日
 * littlefean
 */

//生成从minNum到maxNum的随机数
function randomNum(minNum, maxNum) {
	switch (arguments.length) {
		case 1:
			return parseInt(Math.random() * minNum + 1, 10);
			break;
		case 2:
			return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
			break;
		default:
			return 0;
			break;
	}
}

//存放鼠标位置的全局变量
var MOUSE_LOC = null;

var body = document.querySelector('body');
//鼠标移动，实时获取位置并保存到 MOUSE_LOC 中
document.onmousemove = function (e) {
	MOUSE_LOC = { 'x': e.pageX, 'y': e.pageY };
};

//鼠标在屏幕中按下事件
document.onmousedown = function (e) {
	let a = document.createElement('div');
	a.setAttribute('class', 'flower');
	//设置初始css属性
	a.style.zIndex = 500;
	a.style.width = 100 + 'px';
	a.style.height = 100 + 'px';
	a.style.position = 'absolute';
	a.style.backgroundImage = "url('img/ani/i.png')"; /* 花朵图片的地址 */
	a.style.backgroundRepeat = 'no-repeat';

	/* 花朵位置必须要在鼠标点击位置上面一些，不能遮挡鼠标点击位置，否则按钮点击无效 */
	a.style.top = MOUSE_LOC.y - 100 + 'px';
	a.style.left = MOUSE_LOC.x - 40 + 'px';
	a.style.backgroundSize = '100%';
	console.log('asssssd');

	body.appendChild(a);
	var t = 0;	/* 表示当前动画时间 */
	var ro = 1;  /* 表示当前动画中花朵的角度 */
	var roAdd = randomNum(-5, 5);  /* 表示当前动画中花朵的旋转方向速度 */
	var size = 100;  /* 表示当前动画中花朵的大小 */
	var op = 0.99;  /* 表示当前动画中花朵的透明度 */

	//开启花朵上升动画，开启定时器
	var boomAni = setInterval(function () {
		//时间增加
		t++;
		//位置上升
		a.style.top = a.offsetTop - 2 + 'px';
		//角度旋转
		ro += roAdd;
		//css属性更新
		a.style.transform = "rotate(" + ro + "deg)";
		a.style.backgroundSize = size + '%';
		a.style.opacity = op;
		// 体积逐渐减小
		if (size >= 30) {
			size -= 0.5;
		}
		// 透明度逐渐降低
		if (op > 0) {
			op -= 0.01;
		}
		// 时间超时结束动画
		if (t >= 100) {
			a.remove();
			clearInterval(boomAni);
			return;
		}
	}, 1);
}

花朵图片：

使用方法

  1. 保存花朵图片到自己的网站项目文件夹下
  2. 修改其中一行代码 a.style.backgroundImage = "url('img/ani/i.png')"; /* 花朵图片的地址 */ 修改图片路径
  3. 将这段代码放入js文件中并引入到html文件中。

反思与总结

最开始的制作遇到了各种奇葩的诡异现象，点击花朵之后花朵飞的特别特别快，嗖的一下比子弹还快，甚至方向反了。旋转角度增量调过大会看起来像龙卷风。

经过一段时间的调整，动画做出来了，使用到了一些随机方法使得花朵的行为更加生动自然。但其实这种特效在正式的网站开发中不能太过于滥用，同时老师也提到：

一般大型网站很少使用，影响鼠标指针点击位置视觉上判断，有时用户体验相反不好，复杂计算也影响鼠标灵敏度