使用 SVG Filter实现扭曲的按钮效果

泡在网上的日子 / 文 发表于2016-06-01 17:33 次阅读 SVG,filter

blob.png

View demo Download source

紧接着Lucas Bebber在最近的web实验中对图片和文字制造的逼真热辐射和水波效果,我们想分享一下这类效果在按钮上的灵感。在HTML元素上使用SVG滤镜能让我们有更大的机会实现创造性的点击互动,这正是我们今天所要探索的内容。

主要思路就是对按钮应用distortion 或者blob滤镜,并探索一些创造性的东西。

如果你记得Lucas去年介绍的 “Gooey effect”,你可能会想起这个技术是用    CSS filter()函数混合了SVG <filter>。现在这已经被现代浏览器所支持,这真的很棒,因为你要知道,有许多其它的滤镜效果仍然不被支持,那么让我们来挖掘更多的东西,看看它能对按钮做些什么。        

注意:这仍然只是一个实验性质的技术,目前的工作最佳的浏览器是Chrome和Firefox。

让我们看看技术的详情。

设置按钮

首先,创建一个简单的按钮元素:

<button class="button">Click me</button>

使用一些基本的样式后,我们的按钮是这样的

Screen-Shot-2016-04-20-at-01.02.36.png

然后,我们在一个SVG对象中定义filter(注:后面滤镜统一写为filter),我们将把它放在HTML中:    

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-filters">
  <defs>
    <filter id="filter">
      <feTurbulence type="fractalNoise" baseFrequency="0 0.15" numOctaves="1" result="warp" />
      <feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="30" in="SourceGraphic" in2="warp" />
    </filter>
  </defs>
</svg>

现在我们用下面的方法将刚刚创建的filter应用到按钮中:    

.button {
  /* other styles */
  -webkit-filter: url("#filter");
  filter: url("/#filter");
}

如果你想让filter正常应用到Firefox上,第二个定义中的斜线很重要。

How the filter works

SVG filter提供了非常多的原始过滤元素。查看     Lucas的文章获得更多的背景知识。 

其中一种原始过滤对我们的例子尤其有意义,那就是<fedisplacementmap>。这种置换贴图效果基于你所输入的像素值移除使用它的元素的像素。


<fedisplacementmap>可以基于不同的资源比如图片,渐变或者另一个SVG filter元素应用到任意DOM元素上。对于我们正在创建的按钮,我们使用的另一个SVG filter元素是    <feTurbulence>。                        

<feTurbulence>是一个产生噪点的原始过滤元素(基于Perlin noise算法)。

看看如果对按钮单独使用它会发生什么:


bt noise filter

这里的<baseFrequency>属性很重要。它定义了噪点是如何产生的。接收两个数字作为参数,分别对应x和y轴上的效果。

改变属性以理解它是如何工作的:

现在,我们用上<fedisplacementmap> filter看看会发生什么:

bt displacement map

这里比较重要的属性是scale:定义效果的强度。

我们还需要定义filter的source:每个filter接受两个输入源,用in 和in2 属性表示。第一个source定义为SourceGraphic(即应用    filter的HTML元素),第二个source定义为我们的第一个filter <feTurbulence> 。                                        

现在我们的置换贴图( displacement map)知道它必须根据 <feTurbulence>产生的噪点移除    SourceGraphic的像素。        

xChannelSelector和yChannelSelector属性告诉它在每个轴上用什么颜色(R, G or B)定义像素置换。    

现在我们只需使用JavaScript去实现这些属性的动画。


你可以自己尝试,并对任意的HTML元素做这样的事情。比如在textarea上的效果:


Some interesting possibilities here :)

SVG filter让我们可以轻易的在web元素上使用诸如贴图置换这样的高级算法。所有复杂的工作都由 SVG filter元素自己处理,我们只需应用这些滤镜并做属性动画就可以了。    

这就是本文的内容!demo中的大多数效果都是用的上面所讲的规则。

在demo中可以看到更多的想法。SVG filter可以应用到任何的HTML元素中,因此有无限的可能性。没有做不到,只有想不到,不过记住使用这些效果的时候要明智,因为filter是资源敏感的。避免大面积的使用。

注意对css滤镜的支持在不同的浏览器间是不同的。而且效果也稍微有些不同。确保总是包含一个fallback。

支持的浏览器:

 blob.png

希望你能喜欢这些效果,并给你带来灵感!

在 Github上找到这个项目

View demo Download source


原文:http://tympanus.net/codrops/2016/05/11/distorted-button-effects-with-svg-filters/ 

收藏 赞 (3) 踩 (0)
上一篇:最全面的前端开发指南
HTML 语义 HTML5为我们提供了很多旨在精确描述内容的语义元素。确保你可以从它丰富的词汇中获益。 !--bad--divid=maindivclass=articledivclass=headerh1Blogpost/h1pPublished:span21stFeb,2015/span/p/divp…/p/div/div!--good--mainarticleheaderh1Blogpo
下一篇:影厅座位预览效果(css3)
查看 demo 下载源码 你可能对那些购买时需要选择座位的订票系统比较熟悉。通常在比赛,电影,搏击或者演唱会售票的时候需要这样做。如果能有一种座位的预览效果该有多酷啊,比如能够从你选择的位置的角度去预览舞台或者屏幕。这个问题引出了今天我们将要分享