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

Question

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

CAMediaTimingFunction 使用三次贝塞尔曲线函数从流逝的时间开始计算动画进度。不过我不知道它是怎么做到的。

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

需要说明的是:我想要一种方法，它接受 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