第六节 SVG滤镜 feTurbulence与feDisplac
2020-04-05 本文已影响0人
CODERLIHAO
feTurbulence与feDisplacementMap经常配合使用
例子1
图1.gif
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>feTurbulence</title>
<style>
body {
font-family: 'Amatic SC', sans-serif;
font-size: 100px;
}
.test {
-webkit-animation: squiggly-anim 0.34s linear infinite;
animation: squiggly-anim 0.34s linear infinite;
}
body {
line-height: 100vh;
background: #111;
color: #fff;
}
.test {
display: inline-block;
vertical-align: middle;
width: 100%;
outline: none;
text-align: center;
line-height: 1;
}
.small {
font-size: 0.5em;
}
.smaller {
font-size: 0.4em;
}
p {
margin: 0;
}
@-webkit-keyframes squiggly-anim {
0% {
-webkit-filter: url("#squiggly-0");
filter: url("#squiggly-0");
}
25% {
-webkit-filter: url("#squiggly-1");
filter: url("#squiggly-1");
}
50% {
-webkit-filter: url("#squiggly-2");
filter: url("#squiggly-2");
}
75% {
-webkit-filter: url("#squiggly-3");
filter: url("#squiggly-3");
}
100% {
-webkit-filter: url("#squiggly-4");
filter: url("#squiggly-4");
}
}
@keyframes squiggly-anim {
0% {
-webkit-filter: url("#squiggly-0");
filter: url("#squiggly-0");
}
25% {
-webkit-filter: url("#squiggly-1");
filter: url("#squiggly-1");
}
50% {
-webkit-filter: url("#squiggly-2");
filter: url("#squiggly-2");
}
75% {
-webkit-filter: url("#squiggly-3");
filter: url("#squiggly-3");
}
100% {
-webkit-filter: url("#squiggly-4");
filter: url("#squiggly-4");
}
}
</style>
</head>
<body translate="no">
<div class="test" contenteditable="">
Squiggly Text
<p class="small">– with – </p>
<p>
SVG Filters
</p>
<p class="small">(you can even edit this text)</p>
<p class="smaller">(only tested on Chrome so far)</p>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="squiggly-0">
<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="0"></feTurbulence>
<feDisplacementMap id="displacement" in="SourceGraphic" in2="noise" scale="6"></feDisplacementMap>
</filter>
<filter id="squiggly-1">
<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="1"></feTurbulence>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="8"></feDisplacementMap>
</filter>
<filter id="squiggly-2">
<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="2"></feTurbulence>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="6"></feDisplacementMap>
</filter>
<filter id="squiggly-3">
<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="3"></feTurbulence>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="8"></feDisplacementMap>
</filter>
<filter id="squiggly-4">
<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="4"></feTurbulence>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="6"></feDisplacementMap>
</filter>
</defs>
</svg>
</body>
</html>
例子2
图2.gif
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>feTurbulence</title>
<style>
body {
background: #cfcfcf;
}
#container,
#water {
background-image: url("lake.jpg");
background-position: center bottom;
}
#container {
position: absolute;
top: calc(50% - 206px);
left: calc(50% - 275px);
height: 412px;
width: 550px;
overflow: hidden;
box-shadow: 0 4px 20px #4f4f4f;
}
#container #water {
position: absolute;
bottom: 0;
width: 100%;
height: 66%;
-webkit-filter: url("#turbulence");
filter: url("#turbulence");
}
</style>
</head>
<body>
<script src="https://wow.techbrood.com/libs/jquery/jquery-1.11.1.min.js"></script>
<script src="https://wow.techbrood.com/libs/gsap/TweenMax.min.js"></script>
<div id="container">
<div id="water"></div>
</div>
<svg xlmns="https://www.w3.org/2000/svg" version="1.1">
<filter id="turbulence" filterUnits="objectBoundingBox" x="0" y="0" width="100%" height="100%">
<feTurbulence id="feturbulence" numOctaves="3" stitchTiles="noStitch" baseFrequency="0.016897500000000037 0.11897500000000037"></feTurbulence>
<feDisplacementMap xChannelSelector="G" yChannelSelector="B" scale="20" in="SourceGraphic"></feDisplacementMap>
</filter>
</svg>
<script>
var timeline = new TimelineMax({
repeat: -1,
yoyo: true
}),
feTurb = document.querySelector('#feturbulence');
timeline.add(
new TweenMax.to(feTurb, 8, {
onUpdateParams: [feTurb], //pass the filter element to onUpdate
onUpdate: function(fe) {
var bfX = this.progress() * 0.005 + 0.015, //base frequency x
bfY = this.progress() * 0.05 + 0.1, //base frequency y
bfStr = bfX.toString() + ' ' + bfY.toString(); //base frequency string
fe.setAttribute('baseFrequency', bfStr);
}
}), 0);
</script>
</body>
</html>
lake.jpg
去掉feDisplacementMap后
d.gif
