0

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

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

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

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

我打算做的是使用以下函数中的参数方程为贝塞尔曲线生成一个点轨迹（比如 100），每个点使用 100 个值（一次为x，一次为） ，使用 100个y值t01

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通过 top3是控制点的地方，并且是从tot的参数标量。我可以通过预先计算 的平方和立方值来相当容易地优化它。01t

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

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

我在这个问题上看到回答者建议简单地消除和x定义函数。但是，这将给出非常不准确的结果，因为从到的线性贝塞尔曲线不会线性动画。yt0.01.0

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

有谁知道Apple是如何实现这一目标的，CAMediaTimingFunction或者那里有一个库可以实现相同的结果？

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

4

1 回答 1

2

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

/*
 * 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

于 2015-12-24T20:02:55.193 回答