4.2 KiB

Raw Blame History

id	title	challengeType	videoUrl	forumTopicId	dashedName
587d78a9367417b2b2512ae8	Lerne wie Bézierkurven funktionieren	0	https://scrimba.com/c/c9bDrs8	301058	learn-how-bezier-curves-work

--description--

In der letzten Aufgabe wurde die CSS-Eigenschaft animation-timing-function sowie ein paar weitere Schlüsselwörter, die die Geschwindigkeit einer Animation während ihrer Ablaufdauer verändern, vorgestellt. Neben Schlüsselwörtern bietet CSS eine weitere Möglichkeit, um Animationen noch genauer kontrollieren zu können, nämlich mittels Bézierkurven.

In CSS-Animationen benutzt man Bézierkurven mit der cubic-bezier-Funktion. Die Form der Kurve repräsentiert den Ablauf der Animation. Die Kurve befindet sich auf einem 1 mal 1 großen Koordinatensystem. Die x-Achse dieses Koordinatensystems repräsentiert die Dauer der Animation (wie eine Zeitskala) und die y-Achse ist die Änderung in der Animation.

Die cubic-bezier-Funktion besteht aus vier Hauptpunkten. Diese befinden sich auf dem 1 mal 1 großen Raster und heißen: p0, p1, p2 und p3. p0 und p3 sind vordefiniert. Sie sind die Anfangs- und Endpunkte und befinden sich immer an den Positionen (0, 0) und (1, 1). Indem du die x- und y-Werte der anderen beiden Punkte bestimmst - d. h. dadurch, wo du sie im Koordinatensystem platzierst - gibst du die Form der Animationskurve vor. Dies erreicht man in CSS, indem man die x- und y-Werte der p1 und p2 "Anker"-Punkte in folgender Form deklariert: (x1, y1, x2, y2). Hier sehen wir ein ganzes Beispiel einer Bézierkurve in CSS:

animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);

Im obigen Beispiel sind die x- und y-Werte für jeden Punkt gleich. (x1 = 0.25 = y1 und x2 = 0.75 = y2) Wie du dich vielleicht aus Geometrieunterricht erinnerst, ergibt das eine gerade Linie zwischen dem Ursprungspunkt (0, 0) und dem Endpunkt (1, 1). Diese Animation ändert ein Element linear über ihre Dauer und hat denselben Effekt wie die Verwendung des Schlüsselworts linear. Mit anderen Worten: Sie verändert sich mit konstanter Geschwindigkeit.

--instructions--

Ändere für das Element mit der ID ball1 den Wert der Eigenschaft animation-timing-function von linear in eine äquivalente cubic-bezier-Funktion. Verwende die im obigen Beispiel angegebenen Punktwerte.

--hints--

Der Wert der Eigenschaft animation-timing-function für das Element mit der ID ball1 sollte eine gleichartige lineare cubic-bezier Funktion sein.

assert(
  $('#ball1').css('animation-timing-function') ==
    'cubic-bezier(0.25, 0.25, 0.75, 0.75)'
);

Der Wert der Eigenschaft animation-timing-function für das Element mit der ID ball2 sollte sich nicht ändern.

const ball2Animation = __helpers.removeWhiteSpace(
  $('#ball2').css('animation-timing-function')
);
assert(
  ball2Animation == 'ease-out' || ball2Animation == 'cubic-bezier(0,0,0.58,1)'
);

--seed--

--seed-contents--

<style>

  .balls{
    border-radius: 50%;
    background: linear-gradient(
      35deg,
      #ccffff,
      #ffcccc
    );
    position: fixed;
    width: 50px;
    height: 50px;
    margin-top: 50px;
    animation-name: bounce;
    animation-duration: 2s;
    animation-iteration-count: infinite;
  }
  #ball1 {
    left: 27%;
    animation-timing-function: linear;
  }
  #ball2 {
    left: 56%;
    animation-timing-function: ease-out;
  }

  @keyframes bounce {
    0% {
      top: 0px;
    }
    100% {
      top: 249px;
    }
  }

</style>

<div class="balls" id="ball1"></div>
<div class="balls" id="ball2"></div>

--solutions--

<style>

  .balls{
    border-radius: 50%;
    background: linear-gradient(
      35deg,
      #ccffff,
      #ffcccc
    );
    position: fixed;
    width: 50px;
    height: 50px;
    margin-top: 50px;
    animation-name: bounce;
    animation-duration: 2s;
    animation-iteration-count: infinite;
  }
  #ball1 {
    left: 27%;
    animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
  }
  #ball2 {
    left: 56%;
    animation-timing-function: ease-out;
  }

  @keyframes bounce {
    0% {
      top: 0px;
    }
    100% {
      top: 249px;
    }
  }
</style>
<div class="balls" id="ball1"></div>
<div class="balls" id="ball2"></div>

4.2 KiB Raw Blame History