0

I'm trying to implement an easing that is similar to this:

Graph

I'm trying to make a HTML5 animation that is 'moonwalking' and I've noticed how the moonwalk has periods of increased velocity and periods of slowed down velocity.

I've attempted to make easing using Sin and Cos Equations without the correct results.

What equation do I need in order to implement this as an jQuery easing?

Nimantha
  • 6,405
  • 6
  • 28
  • 69
Moe
  • 4,744
  • 7
  • 28
  • 37

2 Answers2

1

y = sin(x) + x looks like that graph. Plot

jpumford
  • 573
  • 2
  • 9
  • Yes it certainly does! Although, the real problem is how to put that pattern into the y value between 0.0 and 1.0 – Moe Nov 21 '12 at 01:54
  • It would be a simple compression along the x axis (divide the whole function by the x-value you would like to be 1.0). – jpumford Nov 21 '12 at 05:37
0
y = a * sin(f * 2*PI * x) + x

This equation matches your sketch when a = 0.05 and f = 3.

  • a controls the amplitude of the wave.
  • f is the frequency, i.e. how many cycles between 0 and 1.

I made a Desmos graph where you can play with a and c using sliders:

https://www.desmos.com/calculator/hpn1oxtwvt

Robert Penner
  • 6,148
  • 1
  • 17
  • 18