【龙珠专场】如何用SVG噪声制作聚气动画

这是我参与2022首次更文挑战的第16天，活动详情查看：2022首次更文挑战

介绍

相信无数80,90后的同志们之前都非常痴迷龙珠，其中龙珠人物提升战斗力的一个招牌动作就是站的不动凝聚起息提升战斗力，本期我们将会使用SVG的 feTurbulence 噪声滤镜来完成龙珠中孙悟空的聚气动画。

先来康康完成效果吧：

正文

1.基础结构

首先，我们准备一张图片，放到html里面。

<img class="wukong" src="./assets/role.png" />

html,body{
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(230, 255, 254);
}

.wukong{
    width: 36vmin;
    filter: url('#filterSquiggle1');
    animation: squiggleVision .35s infinite alternate;
}

2.添加噪声

<svg style="display: none">
    <defs>
        <filter id="filterSquiggle1">
            <feTurbulence baseFrequency="0.02" numOctaves="50" seed="10" />
            <feDisplacementMap in="SourceGraphic" scale="20" />
        </filter>
    </defs>
</svg>

.wukong{
    filter: url('#filterSquiggle1');
}

这里先来介绍下噪声过滤的两个标签和他俩的属性：

feTurbulence：

• baseFrequency：噪声函数的基频参数，基频越高，噪声看起来越细致

• seed：元素生成的伪随机数的开始数字

• numOctaves：噪声函数的八度音阶数，阶数越高，噪声看起来越自然

feDisplacementMap：

• in: 有关于输入的原始图形元素处理，可填参数包含了SourceGraphic、SourceAlpha、BackgroundImage、BackgroundAlpha、FillPaint、StrokePaint等多种方式
• scale：使用的位移比例因子，比值越大图像变化越明显

我们这里写了个过滤器来制造噪声，为了更明显些我们把numOctaves和scale数值加高，然后又加了张图片看下对比。

因为增大了数值所以变化相当的明显，可以看出图片一部分像素出现了颗粒化偏移，我们就利用这种对图像的影响来完成这次的动画。

3.聚气动画

所谓的聚气动画，其实就是要通过css3的animation，做成好几个不同的噪声过滤器，循环播放有关过滤的操作就可以了，但是我们先把numOctaves和scale数值调成正常值，代码如下：

<svg style="display: none">
    <defs>
        <filter id="filterSquiggle1">
            <feTurbulence baseFrequency="0.02" numOctaves="5" seed="10" />
            <feDisplacementMap in="SourceGraphic" scale="2" />
        </filter>
        <filter id="filterSquiggle2">
            <feTurbulence baseFrequency="0.05" numOctaves="5" seed="10" />
            <feDisplacementMap in="SourceGraphic" scale="2.3" />
        </filter>
        <filter id="filterSquiggle3">
            <feTurbulence baseFrequency="0.04" numOctaves="5" seed="10" />
            <feDisplacementMap in="SourceGraphic" scale="1.5" />
        </filter>
        <filter id="filterSquiggle4">
            <feTurbulence baseFrequency="0.03" numOctaves="5" seed="10" />
            <feDisplacementMap in="SourceGraphic" scale="2" />
        </filter>
    </defs>
</svg>

.wukong{
    width: 36vmin;
    animation: squiggleVision .36s infinite alternate;
}

@keyframes squiggleVision {
    0% {
        filter: url('#filterSquiggle1');
    }
    25% {
        filter: url('#filterSquiggle2');
    }
    50% {
        filter: url('#filterSquiggle3');
    }
    75% {
        filter: url('#filterSquiggle4');
    }
}

结语

SVG的噪声过滤器非常的好用，比如处理水面波纹也会使用到他，还又更多的过滤器效果等你去发现，一起创作出有意思的效果吧~