扭曲视觉（Squigglevision）是一个（真实的！）动画术语，指线条看起来在扭动，即使物体/场景处于静止状态。这是像 Dr. Katz 这样的节目标志性的外观的一部分，还记得吗？
非常独特的外观！它甚至获得了专利。但是专利中谈到的是五张经过编辑的图像，并将它们以“快速连续”的方式显示。维基百科
为了创建构成扭曲视觉的线条振荡效果，Tom Snyder Productions 的动画师在称为“flic”的序列中循环播放五张略微不同的图画。
在网络上，如果我们要快速连续地动画化五张（或更多）图像，我们可能会使用基于 `step()` 的 `@keyframes` 动画和一个精灵图来实现。这是一个由 simuari 提供的很好的例子，它展示了它的工作原理，精灵图在上面（10 张图像组合成 1 张），动画在下面。
但这太费事了！我们有一种方法可以使任何元素产生抖动、摇晃和扭曲的效果，而无需手工制作一堆单独的图像并制作专门尺寸的定制关键帧来实现它。
技巧是什么？
快速迭代的 SVG 湍流滤镜
什么？是的，太酷了。
我从 David Khourshid 那里学到了这个技巧，他制作了一个很棒的演示，Alex the CSS Husky（见下文），扭曲效果甚至不是该演示的主要功能！David 说他从 Lucas Bebber 的另一个演示中获得了这个技巧，我将在下面嵌入。
（这是我为了解决 Firefox 的一个小问题而分叉的版本：你不能在 Firefox 中使用 `display: none;` 隐藏 SVG。）
以下是单个 SVG 湍流滤镜的工作原理。首先，你用一些内联的 `<svg>` 来声明它
<svg display="none">
<defs>
<filter id="turb">
<feTurbulence baseFrequency="0.3" numOctaves="2" />
<feDisplacementMap in="SourceGraphic" scale="20" />
</filter>
</defs>
</svg>然后你可以将它应用到任何 HTML 元素，就像这样
.filter {
filter: url("#turb");
}这里有一个前后对比
这是一个相当极端的湍流。试着把它调低到 `baseFrequency="0.003"`，看看更细微的版本。嗯，看起来有点像非常轻微的扭曲，不是吗？
技巧是只使用一点点，制作几个不同的滤镜，然后在它们之间进行动画。
这里有五个不同的湍流滤镜，每个滤镜都略微不同，并且具有不同的 ID
<svg>
<filter id="turbulence-1">
<feTurbulence type="fractalNoise" baseFrequency="0.001" numOctaves="2" data-filterId="3" />
<feDisplacementMap xChannelSelector="R" yChannelSelector="G" in="SourceGraphic" scale="25" />
</filter>
<filter id="turbulence-2">
<feTurbulence type="fractalNoise" baseFrequency="0.0015" numOctaves="2" data-filterId="3" />
<feDisplacementMap xChannelSelector="R" yChannelSelector="G" in="SourceGraphic" scale="25" />
</filter>
<filter id="turbulence-3">
<feTurbulence type="fractalNoise" baseFrequency="0.002" numOctaves="2" data-filterId="3" />
<feDisplacementMap xChannelSelector="R" yChannelSelector="G" in="SourceGraphic" scale="25" />
</filter>
<filter id="turbulence-4">
<feTurbulence type="fractalNoise" baseFrequency="0.0025" numOctaves="2" data-filterId="3" />
<feDisplacementMap xChannelSelector="R" yChannelSelector="G" in="SourceGraphic" scale="25" />
</filter>
<filter id="turbulence-5">
<feTurbulence type="fractalNoise" baseFrequency="0.003" numOctaves="2" data-filterId="3" />
<feDisplacementMap xChannelSelector="R" yChannelSelector="G" in="SourceGraphic" scale="25" />
</filter>
</svg>以及一个 CSS 关键帧动画，可以在它们之间进行动画
@keyframes squigglevision {
0% {
filter: url("#turbulence-1");
}
25% {
filter: url("#turbulence-2");
}
50% {
filter: url("#turbulence-3");
}
75% {
filter: url("#turbulence-4");
}
100% {
filter: url("#turbulence-5");
}
}你可以将其应用于任何你想让它扭曲的东西
.squiggle {
animation: squigglevision 0.4s infinite alternate;
}
这几乎与 Alex the CSS Husky 中发生的事情一模一样，只是滤镜更平滑。
这是 Lucas 的原始演示
