cube-bezier()函数如何工作? [英] How does the cubic-bezier() function work?

问题描述

我目前正在尝试学习如何使用cubic-bezier()，但是我有点挣扎.

据我所知，它有助于创建由4个点组成的贝塞尔曲线，例如P0，p1，p2，p3.

P0和p3分别具有坐标(0，0)(1，1)，它们分别代表曲线的起点和终点.

X代表时间，Y代表进度.

所以，如果我的功能看起来像

 转换时序函数:cubic-bezier(0.7，0.2，1，1); 

在过渡时间的7/10之前，我的动画是否应该真的很慢(所以在过渡时间的7/10时，我得到0.2的级数)，而在其余时间中却非常快?(因此，从7/10开始的部分-> 10/10的时间应具有0.8的动画-因此它应该非常快)

这就是我认为它可以正常工作的方式，实际上却没有.这是我的代码

  .transitionTest {宽度:200像素；高度:200px；背景颜色:蓝色；边距:100px 0 0 100px;过渡属性:全部；过渡时间:2s；过渡时序函数:三次贝塞尔曲线(0.7，0.2，1，1);}.transitionTest:hover {变换:rotate(180deg);背景颜色:红色；宽度:100px；高度:100px；}  

 < div class ="transitionTest"></div>  

此外，如果我在此函数中使用负值怎么办?

解决方案

在过渡时间的7/10之前，我的动画是否应该真的很慢(所以在过渡时间的7/10时，我获得0.2的级数)，而在其余时间中还是非常快?

并非如此，因为这些点将不会定义计算，但会定义曲线，然后您需要考虑曲线以查找级数.这是您将得到的点的贝塞尔曲线:

黑色曲线是您的动画，开始时会有点慢.在大约时间的 70％处，您将达到动画的 50％，其他的 50％将来自 70％更改为 100％.

要获得想要的东西(70％时为20％)，您需要以下内容

  .box {宽度:200像素；高度:200px；背景颜色:蓝色；边距:100px 0 0 100px;过渡属性:全部；过渡时间:2s；过渡计时功能:三次贝塞尔曲线(0.6，0.05，1，0.2);}.box:hover {变换:rotate(180deg);背景颜色:红色；宽度:100px；高度:100px；}  

 < div class ="box"></div>  

当然，这不是获得所需效果的唯一组合.有很多组合可以获取它.

要获取有关计算的更多详细信息的相关问题:

  .box {宽度:200像素；高度:200px；背景颜色:蓝色；边距:100px 0 0 100px;过渡属性:全部；过渡时间:2s；过渡计时功能:三次贝塞尔曲线(0，0，0，-1);}.box:hover {变换:rotate(180deg);背景颜色:红色；宽度:100px；高度:100px；}  

 < div class ="box"></div>  

I'm currently trying to learn how to use cubic-bezier(), but I'm a bit struggling.

As far as I understood, it helps create a Bezier curve, which consists of 4 points, let's say P0, p1, p2, p3.

P0 and p3 have the coordinates (0, 0) respectively (1, 1) and they represent the starting and ending point of the curve.

X represents time, Y represents progression.

So if my function looks like

transition-timing-function: cubic-bezier(0.7, 0.2, 1, 1);

shouldn't my animation be really slow until 7/10 of the transition-time (so at 7/10 of the transition-time I get 0.2 of the progression) and very fast for the rest of the time? (so the part from 7/10 -> 10/10 of the time should have 0.8 of the animation - so it should be pretty fast)

That's how I assume it is working and actually it doesn't. Here's my code

.transitionTest {
    width: 200px;
    height: 200px;
    background-color: blue;
    margin: 100px 0 0 100px;
    transition-property: all;
    transition-duration: 2s;
    transition-timing-function: cubic-bezier(0.7, 0.2, 1, 1);
}

.transitionTest:hover {
    transform: rotate(180deg);
    background-color: red;
    width: 100px;
    height: 100px;
}

<div class="transitionTest"></div>

Also, what happens if I use negative values in this function?

解决方案

shouldn't my animation be really slow until 7/10 of the transition-time (so at 7/10 of the transition-time I get 0.2 of the progression) and very fast for the rest of the time?

Not really, because the points will not define the calculation but will define the curve and then you need to consider the curve to find the progression. Here is the bezier curve you will have with your points:

The black curved line is your animation and you will be a bit slow at the start. At around 70% of the time You will reach 50% of the animation and the other 50% will be from 70% to 100%.

To get what you want (20% at the 70%) you need something like below

.box {
  width: 200px;
  height: 200px;
  background-color: blue;
  margin: 100px 0 0 100px;
  transition-property: all;
  transition-duration: 2s;
  transition-timing-function: cubic-bezier(0.6, 0.05, 1, 0.2);
}

.box:hover {
  transform: rotate(180deg);
  background-color: red;
  width: 100px;
  height: 100px;
}

<div class="box"></div>

Of course, it's not the only combination to get the desired effect. There is a plenty of combination to obtain it.

Related question to get more details around the calculation: When exactly does an ease animation reach its midpoint?

A useful online tool to draw your curve and easily understand what is happening: https://www.desmos.com/calculator/d1ofwre0fr?lang=fr

Another one: https://cubic-bezier.com/

---

Also, what happens if I use negative values in this function?

Nothing special. Your points will be outside the area (0,0) (1,1) and we draw the curve the same way. Example:

.box {
  width: 200px;
  height: 200px;
  background-color: blue;
  margin: 100px 0 0 100px;
  transition-property: all;
  transition-duration: 2s;
  transition-timing-function: cubic-bezier(0, 0, 0, -1);
}

.box:hover {
  transform: rotate(180deg);
  background-color: red;
  width: 100px;
  height: 100px;
}

<div class="box"></div>

这篇关于cube-bezier()函数如何工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！