Squigglevision

Lustiges Wort, oder? Es ist ein visueller Effekt, der ein Element in seiner Position leicht wackeln, zappeln und schwingen lässt und ihm ein eher unbehagliches, aber extrem einzigartiges Gefühl verleiht.

Squigglevision ein (echter!) Begriff für Animationen, bei denen die Linien scheinbar herumwimmeln, selbst wenn das Objekt/die Szene ruht. Es ist Teil des ikonischen Looks von Shows wie Dr. Katz, erinnern Sie sich?

Ein ziemlich einzigartiger Look! Es ist sogar patentiert. Aber das Patent spricht von fünf bearbeiteten Bildern, die in „rascher Abfolge“ gezeigt werden. Wikipedia

Um die Linienoszillationseffekte zu erzeugen, die Squigglevision charakterisieren, schleifen die Animatoren von Tom Snyder Productions fünf leicht unterschiedliche Zeichnungen in einer Sequenz namens „flic“.

Im Web würden wir, wenn wir fünf (oder mehr) Bilder in rascher Abfolge animieren müssten, dies wahrscheinlich mit einer step()-basierten @keyframes-Animation und einem Sprite-Sheet tun. Hier ist ein großartiges Beispiel dafür von simuari, das genau zeigt, wie es funktioniert, mit dem Sprite-Sheet oben (10 Bilder kombiniert in 1) und der Animation unten.

Wenn Sie diesen kleinen Kerl Bild für Bild betrachten, sieht es so aus, als würde er winken. Glauben Sie mir.

Aber das ist viel Arbeit! Es gibt eine Möglichkeit, das Wackeln, Zappeln und Schwingen auf jedem Element zu erzielen, ohne eine Menge einzelner Bilder von Hand erstellen und maßgeschneiderte Keyframes in spezialisierten Größen erstellen zu müssen, damit es funktioniert.

Der Trick?

Schnell iterierte SVG-Turbulenfilter

Was?? Ja, es ist so cool.

Ich habe diesen Trick von David Khourshid gelernt, der eine wundervolle Demo gemacht hat, Alex the CSS Husky (schauen Sie unten), bei der das Kräuseln nicht einmal das Hauptmerkmal der Demo war! David sagt, er hat den Trick von Lucas Bebber in einer anderen Demo, die ich unten einbetten werde.

(Das ist meine geforkte Version für einen winzigen Firefox-Fix: Sie können in Firefox nicht display: none; auf das SVG anwenden.)

Sehen Sie die leicht gezackten Kanten der Formen, aus denen Alex the Husky besteht.

Hier ist, wie ein einzelner SVG-Turbulenfilter funktioniert. Zuerst deklarieren Sie ihn mit einem Inline-<svg>

<svg display="none">
  <defs>
    <filter id="turb">
      <feTurbulence baseFrequency="0.3" numOctaves="2" />
      <feDisplacementMap in="SourceGraphic" scale="20" />
    </filter>
  </defs>
</svg>

Dann können Sie ihn wie folgt auf jedes HTML-Element anwenden

.filter {
  filter: url("#turb");
}

Hier ist ein Vorher/Nachher

Das ist eine ziemlich extreme Menge an Turbulenz. Versuchen Sie, sie auf baseFrequency="0.003" zu reduzieren und sehen Sie eine viel subtilere Version. Hmmm – *sieht fast aus wie ein ganz leichtes Kräuseln, nicht wahr?*

Der Trick ist, nur einen kleinen Teil davon zu verwenden, mehrere verschiedene zu erstellen und dann zwischen ihnen zu animieren.

Hier sind fünf verschiedene Turbulenfilter, alle leicht voneinander unterscheidbar, mit unterschiedlichen IDs

<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>

Und eine CSS-Keyframe-Animation, um zwischen ihnen zu animieren

@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");
  }
}

Die Sie auf alles anwenden können, was Sie kräuseln möchten

.squiggle {
  animation: squigglevision 0.4s infinite alternate;
}
Sie können die gezackten Kanten hier sehen, aber es macht viel mehr Spaß, die Live-Demo anzusehen.

Das ist ziemlich genau das, was mit  Alex the CSS Husky passiert, nur dass die Filter noch entspannter sind.

Hier ist Lucas' Original Demo

© .