摘要：根据方程的最高阶数，可以分为线性贝塞尔曲线二次贝塞尔曲线三次贝塞尔曲线以及更高次的贝塞尔曲线。贝塞尔曲线扫盲在中使用的函数，是一个三次贝塞尔曲线函数。三次贝塞尔曲线中四个点，在中第一个点和最后一个点是固定坐标的和是传入函数中的参数的。
前言
上一篇 css3 动画（一） transition 中，介绍了 transition 的用法。其中 transition 包含四个可设置的属性：
有过渡效果的属性
过渡时长
过渡函数？
过渡时延
其中，1、2 以及 4 都挺好理解的，但是 3 是个什么东西？其实 3 是 css3 中的 timing-function，其中 3 有两种类型的值：
cubic-bezier(x1, y1, x2, y2)：立方贝塞尔曲线
steps(number_of_steps, direction)
本篇就总结一下 cubic-bezier(x1, y1, x2, y2)：立方贝塞尔曲线
贝塞尔曲线简介贝塞尔曲线（Bezier curve）是计算机图形学中重要的参数曲线，它通过一个方程来描述一条曲线。根据方程的最高阶数，可以分为线性贝塞尔曲线、二次贝塞尔曲线、三次贝塞尔曲线以及更高次的贝塞尔曲线。
贝塞尔曲线扫盲
在 css3 中使用的 cubic-bezier() 函数，是一个 三次贝塞尔曲线函数。
三次贝塞尔曲线中四个点，在 cubic-bezier() 中：
第一个点 p0(0, 0)和最后一个点 p3(1, 1)是固定坐标的
p1(x1, y1) 和 p2(x2, y2) 是传入 cubic-bezier() 函数中的参数的。其中 x∈[0, 1]，y 可以不在 [0, 1] 区间内，但最大值最好不要大于 1.5，最小值不要小于 -0.5
0 和 1 分别表示 0% 和 100%
cubic-bezier(x1, y1, x2, y2) 接受的参数便是 p1(x1, h1) 和 p2(x2, y2) 的坐标。
那我们怎么获取我们想要的贝塞尔曲线呢？进这个 网站
css3 贝塞尔曲线代表的含义在上面那个 网站 中，我们可以通过拖拽 p1 和 p2 点，来改变两点的坐标，从而产生一条曲线。
那么这条曲线代表什么含义呢？
横坐标：时间。时间是匀速增加的
纵坐标：进度。随着时间的增加，进度也会增加
斜率：速度
由于 时间是匀速增加的，进度增加的快慢是受斜率（速度）影响的。所以这是一条表示进度变化快慢的速度曲线
这个 进度 在 css 中，实际指的就是样式变化前后的值。如：
width 从 100px 变为 200px，纵坐标的起点就为 100px，终点为 200px
opacity 从 0 变为 1，纵坐标的起点就为 0，终点为 1
...
transition + cubic-bezier() 实现平抛动画最终效果如下：
https://codepen.io/reai3041/p...
我们知道，平抛运动可以分解为两个方向的运动：
水平方向：匀速运动
垂直方向：加速度不变的匀加速运动
这样，我们就可以分解为水平和垂直方向上的 过渡效果：
.ball {
width: 10px;
height: 10px;
border: 1px solid #000;
border-radius: 50%;
position: absolute;
left: 80px;
top: 30px;
}
/* 终点 */
.ball.end {
left: 180px;
top: 230px;
transition: left 0.2s linear, top 0.2s cubic-bezier(.48,0,.94,.28);
}
通过改变 left 和 top 值：
left 应用 linear 速度曲线（匀速）
top 应用 cubic-bezier(.48,0,.94,.28) 速度曲线（加速度不变的加速运动）
来获得平抛运动的动画效果
其中，cubic-bezier() 函数的参数，可以在 网站 里自定义点的位置，然后得到自己想要的速度变化曲线。
在平抛运动垂直方向的速度曲线大概是这样子的：
这样，我们就知道了 cubic-bezier() 函数的参数（图片中的这条曲线，其实就可以看做是实际的平抛的曲线）
代码及效果：
https://codepen.io/reai3041/p...
css3 中的贝塞尔曲线其实很简单：一条以 时间为横坐标，以 进度为纵坐标 的 和速度相关 的曲线，它表示了 过渡/动画 中间状态的 变化快慢。
下一篇：css3 动画（三）animation 简介
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/116827.html
摘要：动画曲线的应用了解了如何用贝塞尔曲线来指定动画曲线后，很多动画涉及到速度方面的效果就可以实现了，例如小车加速刹车，弹簧动画等速度轨迹都可以根据自己的需要来进行定制。 贝塞尔曲线又叫贝兹曲线，在大学高数中一度让我非常头疼。前阵子练手写动画的时候，发现贝塞尔曲线可以应用于轨迹的绘制以及定义动画曲线。 本文就来探究一下，贝塞尔曲线到底是个什么样的存在。 贝塞尔曲线原理 贝塞尔曲线由n个点来决...
摘要：但目前白名单申请途径已经关闭。目前在安卓有一种同层播放器的解决方案。可解决安卓机自动全屏以及视频播放完毕会跳出广告的问题，并且可以实现交互。 本文在H5动效的常见制作手法的基础上，对相印的H5动效制作手法进行了扩展和整理，并结合案例谈谈怎么将其做得生动。 视频类 1、体验案例 视频类h5可以带给用户动效逼真，流畅的体验。虽然说制作视频的难度较大，但是瑕不掩瑜，一支视频可以尽可能地创造出...
摘要：但目前白名单申请途径已经关闭。目前在安卓有一种同层播放器的解决方案。可解决安卓机自动全屏以及视频播放完毕会跳出广告的问题，并且可以实现交互。 本文在H5动效的常见制作手法的基础上，对相印的H5动效制作手法进行了扩展和整理，并结合案例谈谈怎么将其做得生动。 视频类 1、体验案例 视频类h5可以带给用户动效逼真，流畅的体验。虽然说制作视频的难度较大，但是瑕不掩瑜，一支视频可以尽可能地创造出...
摘要：但目前白名单申请途径已经关闭。目前在安卓有一种同层播放器的解决方案。可解决安卓机自动全屏以及视频播放完毕会跳出广告的问题，并且可以实现交互。 本文在H5动效的常见制作手法的基础上，对相印的H5动效制作手法进行了扩展和整理，并结合案例谈谈怎么将其做得生动。 视频类 1、体验案例 视频类h5可以带给用户动效逼真，流畅的体验。虽然说制作视频的难度较大，但是瑕不掩瑜，一支视频可以尽可能地创造出...
摘要：规定动画完成一个周期所花费的秒或毫秒。等同于贝塞尔曲线平滑过渡。等同于贝塞尔曲线由慢到快再到慢。等同于贝塞尔曲线等同于等同于接受两个参数的步进函数。特定的贝塞尔曲线类型，个数值需在区间内规定动画何时开始。 实现如图所示的点点点loading效果：showImg(https://segmentfault.com/img/bVM22d?w=146&h=46); 一：CSS3 animati...
阅读 3381·2023-04-26 02:05
阅读 1767·2021-11-19 11:30
阅读 3886·2021-09-30 09:59
阅读 2991·2021-09-10 10:51
阅读 742·2021-09-06 15:01
阅读 2393·2021-09-01 10:30
阅读 1171·2021-08-11 11:20
阅读 2449·2019-08-30 15:54
