CSS3 三次贝塞尔曲线(cubic-bezier)

努力吧灰灰兔

已于 2022-11-21 15:14:19 修改

阅读量1.2k

点赞数 1

分类专栏： css 文章标签： css3 动画 css

于 2019-12-18 09:01:47 首次发布

原文链接：https://blog.csdn.net/zhaozjc112/article/details/52909172

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

最近在看animation模块，其中animation-timing-function 和 transition-timing-function两个属性来控制动画速度分别提供了ease，liner，ease-in，ease-out，ease-in-out几个预设速度，还可以同过cubic-bezier来自定义速度，想要深入了解CSS3动画，实现随心所欲的动画效果，还是有必要理解下其中的原理。

CSS3动画速度的控制通过三次贝塞尔曲线函数实现，定义规则为
cubic-bezier (x1,y1,x2,y2)

原理

看一下什么是三次贝塞尔曲线，以及这几个参数的含义：
在这里插入图片描述
贝塞尔曲线通过控制曲线上的四个点（起始点、终止点以及两个相互分离的中间点）来创造、编辑图形，绘制出一条光滑曲线并以曲线的状态来反映动画过程中速度的变化。

分别用A,B,C,D表示这四个点，其中起始点固定值为A(0,0),终止点固定为D(1,1)剩下的中间点B(x1,y1),C(x2,y2)也就是所要动态操控的两个点了,对应cubic-bezier (x1,y1,x2,y2)中的四个参数,通过改变B,C两点的坐标值来动态生成一条贝塞尔曲线表示动画中的速度变化。

注意:

正常人都习惯从上往下看曲线,但是此线是ABCD构成,应该倒着看.
写两点坐标也别写反了红的先写蓝的后写

规则

x的取值区间是[0,1],取值超过该区间cubic-bezier即无效,y的的取值区间没有限制[-0.5,0.5]也是可以的,但不应该超出[0,1]范围太大。

CSS3提供的几个预设速度：

ease 对应自定义cubic-bezier(.25,.01,.25,1),效果为先慢后快再慢；
linear 对应自定义cubic-bezier(0,0,1,1)，效果为匀速直线；
ease-in 对应自定义cubic-bezier(.42,0,1,1),效果为先慢后快；
ease-out 对应自定义cubic-bezier(0,0,.58,1),效果为先快后慢；
ease-in-out 对应自定义cubic-bezier(.42,0,.58,1),效果为先慢后快再慢。

用法

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <title>demo</title>

  <style>
    .linear {
      width: 50px;
      height: 50px;
      background-color: #ff0000;
      -webkit-transition:  all 2s linear;
         -moz-transition:  all 2s linear;
           -o-transition:  all 2s linear;
              transition:  all 2s linear;
    }
    .linear:hover {
      -webkit-transform:  translateX(100px);
         -moz-transform:  translateX(100px);
           -o-transform:  translateX(100px);
              transform:  translateX(100px);
    }

    .custom {
      width: 50px;
      height: 50px;
      background-color: #00ff00;
      -webkit-transition:  all 2s cubic-bezier(.94,-0.25,.32,1.31);
         -moz-transition:  all 2s cubic-bezier(.94,-0.25,.32,1.31);
           -o-transition:  all 2s cubic-bezier(.94,-0.25,.32,1.31);
              transition:  all 2s cubic-bezier(.94,-0.25,.32,1.31);
    }
    .custom:hover {
      -webkit-transform:  translateX(200px);
         -moz-transform:  translateX(200px);
           -o-transform:  translateX(200px);
              transform:  translateX(200px);
    }
  </style>
</head>
<body>
  <div class="linear"></div>
  <div class="custom"></div>
</body>
</html>

demo中红色方块采用预设速度liner呈现匀速直线运动，绿色方块采用自定义cubic-bezier(.94,-0.25,.32,1.31),呈现蓄力加速效果。

bezier曲线图：
在这里插入图片描述
可以在此测试：贝塞尔曲线生成器

声明本文转载自:https://blog.csdn.net/zhaozjc112/article/details/52909172;若侵权可联系我删除,谢谢.

努力吧灰灰兔

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS3 三次贝塞尔曲线(cubic-bezier)

最近在看animation模块，其中animation-timing-function 和 transition-timing-function两个属性来控制动画速度分别提供了ease，liner，ease-in，ease-out，ease-in-out几个预设速度，还可以同过cubic-bezier来自定义速度，想要深入了解CSS3动画，实现随心所欲的动画效果，还是有必要理解下其中的原理。CS...
复制链接

扫一扫