Каким будет эквивалентное уравнение Javascript для этого графа?

Question

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

• diffx / y = расстояние в пикселях курсора от исходного местоположения ссылки.Это значение становится отрицательным, если курсор перемещается влево или выше исходного местоположения ссылки (уже рассчитано).
• пробел / г = количество расстояния между курсором и ссылкой, которое я хочу

• calcx / y =вычисленное число будет добавлено в 'style.top' и 'style.left' ссылки

  calcx = diffx - spacex
  calcy = diffy - spacey
  
  link.style.top = calcx
  link.style.top = calcy
  

Если я установлю spacex/y = 0, ссылка будет находиться в центре курсора
Если я установлю spacex/y = diffx/y, ссылка будет установлена ​​в нормальное положение

Моя цель - иметь ссылку, которая слегка наклоняется к курсору (возможно, при максимальном значении 40 пикселей от исходной позиции) и
каккурсор становится ближе к ссылке, ссылка медленно возвращается в исходное положение.
Когда курсор попадает внутрь, скажем, 100px, ссылка должна (плавно) перейти к курсору, как если бы она говорила «выбери меня!»

Вот как уравнение будет выглядеть в виде графика.

Мне нужен способ записать это как уравнение javascript.Некоторое время я не принимал алгебру, и я почти уверен, что мы не рассмотрели ничего, что выглядело именно так.Я предполагаю, что у него где-то есть показатель степени и условие, но я не совсем уверен.Если бы вы смогли понять это, я был бы очень благодарен (не говоря уже о впечатлении).

Спасибо за вашу помощь!

Answer 1

Вам определенно понадобится кусочная функция («условная», о которой вы говорили).Средняя часть выглядит как нечетный многочлен вида y = Ax ^ 3 или y = Ax ^ 5 для некоторого небольшого значения A (выбрано так, чтобы сделать y = 150, когда x = 150).Кривая оказывается линейной для | x |> = 200, то есть y = x + B для x> = 200 и y = x - B для x <= -200.Переходы между 150 <= | x |<= 200 кажутся немного хитрее, как сдвинутая экспонента или квадратик.Но вы можете начать с этого (псевдокод): </p>

if (x < -150) {
    y = x;
} 
else if (x < 150) {
    y = (1.0/22500.0) * pow(x, 3);
}
else {  // x > 150
    y = x;
}

Обратите внимание, что при этом игнорируются переходы между x = 150 и 200 и, соответственно, предполагается, что константы BI, упомянутые выше, равны нулю.Но это может помочь вам начать.

Редактировать:

После просмотра графика моей функции я думаю, что полином 5-го порядка более точно соответствует вашей желаемой форме.В этом случае средняя функция будет y = (1.0/506250000.0) * pow(x,5).Результаты ниже.Кстати, значения константы эквивалентны 150 ^ -2 для кубики и 150 ^ -4 для квинтической функции.

Answer 2

Я согласен, что, вероятно, проще смоделировать вашу функцию, если вы разделите ее на части:

f(x) = x + 50        if x < -200
       -150          if -200 <= x < -150
       150*(x/150)^k if -150 <= x < 150:
       150           if 150 <= x < 200
       x - 50        if 200 <= x

for k some big odd number (I'd try 4-10 out...)

Answer 3

Вы можете использовать один из них или их комбинацию: http://drawlogic.com/2007/09/14/tweener-robert-penner-easing-equation-cheat-sheets/

Или http://www.robertpenner.com/easing/easing_demo.html