使用三次贝塞尔函数的自定义动画
Custom animation using cubic Bezier function
我正在尝试创建一个自定义动画,它具有与我使用 CAMediaTimingFunction
相同的动画曲线(我在 OpenGL 中制作动画,所以我无法使用这个)。一般来说,我也想远离 UIKit
,因为我希望它尽可能多平台。
CAMediaTimingFunction
使用三次贝塞尔曲线函数从流逝的时间开始计算动画进度。不过我不知道它是怎么做到的。
据我了解,三次贝塞尔函数是参数化定义的,当您尝试从中推导出笛卡尔方程时,它会变得一团糟。
需要说明的是:我想要一种方法,该方法采用沿三次贝塞尔曲线的 x 值输入和 returns y 值输出。控制点将限制在 (0, 0) 到 (1, 1)。
我打算做的是使用以下函数中的参数方程为贝塞尔曲线生成点轨迹(比如 100)twice 每个点(一次x
,一次用于 y
),使用 t
从 0
到 1
的 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
中实现这一点,或者是否有一个库可以实现相同的结果?
或者是否有更简单的替代方法来使用三次贝塞尔函数来在动画的进出阶段提供平滑的动画曲线?
这就是 Apple 在 WebKit 中采样 CSS 相当于 CAMediaTimingFunction
的方式。感兴趣的函数是 double solve(double x, double epsilon)
,其中 returns y
for 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
我正在尝试创建一个自定义动画,它具有与我使用 CAMediaTimingFunction
相同的动画曲线(我在 OpenGL 中制作动画,所以我无法使用这个)。一般来说,我也想远离 UIKit
,因为我希望它尽可能多平台。
CAMediaTimingFunction
使用三次贝塞尔曲线函数从流逝的时间开始计算动画进度。不过我不知道它是怎么做到的。
据我了解,三次贝塞尔函数是参数化定义的,当您尝试从中推导出笛卡尔方程时,它会变得一团糟。
需要说明的是:我想要一种方法,该方法采用沿三次贝塞尔曲线的 x 值输入和 returns y 值输出。控制点将限制在 (0, 0) 到 (1, 1)。
我打算做的是使用以下函数中的参数方程为贝塞尔曲线生成点轨迹(比如 100)twice 每个点(一次x
,一次用于 y
),使用 t
从 0
到 1
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
中实现这一点,或者是否有一个库可以实现相同的结果?
或者是否有更简单的替代方法来使用三次贝塞尔函数来在动画的进出阶段提供平滑的动画曲线?
这就是 Apple 在 WebKit 中采样 CSS 相当于 CAMediaTimingFunction
的方式。感兴趣的函数是 double solve(double x, double epsilon)
,其中 returns y
for 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