使用三次贝塞尔函数的自定义动画

Question

我正在尝试创建一个自定义动画，其动画曲线与使用 CAMediaTimingFunction （我在 OpenGL 中制作动画，因此无法使用它）具有相同的动画曲线。我也想远离UIKit，因为我希望它尽可能多平台。

CAMediaTimingFunction 使用三次 Bezier 函数从经过的时间计算动画进度。我不知道它是怎么做到的。

据我了解，三次贝塞尔函数是参数化定义的，当您尝试从中导出笛卡尔方程时，它会变得混乱。

明确一点：我想要一种方法，它接受 x 值输入并沿三次贝塞尔曲线返回 y 值输出。控制点将被限制在 (0, 0) 到 (1, 1) 之间。

我计划做的是使用以下函数中的参数方程为贝塞尔曲线生成一个点的轨迹（比如 100）两次 为每个点（一次用于 x，一次对于y)，使用从0 到1 的t 的100 个值

static inline CGFloat bezierFunc1D(CGFloat t, CGFloat p0, CGFloat p1, CGFloat p2, CGFloat p3) {
    return
    (1-t)*(1-t)*(1-t) * p0
    + 3 * (1-t)*(1-t) * t * p1
    + 3 * (1-t) * t*t * p2
    + t*t*t * p3;
}

这是p0 到p3 的控制点，t 是从0 到1 的参数标量。我可以通过预先计算t 的平方和立方值来相当容易地优化它。

然后我打算使用线性插值来生成一个点数组，其中x 的值是线性分离的（例如x = 0.01, 0.02... 0.99），然后使用这个数组来定义我的动画进度。

这是解决这个问题的最佳方法吗？对于一个相当简单的任务来说，这似乎是一个相当密集的过程，尽管它可以在发布时预先计算。

我在this question 上看到回答者建议简单地消除x 并将函数定义为y 而不是t。 但是，这会给出非常不准确的结果，因为从 0.0 到 1.0 的线性贝塞尔曲线不会以线性方式动画。

有没有更有效的方法来解决这个问题？

有谁知道 Apple 如何在 CAMediaTimingFunction 中实现这一点，或者是否有一个库可以实现相同的结果？

或者有没有比使用三次贝塞尔函数更简单的替代方法，可以在动画的进出阶段提供平滑的动画曲线？

Answer 1

这就是 Apple 在 WebKit 中对 CAMediaTimingFunction 等价的 CSS 进行采样的方式。感兴趣的函数是double solve(double x, double epsilon)，它为x ± epsilon 返回y。

/*
 * Copyright (C) 2008 Apple Inc. All Rights Reserved.
 *
 * Redistribution and use in source and binary forms, with or without
 * modification, are permitted provided that the following conditions
 * are met:
 * 1. Redistributions of source code must retain the above copyright
 *    notice, this list of conditions and the following disclaimer.
 * 2. Redistributions in binary form must reproduce the above copyright
 *    notice, this list of conditions and the following disclaimer in the
 *    documentation and/or other materials provided with the distribution.
 *
 * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
 * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
 * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL APPLE INC. OR
 * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
 * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
 * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
 * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
 * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 
 */

#ifndef UnitBezier_h
#define UnitBezier_h

#include <math.h>

namespace WebCore {

    struct UnitBezier {
        UnitBezier(double p1x, double p1y, double p2x, double p2y)
        {
            // Calculate the polynomial coefficients, implicit first and last control points are (0,0) and (1,1).
            cx = 3.0 * p1x;
            bx = 3.0 * (p2x - p1x) - cx;
            ax = 1.0 - cx -bx;

            cy = 3.0 * p1y;
            by = 3.0 * (p2y - p1y) - cy;
            ay = 1.0 - cy - by;
        }

        double sampleCurveX(double t)
        {
            // `ax t^3 + bx t^2 + cx t' expanded using Horner's rule.
            return ((ax * t + bx) * t + cx) * t;
        }

        double sampleCurveY(double t)
        {
            return ((ay * t + by) * t + cy) * t;
        }

        double sampleCurveDerivativeX(double t)
        {
            return (3.0 * ax * t + 2.0 * bx) * t + cx;
        }

        // Given an x value, find a parametric value it came from.
        double solveCurveX(double x, double epsilon)
        {
            double t0;
            double t1;
            double t2;
            double x2;
            double d2;
            int i;

            // First try a few iterations of Newton's method -- normally very fast.
            for (t2 = x, i = 0; i < 8; i++) {
                x2 = sampleCurveX(t2) - x;
                if (fabs (x2) < epsilon)
                    return t2;
                d2 = sampleCurveDerivativeX(t2);
                if (fabs(d2) < 1e-6)
                    break;
                t2 = t2 - x2 / d2;
            }

            // Fall back to the bisection method for reliability.
            t0 = 0.0;
            t1 = 1.0;
            t2 = x;

            if (t2 < t0)
                return t0;
            if (t2 > t1)
                return t1;

            while (t0 < t1) {
                x2 = sampleCurveX(t2);
                if (fabs(x2 - x) < epsilon)
                    return t2;
                if (x > x2)
                    t0 = t2;
                else
                    t1 = t2;
                t2 = (t1 - t0) * .5 + t0;
            }

            // Failure.
            return t2;
        }

        double solve(double x, double epsilon)
        {
            return sampleCurveY(solveCurveX(x, epsilon));
        }

    private:
        double ax;
        double bx;
        double cx;

        double ay;
        double by;
        double cy;
    };
}
#endif

来源：https://github.com/WebKit/webkit/blob/67985c34ffc405f69995e8a35f9c38618625c403/Source/WebCore/platform/graphics/UnitBezier.h