Когда именно анимация замедления достигает своей средней точки? - PullRequest
Новая
       79

Когда именно анимация замедления достигает своей средней точки?

2 голосов
/ 19 июня 2020

Я имитирую эффект переворота карты. Карточка - это div с изображением внутри. Я хотел бы изменить это изображение, когда анимация находится точно в средней точке (т.е. когда карта повернута точно на 90 градусов). Функция синхронизации перехода установлена ​​на замедление.

Итак, мой вопрос в том, в какой части установленной продолжительности перехода анимация замедления достигает своей средней точки?

Ответы [ 2 ]

3 голосов
/ 19 июня 2020

ЕСЛИ вы ссылаетесь на страницу MDN , вы можете найти там график c:

CSS animation ease function

Красные линии означают, что когда вы находитесь в 50% времени, вы находитесь примерно на 70% оборота

Зеленые линии означают, что если вы хотите быть на 50% оборота, вы должны быть на примерно в 34% случаев.

Пример для иллюстрации. Обратите внимание, как цвет фона изменится после 3.4s, когда другая анимация будет точно в средней точке (90 градусов вращения): 

.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

это даст нам: 

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%)

1 голос
/ 19 июня 2020

Вы можете установить значения по своему усмотрению. Дело в том, что с легкостью переход будет замедляться в конце, поэтому, чтобы узнать точное время, вам нужно будет проверить анимацию с помощью инструментов разработчика и проверить точный момент, когда вам требуется замена изображения. Это действительно просто с Firefox Developer Tools, здесь вы можете увидеть, как это сделать.

...