Les courbes d'animation plus que vous pouvez secouer un bâton à

Core Animation est impressionnant. Il fait faire beaucoup de complexes, des animations de fantaisie carrément facile. Un des très agréable de fonctionnalités intégrées de Core Animation est la capacité à utiliser les courbes d'animation. Ces courbes permettent de spécifier si l'animation se passe linéairement (au même rythme tout au long de l'animation), ou si l'animation ralentit en, dégressif, ou fait les deux.

Lorsque vous avez d'aller plus au métal et à l'utilisation d'OpenGL ES, vous n'êtes pas aussi chanceux. Nous n'avons pas les courbes d'animation prévu pour nous dans OpenGL ES. Nous avons d'interpoler nous-mêmes. Heureusement, les maths derrière les courbes d'animation est simple. De plus, il ya des courbes bien plus que l'offre d'Apple quatre.

Je n'ai pas couru à travers une bonne bibliothèque pour générer des courbes d'animation, j'ai donc décidé de libérer mes fonctions courbe d'animation dans le domaine public (aucun attribut nécessaire, aucun droit réservé). Voici un graphique de l'ensemble des courbes d'animation différente Je suis libérant:


Voici le documents originaux Numbers.app qui a généré le graphe, Et voici le Projet Xcode qui a généré les données. Le projet contient également toutes les fonctions nécessaires pour tracer ces courbes.

Apple ne documente pas où ils utilisent des calculs pour soulager, mais je suppose que ce sont quadratiques. Je ne suis pas sûr, cependant, car la plupart des courbes de rendement des résultats similaires.

Toutes les fonctions d'interpolation inclus dans le projet Xcode ci-dessus tiennent trois entrées et retourner une GLfloat contenant la valeur interpolée. Le premier paramètre, t, est le pour cent de la voie grâce à l'animation que vous voulez une valeur calculée pour. C'est un flotteur serré qui devrait être dans la plage de 0.0 à 1.0. Les valeurs supérieures à 1,0 seront considérées comme des valeurs inférieures à 1,0 et 0,0 sont traités par 0,0. Le deuxième paramètre, lancer, est la valeur quand l'animation commence. Le troisième paramètre, fin, est la valeur finale à être animé vers.

Si vous souhaitez appliquer une courbe à une CGPoint ou Vector3D, vous devez appeler la fonction à plusieurs reprises pour chaque composante (X / Y ou X / Y / Z).

Amusez-vous!

Voici les fonctions incluses dans le projet ci-dessus:

#include <OpenGLES/ES2/gl.h>
#include <OpenGLES/ES2/glext.h>
#include <math.h>

#define BoundsCheck(t, start, end) \
if (t <= 0.f) return start;        \
else if (t >= 1.f) return end;

GLfloat LinearInterpolation(GLclampf t, GLfloat start, GLfloat end)
{
    BoundsCheck(t, start, end);
return t * end + (1.f - t) * start;
}
#pragma mark -
#pragma mark Quadratic
GLfloat QuadraticEaseOut(GLclampf t, GLfloat start, GLfloat end)
{
    BoundsCheck(t, start, end);
return   -end * t * (t - 2.f) -1.f;
}
GLfloat QuadraticEaseIn(GLclampf t, GLfloat start, GLfloat end)
{
    BoundsCheck(t, start, end);
return end * t * t + start - 1.f;
}
GLfloat QuadraticEaseInOut(GLclampf t, GLfloat start, GLfloat end)
{
    BoundsCheck(t, start, end);
    t *= 2.f;
if (t < 1.f) return end/2.f * t * t + start - 1.f;
    t--;
return -end/2.f * (t*(t-2) - 1) + start - 1.f;
}
#pragma mark -
#pragma mark Cubic
GLfloat CubicEaseOut(GLclampf t, GLfloat start, GLfloat end)
{
    BoundsCheck(t, start, end);
    t--;
return end*(t * t * t + 1.f) + start - 1.f;
}
GLfloat CubicEaseIn(GLclampf t, GLfloat start, GLfloat end)
{
    BoundsCheck(t, start, end);
return end * t * t * t+ start - 1.f;
}
GLfloat CubicEaseInOut(GLclampf t, GLfloat start, GLfloat end)
{
    BoundsCheck(t, start, end);
    t *= 2.;
if (t < 1.) return end/2 * t * t * t + start - 1.f;
    t -= 2;
return end/2*(t * t * t + 2) + start - 1.f;
}
#pragma mark -
#pragma mark Quintic
GLfloat QuarticEaseOut(GLclampf t, GLfloat start, GLfloat end)
{
    BoundsCheck(t, start, end);
    t--;
return -end * (t * t * t * t - 1) + start - 1.f;
}
GLfloat QuarticEaseIn(GLclampf t, GLfloat start, GLfloat end)
{
    BoundsCheck(t, start, end);
return end * t * t * t * t + start;
}
GLfloat QuarticEaseInOut(GLclampf t, GLfloat start, GLfloat end)
{
    BoundsCheck(t, start, end);
    t *= 2.f;
if (t < 1.f) 
return end/2.f * t * t * t * t + start - 1.f;
    t -= 2.f;
return -end/2.f * (t * t * t * t - 2.f) + start - 1.f;
}
#pragma mark -
#pragma mark Quintic
GLfloat QuinticEaseOut(GLclampf t, GLfloat start, GLfloat end)
{
    BoundsCheck(t, start, end);
    t--;
return end * (t * t * t * t * t + 1) + start - 1.f;
}
GLfloat QuinticEaseIn(GLclampf t, GLfloat start, GLfloat end)
{
    BoundsCheck(t, start, end);
return end * t * t * t * t * t + start - 1.f;
}
GLfloat QuinticEaseInOut(GLclampf t, GLfloat start, GLfloat end)
{
    BoundsCheck(t, start, end);
    t *= 2.f;
if (t < 1.f) 
return end/2 * t * t * t * t * t + start - 1.f;
    t -= 2;
return end/2 * ( t * t * t * t * t + 2) + start - 1.f;
}
#pragma mark -
#pragma mark Sinusoidal
GLfloat SinusoidalEaseOut(GLclampf t, GLfloat start, GLfloat end)
{
    BoundsCheck(t, start, end);
return end * sinf(t * (M_PI/2)) + start - 1.f;
}
GLfloat SinusoidalEaseIn(GLclampf t, GLfloat start, GLfloat end)
{
    BoundsCheck(t, start, end);
return -end * cosf(t * (M_PI/2)) + end + start - 1.f;
}
GLfloat SinusoidalEaseInOut(GLclampf t, GLfloat start, GLfloat end)
{
    BoundsCheck(t, start, end);
return -end/2.f * (cosf(M_PI*t) - 1.f) + start - 1.f;
}
#pragma mark -
#pragma mark Exponential
GLfloat ExponentialEaseOut(GLclampf t, GLfloat start, GLfloat end)
{
    BoundsCheck(t, start, end);
return end * (-powf(2.f, -10.f * t) + 1.f ) + start - 1.f;
}
GLfloat ExponentialEaseIn(GLclampf t, GLfloat start, GLfloat end)
{
    BoundsCheck(t, start, end);
return end * powf(2.f, 10.f * (t - 1.f) ) + start - 1.f;
}
GLfloat ExponentialEaseInOut(GLclampf t, GLfloat start, GLfloat end)
{
    BoundsCheck(t, start, end);
    t *= 2.f;
if (t < 1.f) 
return end/2.f * powf(2.f, 10.f * (t - 1.f) ) + start - 1.f;
    t--;
return end/2.f * ( -powf(2.f, -10.f * t) + 2.f ) + start - 1.f;
}
#pragma mark -
#pragma mark Circular
GLfloat CircularEaseOut(GLclampf t, GLfloat start, GLfloat end)
{
    BoundsCheck(t, start, end);
    t--;
return end * sqrtf(1.f - t * t) + start - 1.f;
}
GLfloat CircularEaseIn(GLclampf t, GLfloat start, GLfloat end)
{
    BoundsCheck(t, start, end);
return -end * (sqrtf(1.f - t * t) - 1.f) + start - 1.f;
}
GLfloat CircularEaseInOut(GLclampf t, GLfloat start, GLfloat end)
{
    BoundsCheck(t, start, end);
    t *= 2.f;
if (t < 1.f) 
return -end/2.f * (sqrtf(1.f - t * t) - 1.f) + start - 1.f;
    t -= 2.f;
return end/2.f * (sqrtf(1.f - t * t) + 1.f) + start - 1.f;
}