微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

cubic-bezier

编程之家收集整理的这个编程导航主要介绍了cubic-bezier编程之家,现在分享给大家,也给大家做个参考。

cubic-bezier 介绍

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 内连续变化而得到:

cubic-bezier

其中 P0,P1,P2,P3 都为两维 xy 向量

网站地址:https://cubic-bezier.com/

网站描述:贝塞尔曲线

cubic-bezier

官方网站:https://cubic-bezier.com/

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。