css中的timing-function

Home文章
 简介:随着css3的普及,transition过渡效果和animation动画使得页面效果越来越丰富。这些绚丽的效果都离不开timing-function,其功不可没

排版不是很好看,有markdown的可以直接下载附件看~~

随着css3的普及,transition过渡效果和animation动画使得页面效果越来越丰富。这些绚丽的效果都离不开timing-function,其功不可没

timing-function表示一个数学函数,它描述了在一个过渡或动画中一维数值的改变速度。 这实质上让你可以自己定义一个加速度曲线,也称为缓动函数。

这是一个连接时间输出比率的函数,表示为,0,0代表初始状态,1.0代表最终状态。

输出比可以大于1.0(或者小于0.0)。这是因为在一种反弹效果中,动画是可以比最后的状态走的更远的,然后再回到最终状态。

不过,如果输出值超过了它允许的范围,比如组成一个颜色的值大于了255或者小于了0,这个值会被修改为允许范围内的最接近的值(在颜色值这个例子中分别为255和0)。一些贝塞尔曲线展示了这些性质。

css支持的timing-function

  • 1、Bézier curves 曲线函数(可以用别称代替)
  • 2、阶梯函数(step)

先来了解下Bézier curves 曲线函数的基础知识

原理和简单推导(以三阶为例): 设P0、P02、P2是一条抛物线上顺序三个不同的点。过P0和P2点的两切线交于P1点,在P02点的切线交P0P1和P2P1于P01和P11,则如下比例成立: 

再来看个形象点的图

 

回过头来看css中的曲线

  • 1、规定了四个点P0, P1, P2, P3
  • 2、其中P0 为 (0, 0),P3 为 (1, 1),这两个是固定的
  • 3、我们平时用的 cubic-bezier(0, 0, 1, 1) 分别为p1(x,y),p2(x,y)这两个点
  • 4、需要注意的是x值的范围是[0,1]

再看下阶梯函数 steps(number_of_steps, direction) 还记得大学时候的端点函数么,就是这货

  • number_of_steps 正整数(1,2,3,4,5....),也就是分几段
  • direction 我理解的是啥时候生效,一段时间的开始还是结束
  1. steps(5, end)     ......。 
  2. steps(2, start)     。......

然后看下在css中曲线的一些别称:

linear cubic-bezier(0.0, 0.0, 1.0, 1.0) //默认就是它

ease cubic-bezier(0.25, 0.1, 0.25, 1.0). 

ease-in cubic-bezier(0.42, 0.0, 1.0, 1.0). 

ease-out cubic-bezier(0.0, 0.0, 0.58, 1.0)

ease-in-out cubic-bezier(0.42, 0.0, 0.58, 1.0)

step-start 看demo演示吧

step-end 看demo演示吧

为了进一步了解缓动函数,我们可以用js自行实现贝塞尔曲线

  • 具体看demo

    demo

参考资料



评论
Login