js贝塞尔曲线cubic-bezier模拟实现附UnitBezier.h
是 的⼀个重要基⽯。另⼀个为 steps （ease 等都是 cubic-bezier 的特殊形式），css3 中的 cubic_bezier 曲线限制了⾸尾两控制点的位置，通过调整中间两控制点的位置可以灵活得到常⽤的动画效果，同时 canvas 也进⾏了，也存在可以根据想要的曲线得到对应 cubic bezier 曲线的控制点参数。
⽽ ie(6-9) 却没有相应的⽀持，为了能在各个平台得到⼀致的动画效果，则不可避免要在 ie 上通过定时器沿着指定控制点参数的 cubic bezier 曲线来⼿动更新动画对象的数值.
模拟实现
公式
cubic-bezier 公式不是简单的 y= x 公式，⽽是引⼊了第三个变量 t，由于动画中关键在于计算⽐例，即在总时间的某个时间点百分⽐得到相应的值相对于最终值的⽐例，那么只需要得到 0,1 区间的曲线即可。 ⽽ [x,y] -> [0,1] 内的曲线则是通过 t 在 0,1 内连续变化⽽得到：
其中 P0, P1 ,P2, P3 都为两维 xy 向量
将向量拆开表⽰即为：
y= (1-t)^3*p0y + 3*(1-t)^2*t*p1y + 3*(1-t)*t^2p2y + t^3p3y
x= (1-t)^3*p0x + 3*(1-t)^2*t*p1x + 3*(1-t)*t^2p2x + t^3p3x
⽽ css3 所⽤的 cubic bezier 已经限定死 p0 = (0,0) , p3= (1,1) ，因此公式可简化为
var ax = 3 * p1x - 3 * p2x + 1,
bx = 3 * p2x - 6 * p1x,
cx = 3 * p1x;
var ay = 3 * p1y - 3 * p2y + 1,
by = 3 * p2y - 6 * p1y,
cy = 3 * p1y;
y= ((ay * t + by) * t + cy ) * t
x= ((ax * t + bx) * t + cx ) * t
为了提⾼效率以及减少计算精度丢失公式进⼀步经过了
动画所做的事情就是把 x 轴当做时间⽐例，根据曲线得到 y 轴对应的值，并更新到动画对象中去.
即转化为以下问题：如何根据上述公式在已知 x 的情况下如何得到 y.
求 t
⾸先需要根据公式
var ax = 3 * p1x - 3 * p2x + 1,
bx = 3 * p2x - 6 * p1x,
cx = 3 * p1x;
x= ((ax * t + bx) * t + cx ) * t
在已知 x 的情况下求 t，即经典的多项式求参问题，⾸先可以通过 求值.
求 y
上步得到 t 后则可以带⼊另⼀个 y 公式求得最终值 y
var ay = 3 * p1y - 3 * p2y + 1,
by = 3 * p2y - 6 * p1y,
cy = 3 * p1y;
y= ((ay * t + by) * t + cy ) * t
上述解法也是源⾃ .
使⽤对⽐
在传⼊动画的 easing 设置时，可以传⼊ css3 cubic-bezier 的语法格式或者直接传⼊特定的曲线设置(ease-in ease-out).
$('#xx').animate({
left:500
},{
duration: 2,
easing: 'cubic-bezier(1,0.22,0,0.84)' // 'ease-in'
});
效果对⽐：
通过对⽐即可发现，ease-out 和以前 js 实现的简单⼆次曲线 easeOut 还是有明显的不同，并且 js 实现和 css3 原⽣⼏乎效果完全⼀样（效率可能稍微低了些），更多⾃带曲线对⽐可见：
1 /*
2  * Copyright (C) 2008 Apple Inc. All Rights Reserved.
3  *
4  * Redistribution and use in source and binary forms, with or without
5  * modification, are permitted provided that the following conditions
6  * are met:
7  * 1. Redistributions of source code must retain the above copyright
8  *    notice, this list of conditions and the following disclaimer.
9  * 2. Redistributions in binary form must reproduce the above copyright
10  *    notice, this list of conditions and the following disclaimer in the
11  *    documentation and/or other materials provided with the distribution.
11  *    documentation and/or other materials provided with the distribution.
12  *
13  * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
14  * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
15  * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
16  * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL APPLE INC. OR
17  * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
18  * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
19  * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
20  * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
21  * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
22  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
23  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
24  */
25
26 #ifndef UnitBezier_h
27 #define UnitBezier_h
28
29 #include <math.h>
30
31 namespace WebCore {
32
33    struct UnitBezier {
34        UnitBezier(double p1x, double p1y, double p2x, double p2y)
35        {
36            // Calculate the polynomial coefficients, implicit first and last control points are (0,0) and (1,1).
37            cx = 3.0 * p1x;
38            bx = 3.0 * (p2x - p1x) - cx;
39            ax = 1.0 - cx -bx;
40
41            cy = 3.0 * p1y;
42            by = 3.0 * (p2y - p1y) - cy;
43            ay = 1.0 - cy - by;
44        }
45
46        double sampleCurveX(double t)
47        {
48            // `ax t^3 + bx t^2 + cx t' expanded using Horner's rule.
49            return ((ax * t + bx) * t + cx) * t;
50        }
51
52        double sampleCurveY(double t)
53        {
54            return ((ay * t + by) * t + cy) * t;
55        }
56
57        double sampleCurveDerivativeX(double t)
js控制css3动画触发58        {
59            return (3.0 * ax * t + 2.0 * bx) * t + cx;
60        }
61
62        // Given an x value, find a parametric value it came from.
63        double solveCurveX(double x, double epsilon)
64        {
65            double t0;
66            double t1;
67            double t2;
68            double x2;
69            double d2;
70            int i;
71
72            // First try a few iterations of Newton's method -- normally very fast.
73            for (t2 = x, i = 0; i < 8; i++) {
74                x2 = sampleCurveX(t2) - x;
75                if (fabs (x2) < epsilon)
76                    return t2;
76                    return t2;
77                d2 = sampleCurveDerivativeX(t2);
78                if (fabs(d2) < 1e-6)
79                    break;
80                t2 = t2 - x2 / d2;
81            }
82
83            // Fall back to the bisection method for reliability.
84            t0 = 0.0;
85            t1 = 1.0;
86            t2 = x;
87
88            if (t2 < t0)
89                return t0;
90            if (t2 > t1)
91                return t1;
92
93            while (t0 < t1) {
94                x2 = sampleCurveX(t2);
95                if (fabs(x2 - x) < epsilon)
96                    return t2;
97                if (x > x2)
98                    t0 = t2;
99                else
100                    t1 = t2;
101                t2 = (t1 - t0) * .5 + t0;
102            }
103
104            // Failure.
105            return t2;
106        }
107
108        double solve(double x, double epsilon)
109        {
110            return sampleCurveY(solveCurveX(x, epsilon)); 111        }
112
113    private:
114        double ax;
115        double bx;
116        double cx;
117
118        double ay;
119        double by;
120        double cy;
121    };
122 }
123 #endif

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。