FED实验室 - 专注WEB端开发和用户体验

CSS3 Transition and Animation中的贝塞尔曲线

CSS(3) 煦涵 6669℃ 0评论

一、CSS3 Transition and Animation兼容性

支持的浏览器有IE10+及现代浏览器,详细参考下面链接:
1) CSS3 Transitions
2) CSS3 Animation

二、transition-timing-function and animation-timing-function可取值(贝塞尔曲线相关)

linear: 线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease(默认):平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
ease-in:由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out:由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
ease-in-out:由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
cubic-bezier(p0,p1,p2,p3):特定的贝塞尔曲线类型,4个数值需在[0, 1]区间内

详细可以戳这里CSS cubic-bezier Builder

三、贝塞尔曲线

最初接触贝塞尔曲线是在PS中的钢笔工具,当时并没有刻意的去了解,现在涉及到动画了,关于贝塞尔曲线的设置不同值将形成不同的优美曲线,从而形成不同的动画效果。

Bézier curve(贝塞尔曲线)是应用于二维图形应用程序的数学曲线。 曲线定义:起始点、终止点(也称锚点)、控制点。通过调整控制点,贝塞尔曲线的形状会发生变化。 1962年,法国数学家Pierre Bézier第一个研究了这种矢量绘制曲线的方法,并给出了详细的计算公式,因此按照这样的公式绘制出来的曲线就用他的姓氏来命名,称为贝塞尔曲线。贝塞尔曲线有一阶(线段),二阶(抛物线),高阶。

贝塞尔曲线在CSS3中使用cubic-bezier(P0,P1,P2,P3); 包含四个参数p0,p1,p2,p3,它们的值都在0和1之间。使用不同的值显示出的动画效果各异。

四、相关实例

实例一: 各动作对比

ease
ease-in
ease-out
ease-in-out
linear
custom

实例二: 一个简单的进度条

五、参考链接

1) Cubic-bezier.com
2) Yisi在官网基础上进行了扩展
3) 贝塞尔曲线初探
4) A Look Into: Cubic-Bezier In CSS3 Transition

下面是「FED实验室」的微信公众号二维码,欢迎扫描关注:

FED实验室

行文不易,如有帮助,欢迎打赏!

赞赏支持or喜欢 (2)or分享 (0)
捐赠共勉
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址