关于技术您现在的位置是:首页 > 关于技术

SVG简单实现融滞效果

头像 2019-01-22 14:55:39 , 172 人已围观 0 条评论

简介

生活中我们常见,两滴水在靠近时会相互粘连,慢慢地融合到一起,这融合的过程就产生了融滞效果。 那么放到Web页面 […]

生活中我们常见,两滴水在靠近时会相互粘连,慢慢地融合到一起,这融合的过程就产生了融滞效果。

那么放到Web页面上,我们该如何实现这种效果呢?像往常一样,先让我们看一下效果图吧。

 

可以看到,红色小球的边缘有慢慢融合的效果,接下来我们就用代码来实现它。

这里主要运用SVG的过滤器来呈现这种特殊效果。主要用到模糊效果 feGaussianBlur 以及图像处理 feColorMatrix 过滤器。

首先我们看页面结构,做两个红色小球出来,然后svg该怎么去写,html代码如下:

<div class="demo">
  <svg width="0" height="0">
    <defs>
      <filter id="goo">
        <feGaussianBlur in="SourceGraphic" stdDeviation="15" result="blur" />
        <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -9" result="goo" />
      </filter>
    </defs>
  </svg>
  <h4>拖动右侧球靠近左侧球</h4>
  <div class="target">
    <i id="ball1" class="ball"></i>
    <i id="ball2" class="ball"></i>
  </div>
</div>

简单的css给页面做一下样式,具体代码如下,核心代码为:

.target {
  filter: url('#goo');
}

为目标元素加上我们设计的滤镜效果。

.demo{
  margin: 100px;
}
svg{
  position: absolute;
}
.target{
  filter: url('#goo');
}
.ball{
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background-color: #ff0000;
  position: absolute;
}
.ball + .ball{
  margin-left: 200px;
}

接下来,我们简单的用js来实现一下右侧小球的拖拽功能,看代码吧:

var ball2 = document.getElementById('ball2');
ball2.onmousedown = function(e){
  var e = e || event;
  var disX = e.clientX - ball2.offsetLeft;
  var disY = e.clientY - ball2.offsetTop;

  document.onmousemove = function(e){
    var e = e || event;
    // 减200是因为样式中有一个margin-left
    var l = e.clientX - disX - 200;
    var t = e.clientY - disY;
    ball2.style.left = l + 'px';
    ball2.style.top = t + 'px';
  }

  document.onmouseup = function(){
    document.onmousemove = null;
    document.onmouseup = null;
  }
}

完成拖拽功能后,我们就可以拖着右侧的小球慢慢靠近左侧小球,在靠近并接触到左侧小球的时候就会产生融滞效果啦。想看最终效果,来猛戳这里

相信大家都有各自的一套方法实现这种效果,我们,加油!

Over~拜

文章评论


  • 0 条评论来说两句吧…  (* 为必填项,邮箱不会公开)

  •  *
  •  *
  • 提交评论

最停留-个人博客

友情推荐

  • 微信公众号:扫描加关注
  • 最停留-微信公众号