运用SVG绘图写一个动画特效。
动画效果如下：
实现代码如下：
代码语言：javascript复制<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>SVG绘图——圆形</title>
<style>
body {
text-align: center;
}
svg {
background: #ddd;
}
</style>
</head>
<body>
<h1>SVG绘图——圆形</h1>
<svg id="s9" width="500" height="400"></svg>
<script>
// random number：返回指定范围内的随机整数
function rn(min, max) {
var n = Math.floor(Math.random() * (max - min) min);
return n;
};
// random color: 返回指定范围内的随机颜色
function rc(min, max) {
var r = rn(min, max);
var g = rn(min, max);
var b = rn(min, max);
return `rgb(${r},${g},${b})`;
};
for (var i = 0; i < 30; i ) {
var c = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
c.setAttribute('r', rn(10, 80));
c.setAttribute('cx', rn(0, 500));
c.setAttribute('cy', rn(0, 400));
c.setAttribute('fill', rc(0, 255));
c.setAttribute('fill-opacity', Math.random());
c.onclick = function () {
// this对象在程序中随时会改变，而var that=this之后，that没改
// 变之前仍然是指向当时的this，这样就不会出现找不到原来的对象
var that = this;
// 为防止当前圆形再次被点击，应取消其事件监听
that.onclick = null;
// 启用定时器
var t = setInterval(function () {
// 获得半径
var r = that.getAttribute('r');
// 半径递增
r *= 1.05;
// 设置半径
that.setAttribute('r', r);
// 获得透明度
var p = that.getAttribute('fill-opacity');
// 透明度递减
p *= 0.9;
// 设置透明度
that.setAttribute('fill-opacity', p);
// 圆形几乎已经看不见了
if (p < 0.0001) {
// 清除定时器
clearInterval(t);
// 删除圆形
s9.removeChild(that);
}
}, 30);
};
s9.appendChild(c);
}
</script>
</body>
</html>
