3分钟带你轻松了解贝塞尔曲线(cubic-bezier)

2024-06-15 18:56:47

1、前言

在了解 cubic-bezier 之前，你需要对 CSS3 中的动画效果有所认识，它是 animation-timing-function 和 transition-timing-function 中一个重要的内容。

2、定义与用法

ubic-bezier() 函数定义了一个贝塞尔曲线(Cubic Bezier)。

贝塞尔曲线曲线由四个点 P0，P1，P2 和 P3 定义。P0 和 P3 是曲线的起点和终点。P0是（0,0）并且表示初始时间和初始状态，P3是（1,1）并且表示最终时间和最终状态。

从上图我们需要知道的是 cubic-bezier 的取值范围:

P0：默认值 (0, 0)
P1：动态取值 (x1, y1)
P2：动态取值 (x2, y2)
P3：默认值 (1, 1)

我们需要关注的是 P1 和 P2 两点的取值，而其中 X 轴的取值范围是 0 到 1，当取值超出范围时 cubic-bezier 将失效；Y 轴的取值没有规定，当然也毋须过大。

最直接的理解是，将以一条直线放在范围只有 1 的坐标轴中，并从中间拿出两个点来拉扯（X 轴的取值区间是 [0, 1]，Y 轴任意），最后形成的曲线就是动画的速度曲线。

cubic-bezier() 可用于 animation-timing-function 和 transition-timing-function 属性。

3、语法

cubic-bezier(x1,y1,x2,y2)

值	描述
x1,y1,x2,y2	必需。数字值，x1 和 x2 需要是 0 到 1 的数字。

4、案例分析

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>cubic-bezier</title><style type="text/css">.box{margin: 0 auto;width: 100px;height: 100px;text-align: center;vertical-align: center;}.box:hover{margin: auto;width: 100px;height: 100px;background-color: #41ffaa;transition: width 2s;transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);}</style></head><body><div class="box">贝塞尔曲线</div></body>
</html>

3分钟带你轻松了解贝塞尔曲线(cubic-bezier)相关推荐

贝塞尔曲线（Bezier）之 QQ 消息拖拽动画效果
博主声明: 转载请在开头附加本文链接及作者信息,并标记为转载.本文由博主威威喵原创,请多支持与指教. 本文首发于此博主:威威喵 | 博客主页:https://blog.csdn.net/ ...
贝塞尔曲线（Bezier）之水波纹的手机充电动画效果（一）
博主声明: 转载请在开头附加本文链接及作者信息,并标记为转载.本文由博主威威喵原创,请多支持与指教. 本文首发于此博主:威威喵 | 博客主页:https://blog.csdn.net/ ...
贝塞尔曲线（Bezier）之花束直播爱心点赞动画效果
博主声明: 转载请在开头附加本文链接及作者信息,并标记为转载.本文由博主威威喵原创,请多支持与指教. 本文首发于此博主:威威喵 | 博客主页:https://blog.csdn.net/ ...
贝塞尔曲线（Bezier）之水波纹的手机充电动画效果（二）
博主声明: 转载请在开头附加本文链接及作者信息,并标记为转载.本文由博主威威喵原创,请多支持与指教. 本文首发于此博主:威威喵 | 博客主页:https://blog.csdn.net/ ...
贝塞尔曲线（Bezier）之爱心点赞曲线动画效果
博主声明: 转载请在开头附加本文链接及作者信息,并标记为转载.本文由博主威威喵原创,请多支持与指教. 本文首发于此博主:威威喵 | 博客主页:https://blog.csdn.net/ ...
【Cocos2d-x】使用贝塞尔曲线（Bezier）实现精灵抛物线运动
Cocos2d-x中的贝塞尔曲线在Cocos2d-x中贝塞尔曲线运动的封装类为CCBezierTo和CCBezierBy. 这两个Action都需要传入一个参数ccBezierConfig,这是一个 ...
贝塞尔曲线（Bezier Curve）原理及公式推导
1. 定义贝塞尔曲线(Bezier curve),又称贝兹曲线或贝济埃曲线,是应用于二维图形应用程序的数学曲线.一般的矢量图形软件通过它来精确画出曲线,贝兹曲线由线段与节点组成,节点是可拖动的支点, ...
贝塞尔曲线（Bezier Curve）原理、公式推导及matlab代码实现
1. 定义贝塞尔曲线(Bezier curve),又称贝兹曲线或贝济埃曲线,是应用于二维图形应用程序的数学曲线.一般的矢量图形软件通过它来精确画出曲线,贝兹曲线由线段与节点组成,节点是可拖动的支点, ...
docker 删除包含关键字的镜像_30分钟带你轻松掌握Docker原理
前言 Docker是什么? Docker是Go语言开发实现的容器.2013年发布至今,备受推崇.相关文档.学习资料十分详尽.近期有docker相关项目,得重新学习一下.博客以笔记为什么要使用 Doc ...

最新文章

热门文章