Exploring Easing Curves: Physics‑Based Animation, Common Curves, MATLAB Curve Fitting, and Linear Interpolation for iOS Apps

Animations are a crucial part of user experience, and modern devices demand motion that follows physical laws and visual expectations. This article first explains why studying easing curves is important, describing how simple constant‑speed animations feel unnatural compared to motion that respects acceleration and deceleration.

It then derives easing curves from physics using a spring‑mass model. Assuming a mass of 1 and a rest position at x=1, the displacement (x‑1) can be treated as an animation curve x = f(t). The article shows how to obtain the analytical expression for the curve and visualises it with images.

Next, a comprehensive list of common easing functions is provided, each accompanied by its exact C++/Objective‑C implementation. The full source code is kept unchanged and wrapped in tags:

// Modeled after the parabola y = x^2
double fsQuadraticEaseIn(double p) {
    return p * p;
}
// Modeled after the parabola y = -x^2 + 2x
double fsQuadraticEaseOut(double p) {
    return -(p * (p - 2));
}
// Modeled after the piecewise quadratic
// y = (1/2)((2x)^2)             ; [0, 0.5)
// y = -(1/2)((2x-1)*(2x-3) - 1) ; [0.5, 1]
double fsQuadraticEaseInOut(double p) {
    if(p < 0.5){
        return 2 * p * p;
    } else {
        return (-2 * p * p) + (4 * p) - 1;
    }
}
// ... (similar blocks for cubic, quartic, quintic, sine, exponential, circular, bounce, back, elastic) ...

After the code catalog, the article uses MATLAB to analyse the scrolling behavior of iOS ScrollView. By extracting velocity‑vs‑distance data and fitting it with polynomial, logarithmic, and exponential models, it discovers that distance S is roughly linear with initial velocity V (S ≈ 500·V) and that the scrolling time T follows a logarithmic relation T ≈ 0.3452·log2(V) + 2.3019. The MATLAB scripts are reproduced verbatim:

xdata = [7.481126 7.077155 6.764386 6.615895 6.398847 6.012318 5.336042 5.037438 4.632423 2.499686 1.901368 1.376071 0.770763 0.523422 0.507804 0.460093 ];
ydata = [3732.000000 3530.000000 3374.000000 3299.500000 3191.000000 2998.000000 2660.500000 2511.000000 2309.000000 1243.500000 944.500000 682.500000 380.000000 256.500000 248.500000 225.000000 ];
p = polyfit(xdata, ydata, 1);
fitxdataArr = 0:0.2:15;
yFitArr = polyval(p, fitxdataArr);
plot(xdata, ydata, 'o');
hold on; grid on;
plot(fitxdataArr, yFitArr, 'linewidth',2 );
xlabel('速度（v）');
ylabel('里程（s）');
legend('原始数据', '拟合曲线');

Similar MATLAB code is shown for logarithmic and exponential fitting, demonstrating how to define custom model functions and use lsqcurvefit to obtain parameters.

Finally, the article presents a pragmatic approach to reproducing app animations without the original design specifications. By recording the app with QuickTime, extracting keyframes with GIFBrewery, measuring positions with XScope, and applying a simple linear interpolation function, developers can approximate any easing curve:

float calculate(float begin, float end, float lowerBound, float upperBound, float curVal) {
    if (curVal < lowerBound) {
        curVal = lowerBound;
    }
    if (curVal > upperBound) {
        curVal = upperBound;
    }
    float t = (curVal - lowerBound) / (upperBound - lowerBound);
    return begin + (end - begin) * t;
}

Links to two example projects that implement the described techniques are provided (MushroomGuide and SkyScanner). The article concludes that Apple’s ScrollView uses a complex overdamped model rather than simple uniform deceleration, and that mastering physics‑based easing and curve fitting empowers developers to create natural, high‑quality UI animations.