css - 缓动动画究竟何时到达其中点？

Question

我正在模拟卡片的翻转效果。卡片是一个内部有图像的 div。我想在动画恰好位于其中点时(即当卡片恰好旋转 90 度时)更改该图像。过渡的定时函数设置为ease-out。

所以我的问题是，在设置的过渡持续时间的多少部分，缓出动画会到达其中点？

Answer 1

如果您引用 the MDN page你可以在那里找到图形:

红线表示当您处于 50% 的时间时，您处于旋转的 70% 左右

绿线表示如果您想处于 50% 的轮换中，您需要大约有 34% 的时间。

举例说明。请注意当另一个动画恰好位于其中点(旋转 90 度)时背景颜色在 3.4s 后将如何变化:

.box {
  width:100px;
  height:100px;
  background:red;
  margin:10px;
  animation:
     change 10s ease-out,
     t 3.4s linear forwards; 
}
@keyframes change{
   to {
     transform:rotate(180deg);
   }
}

@keyframes t{
   0%,98% {
     background:red;
   }
   99%,100% {
     background:blue;
   }
}

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

---

如果您想要一个准确的结果，让我们做一些数学运算。从同一个 MDN 页面我们可以看到我们的贝塞尔曲线是由 4 个控制点组成的，因此我们将使用以下公式:

P = (1−t)^3*P0 + 3*(1−t)^2*t*P1 +3*(1−t)*t^2*P2 + t^3*P3

使用 P0(0,0) P1(0,0) P2(0.58,1) P3(1,1)

^{https://javascript.info/bezier-curve#maths}

这会给我们:

X = 3*(1−t)*t^2*0.58 + t^3  [X is our time axis]
Y = 3*(1−t)*t^2 + t^3       [Y is our output axis]
t in the range [0,1]
 

我们简化:

X = t²*(1.74 - 0.74*t)
Y = t²*(3 - 2*t)

如果Y = 0.5我们将得到t = 0.5(我不会详细说明求解方程的步骤)。然后我们将有 X = 0.3425(我们的 34%)

如果X = 0.5，我们将得到t = 0.6257。然后我们将有 Y = 0.6845(我们的 70%)