使用三次贝塞尔曲线功能的自定义动画 [英] Custom animation using cubic Bezier function
问题描述
我正在尝试创建具有与使用 CAMediaTimingFunction 相同的动画曲线的自定义动画(我正在OpenGL中制作动画，因此无法使用此动画).我也希望尽量避开 UIKit ，因为我希望它尽可能多平台化.
I am trying to create a custom animation that has the same animation curve as if I were using a CAMediaTimingFunction (I am doing the animation in OpenGL, so I am unable to use this). I would also like to stay away from UIKit in general as I would like it to be as multi-platform as possible.
CAMediaTimingFunction 使用三次Bezier函数从经过的时间开始计算动画进度.我不知道它是怎么做到的.
CAMediaTimingFunction uses a cubic Bezier function to calculate the animation progress from the time that has elapsed. I have no idea how it does it though.
据我了解，三次贝塞尔函数是通过参数定义的，当您尝试从中导出笛卡尔方程时，它会变得混乱.
From what I understand, cubic Bezier functions are defined parametrically and it turns messy when you try to derive a cartesian equation from them.
要明确一点:我想要一种方法，该方法采用x值输入并沿三次贝塞尔曲线返回y值输出.控制点将从(0，0)限制为(1，1).
我打算做的是使用以下函数两次中的参数方程式为每个点生成贝塞尔曲线的点(例如100)的轨迹(一次用于 x ，一次用于 y )，使用从 0 到 1
What I was planning on doing is generating a locus of points (say 100) for the bezier curve using the parametric equation in the following function twice for each point (once for x, once for y), using 100 values of t from 0 to 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 的平方和立方值，我可以相当轻松地优化此设置.
This is where p0 through to p3 are the control points and t is the parametric scalar from 0 to 1. I could optimise this fairly easily by pre-calculating the squared and cubed values of t.
然后我将使用线性插值来生成点数组，其中 x 的值被线性分隔(例如， x = 0.01、0.02 ... 0.99 )，然后使用该数组定义我的动画进度.
I was then going to use linear interpolation in order to generate an array of points where the values of x are linearly seperated (e.g x = 0.01, 0.02... 0.99) and then use this array to define my animation progress for the time elapsed.
这是解决此问题的最佳方法吗?
我在这个问题上看到了答案，回答者建议简单地消除 x 并将函数定义为针对 t 的 y .但是，这将导致非常不准确的结果，因为从 0.0 到 1.0 的线性Bezier曲线不会线性地进行动画处理.
I saw on this question the answerer recommended simply eliminating x and define the function as y against t. However, this will give pretty inaccurate results, as a linear Bezier curve from 0.0 to 1.0 will not animate linearly.
有没有更有效的方法呢?
Is there a more efficient approach to this?
有人知道苹果如何在 CAMediaTimingFunction 中实现这一目标吗?还是有一个可以实现相同结果的库?
Does anyone know how Apple achieves this in CAMediaTimingFunction or is there a library out there that achieves the same result?
还是使用三次贝塞尔曲线函数可以在动画的内，外两个阶段都提供平滑的动画曲线，是一种更简单的选择吗?
Or is there a simpler alternative to using a cubic Bezier function that will give a smooth animation curve on both the in and out stages of the animation?
推荐答案
这是Apple在WebKit中采样与 CAMediaTimingFunction 等效的CSS的方式.感兴趣的函数是 doublesolve(double x，double epsilon)，它为 x±epsilon 返回 y .
This is how Apple samples the CSS equivalent of CAMediaTimingFunction in WebKit. The function of interest is double solve(double x, double epsilon), which returns the 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
这篇关于使用三次贝塞尔曲线功能的自定义动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
