缓动动画何时准确到达中点？ [英] When exactly does an ease animation reach its midpoint?

问题描述

我正在模拟卡片上的翻转效果。该卡是内部有图片的div。我想在动画正好位于其中点时（即卡完全旋转90度时）更改该图像。

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

解决方案

如果您引用

红线表示，当您处于<$ c $ 50％以下的时间时，您的收入为 50％ c>轮换的70％

绿线表示如果您希望将轮换幅度设为 50％轮换的时间，您需要大约在 34％的时间。

示例进行说明。请注意，当另一个动画恰好在其中点（旋转90度）时，背景颜色在 3.4s 之后将如何变化：

  .box {
 width：100px; 
高度：100px; 
背景：红色； 
保证金：10px； 
动画：
改变10s缓和，
 t 3.4s线性前进； 
} 
 @关键帧更改{
到{
 transform：rotate（180deg）; 
} 
} 
 
 @keyframes t {
 0％，98％{
背景：红色； 
} 
 99％，100％{
背景：蓝色； 
} 
}  

 < 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是我们的时间轴] 
 Y = 3 *（1-t）* t ^ 2 + t ^ 3 [Y是我们的输出轴] 
t在[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％）

I am simulating the flip effect on a card. The card is a div with an image inside. I would like to change that image when the animation is exactly at its midpoint (i.e. when the card is exactly rotated 90 degrees). The timing function of the transition is set to ease-out.

So my question is, at what fraction of the set transition duration does an ease-out animation reach its midpoint?

解决方案

IF you refer to the MDN page you can find the graphic there:

The red lines mean that when you are at 50% of the time you are at around 70% of the rotation

The green lines mean that if you want to be at 50% of the rotation you need to be at around 34% of the time.

Example to illustrate. Notice how the background color will change after 3.4s when the other animation is exactly at its midpoint (90deg of rotation):

.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>

---

If you want an accurate result let's do some math. From the same MDN page we can see that our bezier curve is made with 4 control points so we will be using the following formula:

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

with P0(0,0) P1(0,0) P2(0.58,1) P3(1,1)

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

this will give us:

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]
 

We simplify:

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

If Y = 0.5 we will get t = 0.5 (I won't detail the step of solving the equation). We will then have X = 0.3425 (our 34%)

If X = 0.5 we will get t = 0.6257. We will then have Y = 0.6845 (our 70%)

这篇关于缓动动画何时准确到达中点？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！