cubic-bezier 曲线是 css3 动画的一个重要基石。另一个为 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
为了提高效率以及减少计算精度丢失公式进一步经过了 Horner 's method 变化。
计算
css3 中某个限定了特定控制参数的 cubic -bezier 曲线如下所示:
动画所做的事情就是把 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,即经典的多项式求参问题,首先可以通过 newton method 尝试求出 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
上述解法也是源自 webkit webcore c++ 原生实现.
使用对比
在传入动画的 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'
});
效果对比:
cubic-bezier in kissy
通过对比即可发现,ease-out 和以前 js 实现的简单二次曲线 easeOut 还是有明显的不同,并且 js 实现和 css3 原生几乎效果完全一样(效率可能稍微低了些),更多自带曲线对比可见:
easing for kissy
- 大小: 1.8 KB
- 大小: 12 KB
分享到:
相关推荐
原子立方贝塞尔曲线 atom-cubic-bezier是Atom编辑器的缓动函数生成器安装apm install cubic-bezier特征CSS3预定义的缓动功能通过简单的拖动即可生成自定义缓动函数宽松效果根据用户选择加载贝塞尔曲线按键绑定Ctrl +...
cubic-bezier </ title > < link href =" https://unpkg.com/cubic-bezier-editor/dist/cubic-bezier-editor.min.css " rel =" stylesheet " > < script src =" ...
.default { transition-timing-function : cubic-bezier ( ' easeOutSine ' ); } .custom { transition-timing-function : cubic-bezier ( ' myCustomEasingFunction ' ); } .manual { transition-timing-function ...
android-cubic-bezier-interpolator 一个 Android 库,可帮助您在应用程序中实现贝塞尔动画如何使用 Animation animation = new Animation () { @Override protected void applyTransformation ( float ...
三次贝塞尔曲线控制 带有三次贝塞尔曲线资源和控件的Godot插件,用于对其进行可视化和编辑。 曲线的起点和终点固定为(0,0)和(1,1),仅存储两个控制点。 编辑器控件每个控制点都有一个句柄,类似于 。
三次贝塞尔超时 使用一系列间隔调用您的回调,例如使用 CSS3 cube-bezier-timeout
animation.css实现动画旋转特效是一款基于CSS3实现的酷炫的动画旋转特效代码
css3弹力球动画animation属性制作3D弹力球弹跳动画效果
安装npm install cubic - bezier - easing用法import CubicBezier from 'cubic-bezier-easing'let easeCubicInOut = new CubicBezier ( 0.645 , 0.045 , 0.355 , 1 )let moveItRight = KUTE . to ( someTarget , { ...
购物车动画-贝塞尔曲线
您可以这样指定P_1和P_3 : cubic-bezier (P_1_x , P_1_y , P_2_x , P_2_y ) 默认的ease功能定义为: cubic-bezier(0.25, 0.1, 0.25, 1.0)因为动画不是线性的,所以将两个缓动动画组合起来并不是完全简单。...
这个时候可以考虑用threejs来实现功能。 三维饼图使用示例: var cubic = new Cubic.PieChart("WebGL-output", { width: 400, height: 300, thickness: 5,//厚度 radius: 30,//半径 colors: [0xffffff, 0xff...
Kawasaki Manuali Cubic-s
Robert Penner 缓动方程的三次贝塞尔近似使用蛮力的罗伯特彭纳缓动方程的一组“更好”的三次贝塞尔近似。 请原谅这个项目的原始性。 这个想法是。 圣诞节快乐!演示用法node compare_curve.js 样本输出 at 0.98 0.76...
html代码部分主要模块就是一个input 外加一个 父级 div div宽度需要大于input宽度 不加 cubic-bezier 可以实现这个效果 transition: all 1s; 就是过渡效果少了个缓冲效果 我们这里使用到的运动曲线是 最后奉...
-webkit-transition: all 600ms cubic-bezier(0.77, 0, 0.175, 1); transition: all 600ms cubic-bezier(0.77, 0, 0.175, 1); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: ...
运行在MM32F5微控制器上的MicroPython固件,使用cubic-f5270开发板。
贝塞尔曲线编辑器包 直接在 Atom 中编辑 CSS Bezier 曲线。 右键单击cubic-bezier声明或在光标位于声明中时触发ctrl + alt + B
MicroPython firmware for cubic-f5270 board. 修复了之前版本中对spi flash兼容性的问题。
(1) CubicBezier1.m :评估给定四个控制点和区间的三次贝塞尔曲线。 (2) PlotBezier1.m :绘制贝塞尔曲线、控制点、控制多边形 (3) TestCircleApproxByCubicBezier.m :测试程序。 通过使用三次 Beizer 曲线近似...