4.4 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 はキーワード以外のオプションも提供しており、ベジェ曲線を使用してアニメーションの動作を細かく制御できます。

CSS アニメーションでは、ベジェ曲線は cubic-bezier 関数とともに使用されます。曲線の形状は、アニメーションがどのように再生されるかを表します。曲線は、1 × 1 の座標系に配置されます。この座標系の X 軸はアニメーションの持続時間です (時間軸と考えてください)。そして、Y 軸はアニメーションの変化です。

cubic-bezier 関数は 1 × 1 グリッド上の p0、p1、p2、p3 の 4 つの点で構成されます。 p0 と p3 は固定されています。これらは開始点と終了点であり、常に原点 (0, 0) と (1, 1) にそれぞれ配置されます。あなたが設定するのは残りの2点の x, y の値です。これらをグリッド上のどこに配置するかでアニメーションの曲線の形状が決まります。 CSSでこの設定を行うには、「アンカー」ポイントと呼ばれる 2 点 p1 と p2 の x, y の値を次の形式で宣言します: (x1, y1, x2, y2)。まとめると、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>

4.4 KiB Raw Blame History Unescape Escape