C # — Легкая и легкая анимация формула
Скажем, если я делаю Ease-Out, а затем Легкая анимация движения объекта от координаты X1 до координаты X2 по шагам S через равные промежутки времени. Кто-нибудь может предложить формулу для вычисления координат X этого движения?
Решение
Квадратичное ослабление, где t = время, b = начальное значение, c = изменение значения, d = продолжительность:
function (float time, float startValue, float change, float duration) {
time /= duration / 2;
if (time < 1) {
return change / 2 * time * time + startValue;
}
time--;
return -change / 2 * (time * (time - 2) - 1) + startValue;
};
источник: http://gizma.com/easing/
Другие решения
На самом деле, я бы лучше использовал функцию, которая получает время в [0; 1] и выведите время в [0; 1], так что мы можем применить результат к любому типу (2D вектор, 3D вектор, …).
Решение 1
Для квадратичного ослабления вход / выход кривая разделена на две функции в зависимости от t:
- когда
t< 0,5:f(t) = square(t) - когда
t> = 0,5:f(t) = 1 - square(t - 1) + 0.5
После сокращения в C это даст:
float InOutQuadBlend(float t)
{
if(t <= 0.5f)
return 2.0f * square(t);
t -= 0.5f;
return 2.0f * t * (1.0f - t) + 0.5;
}
Решение 2 (Безье)
Еще одна интересная кривая смешивания — это кривая Безье, которая имеет преимущество в том, что она достаточно оптимизирована (нет, если). Вы можете проверить кривую на вольфрам. А вот код C:
float BezierBlend(float t)
{
return square(t) * (3.0f - 2.0f * t);
}
Решение 3 (параметрическая функция)
Редактировать:
Другой метод, предложенный @DannyYaroslavski, — это простая формула, предложенная Вот.
Он параметрический и имеет приятное ускорение и замедление входа / выхода.
С альфа = 2 вы получаете эту функцию:
Который переводится в C, как это:
float ParametricBlend(float t)
{
float sqt = square(t);
return sqt / (2.0f * (sqt - t) + 1.0f);
}
У меня та же проблема: хотел оживить мой график (Ease in-out),
Мозговой штурм дал мне два пути:
1) Тригонометрическая формула. Во-первых, я написал y=(sin(x/π*10-π/2)+1)/2какой аналог sin^2((5*x)/π)
float TrygoEase (float x) {
float y=(float)Math.pow(Math.sin(5*x/Math.PI),2);
return y;
}
2) Две параболы. Это было не сложно. Я просто использовал y=2*x*x на [0;0.5], а также y=-2(x-1)^2+1 на [0.5;1]
float ParabolEase(float x) {
float y=2*x*x;
if(x>0.5f){
x-=1;
y=-2*x*x+1;
}
return y;
}
Используйте эти способы для x=[0;1], что возвращает также y=[0;1],
Теперь вы можете сравнить эти графики:
