-
Notifications
You must be signed in to change notification settings - Fork 12
/
click-colorful.js
114 lines (111 loc) · 3.48 KB
/
click-colorful.js
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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
(function (win, doc) {
"use strict";
var defaultParams = {
colors: ['#eb125f', '#6eff8a', '#6386ff', '#f9f383'],
size: 30,
maxCount: 30
}
function colorBall(params) {
this.params = Object.assign({}, defaultParams, params)
}
function getOneRandom(arr)
{
return arr[Math.floor(Math.random()*arr.length)];
}
function _run(ball) {
var randomXFlag = Math.random() > 0.5
var randomYFlag = Math.random() > 0.5
var randomX = parseInt(Math.random() * 160);
var randomY = parseInt(Math.random() * 160);
if (randomXFlag) {
randomX = randomX * -1;
}
if (randomYFlag) {
randomY = randomY * -1
}
var transform = 'translate3d('+randomX+'px,' + randomY + 'px, 0) scale(0)';
ball.style.webkitTransform = transform;
ball.style.MozTransform = transform;
ball.style.msTransform = transform;
ball.style.OTransform = transform;
ball.style.transform = transform;
}
colorBall.prototype.fly = function (x, y, playCount, loopTimer) {
if (!loopTimer) loopTimer = 300
var ballElements = []
var fragment = document.createDocumentFragment()
var ballNum = this.params.maxCount;
// 修改轮换播放实现方式，改为一次创建所有，通过延迟执行动画实现
if(playCount) {
ballNum = ballNum * playCount;
}
var loop = 0
for(var i=0; i<ballNum; i++) {
var curLoop = parseInt(i/this.params.maxCount)
var ball = doc.createElement('i');
ball.className = 'color-ball ball-loop-' + curLoop;
var blurX = Math.random() * 10
if (Math.random() > 0.5) blurX = blurX* -1
var blurY = Math.random() * 10
if (Math.random() > 0.5) blurY = blurY* -1
ball.style.left = (x) + 'px';
ball.style.top = (y) + 'px';
ball.style.width = this.params.size + 'px';
ball.style.height = this.params.size + 'px';
ball.style.position = 'fixed';
ball.style.borderRadius = '1000px';
ball.style.boxSizing = 'border-box';
ball.style.zIndex = 9999;
ball.style.opacity = 0;
if (curLoop === 0) ball.style.opacity = 1;
ball.style.transform = 'translate3d(0px, 0px, 0px) scale(1)';
ball.style.webkitTransform = 'translate3d(0px, 0px, 0px) scale(1)';
ball.style.transition = 'transform 1s ' + curLoop * loopTimer / 1000 + 's ease-out';
ball.style.webkitTransition = 'transform 1s ' + curLoop * loopTimer / 1000 + 's ease-out';
ball.style.backgroundColor = getOneRandom(this.params.colors);
fragment.appendChild(ball);
ballElements.push(ball)
// 性能优化终极版
if (curLoop !== loop) {
(function(num){
setTimeout(function(){
var loopBalls = document.getElementsByClassName('ball-loop-' + num)
for(var j = 0; j < loopBalls.length; j++) {
loopBalls[j].style.opacity = 1
}
if (num === loop) {
_clear(ballElements)
}
}, num * loopTimer + 30)
})(curLoop)
loop = curLoop
}
}
doc.body.appendChild(fragment);
// 延迟删除
!playCount && _clear(ballElements)
// 执行动画
setTimeout(function () {
for(var i=0; i<ballElements.length; i++){
_run(ballElements[i])
}
}, 10)
}
function _clear(balls) {
setTimeout(function() {
for(var i=0; i<balls.length; i++){
doc.body.removeChild(balls[i])
}
}, 1000 )
}
//兼容CommonJs规范
if (typeof module !== 'undefined' && module.exports) {
module.exports = colorBall;
};
//兼容AMD/CMD规范
if (typeof define === 'function') define(function() {
return colorBall;
});
//注册全局变量，兼容直接使用script标签引入插件
win.colorBall = colorBall;
})(window, document)