3.6 KiB

Raw Blame History

id	title	challengeType	videoUrl	forumTopicId	dashedName
587d78a9367417b2b2512ae8	學習貝塞爾曲線的原理	0	https://scrimba.com/c/c9bDrs8	301058	learn-how-bezier-curves-work

--description--

上一個挑戰中，我們介紹了 animation-timing-function 以及它的一些預設值，這些值定義了不同時間內的動畫速度。除了預定義值之外，CSS 還提供了貝塞爾曲線（Bezier curves）來更細緻地控制動畫的速度曲線。

在 CSS 動畫裏，我們可以用 cubic-bezier 來定義貝塞爾曲線。曲線的形狀代表了動畫的速度。曲線在 1 * 1 的座標系統內，其中 X 軸代表動畫的時間間隔（類似於時間比例尺），Y 軸代表動畫的改變。

cubic-bezier 函數包含了 1 * 1 網格里的4個點：p0、p1、p2、p3。其中 p0 和 p3 是固定值，代表曲線的起始點和結束點，座標值依次爲 (0, 0) 和 (1, 1)。你只需設置另外兩點的 x 值和 y 值，設置的這兩點確定了曲線的形狀從而確定了動畫的速度曲線。在 CSS 裏面通過 (x1, y1, x2, y2) 來確定 p1 和 p2。以下就是 CSS 貝塞爾曲線的例子：

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

在上面的例子裏，兩個點的 x 和 y 值相等（x1 = 0.25 = y1 和 x2 = 0.75 = y2）。如果你還記得幾何課的知識，結果是從原點到點 (1, 1) 的一條直線。元素在動畫中的速度呈線性，效果和使用 linear 關鍵詞的效果一致。換言之，元素勻速運動。

--instructions--

對於 id 爲 ball1 的元素，把 animation-timing-function 屬性的值從 linear 改爲等價的 cubic-bezier 函數值。也就是說使用上面例子給的值。

--hints--

id 爲 ball1 的元素的 animation-timing-function 屬性值應該爲和 linear 預定值等價的 cubic-bezier 函數值。

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

id 爲 ball2 的元素的 animation-timing-function 屬性值不應改變。

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>

3.6 KiB Raw Blame History Unescape Escape