炫酷HTML5 SVG液态水滴融合动画特效

2015年03月31日

这是一组使用HTML5 SVG过滤器制作的炫酷液态水滴融合动画特效。这些SVG动画特效使一些HTML元素,如菜单、分页按钮、APP、选择框等元素的过渡动画像几粒水滴一样融合分解,效果非常的酷。


SVG Filters


通过SVG Filters我们可以修改一个给定的图形,创建我们需要的结果。SVG中包含了一种可以执行各种操作的filter元素,下面列出了一些可用的SVG filter元素:

feBlend
feColorMatrix
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting
feDisplacementMap
feFlood
feGaussianBlur
feImage
feMerge
feMorphology
feOffset
feSpecularLighting
feTile
feTurbulence
feDistantLight
fePointLight
feSpotLight


当使用一个SVG filter的时候,我们可以将一个操作的结构作为另一个操作的输入,从而创建出无限的动画效果。
*常见的SVG filter效果是通过<feGaussianBlur>来制作模糊效果。


<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="400">
  <defs>
    <filter id="blur" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
    </filter>
  </defs>
  <rect x="50" y="50" width="500" height="300" fill="#8d81ac" filter="url(#blur)" /> 
</svg>     
复制代码


所得到的结果如下图:

<feGaussianBlur>元素的in属性用于定义原始的SVG输入,可以使用下面的几个关键字:


SourceGraphic
SourceAlpha
BackgroundImage
BackgroundAlpha
FillPaint
StrokePaint

这里也可以使用指向前一个执行结果的字符串,通过执行结果字符串,我们可以创建连续的动画效果。在液态水滴融合动画特效中就是使用这种方法制作的。

更为复杂的例子是组合使用多个SVG filter来制作所需的效果,如 drop shadow 阴影效果:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="400">
  <defs>
  <filter id="dropshadow" x="0" y="0" width="200%" height="200%">
    <feOffset result="offsetResult" in="SourceAlpha" dx="20" dy="20" />
    <feGaussianBlur result="blurResult" in="offsetResult" stdDeviation="5" />
    <feBlend in="SourceGraphic" in2="blurResult" mode="normal" />
  </filter>
  </defs>
  <rect width="500" height="300" fill="#8d81ac" filter="url(#dropshadow)" />
</svg>     
复制代码

得到的结果如下:

这种效果的原理是先移动元素,然后将该元素的副本进行模糊处理来制作阴影效果。通过feBlend使用in="SourceAlpha"简单的设置原始图像位于模糊图像的上面。该通道是原始图像的alpha通道,模糊后会变为黑色。

SVG Filters for HTML

在HTML元素上使用SVG Filters十分简单。可以在HTML页面中定义需要的SVG Filter,然后可以通过CSS样式表来使用它们:

.filterClass {
  -webkit-filter: url("#goo");
  filter: url("../index.html#goo");
}    
复制代码

定义一个没有-webkit-前缀的不同路径值有两个原因:一是为了使Firefox浏览器能够正确的找到该路径。二是对于相对路径,如果我们只使用#goo,它会在当前页面中查找样式表,而我们使用的是引用样式表,因此会找不到这个filter。通过设置这种设置,不论是内置样式表还是外部样式表,都可以正确的找到所需的filter。我们也可以通过JavaScript来添加filter。

function setFilter(value){
  $effectContainer.css({
    webkitFilter: value,
    filter: value,
  });
}  
复制代码

上面的value值类似于'url(#goo)'。

当前浏览器对在HTML元素上使用 SVG Filters 的支持非常好,可以查看这里。

免责声明:机构动态部分文章信息来源于网络以及网友投稿,本网站只负责对文章进行整理、排版、编辑,是出于传递 更多信息之目的,并不意味着赞同其观点或证实其内容的真实性。
当前位置: 首页 最新知识 炫酷HTML5 SVG液态水滴融合动画特效
本网站的一切内容只为更好的服务用户,并不保证所有的信息、文本、图形、链接及其他信息的准确性和完整性,内容仅供访问者使用参照,对因使用本网站内容而产生的相关后果不承担任何商业和法律责任!联系邮箱:15505413776@126.com

了解更多

@爱培训版权所有   鲁ICP备11020100号-1