Easing functions

Here is place where you can check out animated plottings for basic easing functions. And here you can find source code for them in several languages (JS,Java,Lua,C#,C++,C).

C++ code for elastic easing (from here):

float Elastic::easeIn (float t,float b , float c, float d) {
	if (t==0) return b;  if ((t/=d)==1) return b+c;  
	float p=d*.3f;
	float a=c; 
	float s=p/4;
	float postFix =a*pow(2,10*(t-=1)); // this is a fix, again, with post-increment operators
	return -(postFix * sin((t*d-s)*(2*PI)/p )) + b;
}

float Elastic::easeOut(float t,float b , float c, float d) {
	if (t==0) return b;  if ((t/=d)==1) return b+c;  
	float p=d*.3f;
	float a=c; 
	float s=p/4;
	return (a*pow(2,-10*t) * sin( (t*d-s)*(2*PI)/p ) + c + b);	
}

float Elastic::easeInOut(float t,float b , float c, float d) {
	if (t==0) return b;  if ((t/=d/2)==2) return b+c; 
	float p=d*(.3f*1.5f);
	float a=c; 
	float s=p/4;
	 
	if (t < 1) {
		float postFix =a*pow(2,10*(t-=1)); // postIncrement is evil
		return -.5f*(postFix* sin( (t*d-s)*(2*PI)/p )) + b;
	} 
	float postFix =  a*pow(2,-10*(t-=1)); // postIncrement is evil
	return postFix * sin( (t*d-s)*(2*PI)/p )*.5f + c + b;
}

Input parameters here:

• t – time elapsed from start of animation
• b – start value
• c – value change
• d – duration of animation

There is nice online tool – Easing function generator. It generates polynomial functions as approximation. For example, elastic easing can be approximated:

function(t:Number, b:Number, c:Number, d:Number):Number {
	var ts:Number=(t/=d)*t;
	var tc:Number=ts*t;
	return b+c*(33*tc*ts + -106*ts*ts + 126*tc + -67*ts + 15*t);
}

In my framework i use easing formulas in more simple way. Instead of four parameters i use one! Easing can be described as time transformation f(t) -> t, which can be applied to multiple values at the same time. Also this gives a bit more clean formulas. Input time is in range [0.0..1.0], but output can exceed these values.

Here is an example for CircOut easing:

class MVAnimationEasing_CircOut : public MVAnimationEasing {
public:
    inline virtual double ease(double t) final { t -= 1; return sqrt(1 - t*t); };
};

And base animation class could contain something like this:

double getProgress()
{
    double progress = (currentTime - startTime)/(endTime - startTime);
        
    if (currentTime < startTime) progress = 0.0; 
    if (currentTime > endTime) progress = 1.0; 
        
    if (isInverted)
         progress = 1.0 - progress;
        
    progress = easing.ease(progress);
        
    return progress;
}

So the point is that easing is pretty easy.

ps. Don’t make your animations too long to annoy your users. Don’t make too many animations everywhere to defocus your users. Make animations so your users can better understand your UI.

As i wanted to include it to my cross-platform engine i found two c++ implementations: 

• https://gist.github.com/benjamin9999/3809142
• http://www.antigrain.com/__code/include/agg_blur.h.html#stack_blur_rgba32

First is SSE friendly, second contains some division optimization via static tables. However, both are not using all cpu cores. I took second one as foundation for my implementation, as i expected my code to work on mobile devices with no SSE support. Single-core processing of 1920×1200 rgba image with 100 px radius took only 219 ms (Intel Q9550, Windows 7).

I improved stackblur code to multi-threaded version – on my quad-core cpu speed results as expected showed 4x improvement – 63ms for the same task. You can download the part my lib below and use it as a foundation to your needs.

Download multi-threaded 32bit-color (RGBA) version of StackBlur:  stackblur.cpp

I believe algorithm can be optimized even further – any suggestions are welcome.

Main key features:

• Full screen (Use whole screen of device).
• Minimalism. No heavy shadows, bezels, gradients, etc. Borderless buttons.
• A lot of white space.
• Key color.
• Single font (but dynamic size).
• Minimalistic light single-color icons.
• Dynamic layout with no fixed hardcoded sizes.

Specific Apple features:

• Translucent elements hint content behind them. And here they mean specific blurred gradients.
• Control center could be swiped from bottom of screen.

As you see – only last block of features is related to actual new apple platform. First list can be easily applied to Android or WP. So now apple tries to reach main market tendency to minimalistic design. Not something new. I wonder for how long this fashion will last, but at the moment that style is new standard across all mobile devices.

This brief is based on “Designing for iOS 7” and “iOS 7 UI Transition Guide” official documents from apple development  site.