137 lines
4.4 KiB
Markdown
137 lines
4.4 KiB
Markdown
---
|
||
id: 587d78a9367417b2b2512ae8
|
||
title: ベジェ曲線の仕組みを学ぶ
|
||
challengeType: 0
|
||
videoUrl: 'https://scrimba.com/c/c9bDrs8'
|
||
forumTopicId: 301058
|
||
dashedName: 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 コードにおけるベジェ曲線の例はこのようになります。
|
||
|
||
```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` 関数でなければなりません。
|
||
|
||
```js
|
||
assert(
|
||
$('#ball1').css('animation-timing-function') ==
|
||
'cubic-bezier(0.25, 0.25, 0.75, 0.75)'
|
||
);
|
||
```
|
||
|
||
id `ball2` を持つ要素の `animation-timing-function` プロパティの値は変更しないでください。
|
||
|
||
```js
|
||
const ball2Animation = __helpers.removeWhiteSpace(
|
||
$('#ball2').css('animation-timing-function')
|
||
);
|
||
assert(
|
||
ball2Animation == 'ease-out' || ball2Animation == 'cubic-bezier(0,0,0.58,1)'
|
||
);
|
||
```
|
||
|
||
# --seed--
|
||
|
||
## --seed-contents--
|
||
|
||
```html
|
||
<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--
|
||
|
||
```html
|
||
<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>
|
||
```
|