Squigglevision

Squigglevision 是一个（真的！）动画术语，线条看起来在蠕动，即使物体/场景处于静止状态。它是像 Dr. Katz 这样的节目的标志性外观的一部分，还记得吗？

非常独特的外观！它甚至获得了专利。但该专利谈到了五张编辑过的图像，并以“快速连续”的方式显示它们。维基百科

为了创建构成 Squigglevision 特征的线条振荡效果，Tom Snyder Productions 的动画师将五张略微不同的图纸循环播放在一个称为“flic”的序列中。

在网络上，如果我们必须快速连续地播放五张（或更多）图像，我们可能会使用基于step()的@keyframes动画和精灵图来实现。这是一个由 simuari 提供的很好的例子，它准确地展示了它是如何工作的，上面是精灵图（10 张图像组合成 1 张），下面是动画。

但这需要大量的工作！有一种方法可以让我们在任何元素上获得摆动、抖动、扭动的效果，而无需手工制作一堆单独的图像并制作定制尺寸的特殊关键帧来实现它。

诀窍是什么？

快速迭代的 SVG 湍流滤镜

哇！是的，太酷了。

我从 David Khourshid 那里学到了这个技巧，他做了一个很棒的演示，Alex the CSS Husky（见下文），其中扭动甚至不是演示的主要功能！David 说他从 Lucas Bebber 那里获得了这个技巧，在另一个演示中，我将在下面嵌入。

以下是单个 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 的原始演示