Идея правильная, надо сделать время нелинейным. Дело остается за малым - подобрать для каждого отрезка такие функции, чтобы вся анимация работала плавно.
Можно воспользоваться кубической кривой Безье. См. пример визуализации по ссылке
http://www.the-art-of-web.com/css/timing-function/. Если вариант с ease-in-out выглядит приемлимо, вот пример реализации, который я использовал для собственных нужд:
inline float bezierCubic(float a, float b, float c, float d, float t)
{
if (t < 0.f)
return a;
else if (t > 1.f)
return d;
float tt = t * t;
float ttt = tt * t;
float t2 = 1.f - t;
float tt2 = t2 * t2;
float ttt2 = tt2 * t2;
return ttt2 * a + 3.f * t * tt2 * b + 3.f * tt * t2 * c + ttt * d;
}
inline float easeInEaseOut(float a, float b, float t)
{
return bezierCubic(a, a, b, b, t);
}
Функция easeInEaseOut реализует плавный переход от значения a к значению b при 0.0 <= t <= 1.0.
----
Если такая штука, как сглаживание по отрезкам, не подходит, надо сглаживать всю кривую. Хороший результат в этом случае даст B-сплайн (конкретно, Uniform cubic B-spline). Примера реализации у меня нет, но я точно знаю, что его можно построить таким образом, чтобы получилась плавная кривая, которая тебе нужна. В википедии даже есть пример -
http://en.wikipedia.org/wiki/B-splin...ubic_B-splines.
К слову, можно и кубический сплайн Безье заюзать. У меня просто в памяти отложилось из универа еще, что B-сплайны самые плавные получаются.
Если возникнут проблемы с реализацией, отпишись, поразбираемся вместе.