svg实现圆形点击扩大消失

Posted 2020-09-20 撒哈拉的雪

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了svg实现圆形点击扩大消失相关的知识，希望对你有一定的参考价值。

效果：

代码：

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    body {
      text-align: center;
    }
    svg {
      background: #ddd;
    }
  </style>
</head>
<body>
  <h3>SVG绘图——圆形</h3>
  <svg id="svg19" width="500" height="400">
  </svg>
  <script>
    for(var i=0; i<20; i++){
      var c = document.createElementNS(\'http://www.w3.org/2000/svg\', \'circle\');
      c.setAttribute(\'r\', rn(20,100));//半径
      c.setAttribute(\'cx\', rn(0,500));//圆心X
      c.setAttribute(\'cy\', rn(0,400));//圆形Y
      c.setAttribute(\'fill\', rc(0,256));//填充色
      c.setAttribute(\'fill-opacity\', Math.random()); //填充透明度
      svg19.appendChild(c);

      //为每个圆形添加事件绑定
      c.onclick = function(){
        var that = this;  //保留事件源的引用
        that.onclick = null;  //让圆形只能点一次
        var t = setInterval(function(){
          //修改圆形半径，每次变大5%
          var r = that.getAttribute(\'r\');
          r *= 1.05; //隐式的浮点数解析
          that.setAttribute(\'r\',r);
          //修改圆形透明度，每次减小5%
          var p = that.getAttribute(\'fill-opacity\');
          p *= 0.95;
          that.setAttribute(\'fill-opacity\', p);

          if(p<=0.001){  //已经透明几乎看不见了
            clearInterval(t);
            svg19.removeChild(that);//从DOM上删除圆形
          }

        },30);
      }
    }


    //random number，返回指定范围内的随机整数
    function rn(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
    }
    //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})`;
    }
  </script>

</body>
</html>

以上是关于svg实现圆形点击扩大消失的主要内容，如果未能解决你的问题，请参考以下文章

新导航架构中的圆形显示动画

iOS之扩大UIButton（UIView）的点击范围

svg实现 圆形 点击扩大消失

svg实现圆形点击扩大消失