FCC---Learn How Bezier Curves Work---定義坐標軸點的值，影響斜率，改變速度。具體除錯換值既可以體會-有解無憂

The last challenge introduced the animation-timing-function property and a few keywords that change the speed of an animation over its duration.

CSS offers an option other than keywords that provides even finer control over how the animation plays out, through the use of Bezier curves.

In CSS animations, Bezier curves are used with the cubic-bezier function.

The shape of the curve represents how the animation plays out.

The curve lives on a 1 by 1 coordinate system.

The X-axis of this coordinate system is the duration of the animation (think of it as a time scale), and the Y-axis is the change in the animation.

The cubic-bezier function consists of four main points that sit on this 1 by 1 grid: p0, p1, p2, and p3. p0 and p3 are set for you - they are the beginning and end points which are always located respectively at the origin (0, 0) and (1, 1).

You set the x and y values for the other two points, and where you place them in the grid dictates the shape of the curve for the animation to follow.

This is done in CSS by declaring the x and y values of the p1 and p2 "anchor" points in the form: (x1, y1, x2, y2).

Pulling it all together, here's an example of a Bezier curve in CSS code:

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

In the example above, the x and y values are equivalent for each point (x1 = 0.25 = y1 and x2 = 0.75 = y2), which if you remember from geometry class, results in a line that extends from the origin to point (1, 1). This animation is a linear change of an element during the length of an animation, and is the same as using the linear keyword.

In other words, it changes at a constant speed.

練習題目：

For the element with the id of ball1, change the value of the animation-timing-function property from linear to its equivalent cubic-bezier function value.

Use the point values given in the example above.

練習代碼：

 1 <style>
 2 
 3   .balls{
 4     border-radius: 50%;
 5     background: linear-gradient(
 6       35deg,
 7       #ccffff,
 8       #ffcccc
 9     );
10     position: fixed;
11     width: 50px;
12     height: 50px;
13     margin-top: 50px;
14     animation-name: bounce;
15     animation-duration: 2s;
16     animation-iteration-count: infinite;
17   }
18   #ball1 {
19     left: 27%;
20     animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
21   }
22   #ball2 {
23     left: 56%;
24     animation-timing-function: ease-out;
25   }
26 
27   @keyframes bounce {
28     0% {
29       top: 0px;
30     }
31     100% {
32       top: 249px;
33     }
34   }
35 
36 </style>
37 
38 <div  id="ball1"></div>
39 <div  id="ball2"></div>

效果如下：

我的理解，也是2個球掉下，相同回圈時間，你定義坐標軸2個點的值，再加上原點和（1，1），形成的曲線，

X軸是回圈時間段，Y軸是變化值，例如，X是0.1，Y是0.9，意味在很少的時間內變化很大的值，速度會比較快，

具體也是除錯數值，可以體會效果

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/113668.html

標籤：Html/Css

上一篇：FCC---Change Animation Timing with Keywords--兩個小球從A都B，相同回圈時間 duration, 不同的速度 speed

下一篇：FCC---Make Motion More Natural Using a Bezier Curve--- juggling movement