贝塞尔曲线广泛应用于各种绘图相关的软件中,圆和弧都是规则的曲线图形,而很多项目中还需要绘制一些不规则的曲线图形,这时候就需要用到贝塞尔曲线。贝赛尔曲线又称贝兹曲线,是电脑图形学中相当重要的参数曲线。贝塞尔曲线于 1962 年由法国工程师皮埃尔·贝塞尔(Pierre Bézier)所发表,他运用贝塞尔曲线来为汽车的主体进行设计。
贝塞尔曲线的特点就是它的任意处都是光滑的,数据点之间的曲线任意值都不能大于数据点值同时也不存在极值点(要么是上升曲线要么下降曲线,不可以是又上升又下降)
贝塞尔曲线又分为线性贝塞尔曲线、二次贝塞尔曲线、三次贝塞尔曲线。
线性贝塞尔曲线 ,实际上就是一条连接两点的直线段
二次贝塞尔曲线 ,就是两点间的一条 抛物线 ,利用一个控制点来控制 抛物线 的形状。
三次 贝塞尔曲线 ,则需要一个起点,一个终点,两个控制点来控制 曲线 的形状(其中三次贝塞尔曲线的灵活度是最高的)。
photoShop里面有一个工具叫做钢笔工具,用他绘制的线段就可以在线段的起点和终点出各添加一个锚点,通过设置起点和终点锚点的相对位置来控制这个线段的形状,
如果这条线段没有添加锚点或者锚点的方向平行于线段的方向,此时这条线就是直线,就是线性贝塞尔曲线
如果只添加了一条锚点改变了这条线段的形状,就是二次贝塞尔曲线
如果添加了两条锚点改变了这条线段的形状,就是三次贝塞尔曲线
前端css里面有个transition-timing-function属性可以设置缓动函数,他的值可以自定义缓
函数cubic-bezier(, , , ),每个值的取值范围为-1~1,其中x1,y1表示线
起点的锚点位置,x2,y2表示线段终点的冒点位置,从而根据自己的需求生成运动速度的曲
函数,还可以在http://yisibl.github.io/cubic-bezier/这个网站根据自己的参数预览运动曲线
页面更新:2024-06-17
本站资料均由网友自行发布提供,仅用于学习交流。如有版权问题,请与我联系,QQ:4156828
© CopyRight 2020-2024 All Rights Reserved. Powered By 71396.com 闽ICP备11008920号-4
闽公网安备35020302034903号