今天就跟大家聊聊有关怎么在CSS中反转贝塞尔曲线,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
CSS是一种用来表现HTML或XML等文件样式的计算机语言,主要是用来设计网页的样式,使网页更加美化。它也是一种定义样式结构如字体,颜色,位置等的语言,并且CSS样式可以直接存储于HTML网页或者单独的样式单文件中,而样式规则的优先级由CSS根据这个层次结构决定,从而实现级联效果,发展至今,CSS不仅能装饰网页,也可以配合各种脚本对于网页进行格式化。
首先来看一看我之前写的一个CSS轮播动画效果,为了让切换时动画的过渡更加的平滑我在animation-timing-function属性中并没有使用CSS提供的各种关键词,而使用了cubic-bezier(贝塞尔)函数。
贝塞尔函数乍一看会让人困惑摸不着头脑,但如果使用得当,它可以为动画的用户体验增添一种更棒的感觉。
在构建这个轮播动画的时候,我意识到当我给一页添加了显示的贝塞尔函数时,它前一页隐藏的贝塞尔函数则是反向的,我觉得我们分享这篇文章的内容是非常值得的,因为创建一个贝塞尔曲线并反转它可能看起来很棘手,但实际上非常的简单。
<>强了解基础的宽松
首先,宽松这个词用来描述元素动画在时间线上的加速与减速节奏。我们可以将其绘制成一个图表,其中x轴是时间,y轴是动画的进度.linear是没有加速或减速(一直以相同的速度移动)的图形,表现在图上就是一条直线:
非线性的宽松政策会让动画更自然,更逼真。我们可以对CSS中的过渡和动画应用各种的宽松政策,我们可以将这些值设置在transition-timing-function或者animation-timing-function属性上。总共有五个关键字可以设置:
线性,mdash;上面已经介绍了
<李>在,mdash;动画开始时很慢,并随着它的进行而加速。
<李>打发走,mdash;动画开始很快,最后减速。
<李>ease-in-out, mdash;动画开始缓慢,中间加速,最后减速。
<李>缓解,mdash;默认值,与ease-in-out的动画过程相反。
<>强了解cubic-bezier
如果上面介绍的关键字值都不适合我们的动画,我们可以使用cubic-bezier贝塞尔函数创建自定义的曲线。下面是一个例子:
我们可以将这些属性简写为一个,如下所示:
你会注意到cubic-bezier贝塞尔函数有四个值。这四个值是绘制曲线所需的两对坐标。这些坐标代表什么意思呢?如果你使用过Illustrator,那么控制曲线大小和方向的向量点对你来说就会很熟悉。这就是我们用cubic-bezier贝塞尔函数绘制曲线所必须的点。
我们并不需要知道贝塞尔曲线背后的所有数学知识。因为有大佬为我们创建了方便的工具,例如LeaVerou的cubic-bezier.com,这个网站中我们可以可视化的创建一条贝塞尔曲线并复制它的坐标点值。我的轮播效果的贝塞尔曲线就是用这个工具创建的,它看起来是这样的:
在这里,可以看到我们需要的两个点:cubic-bezier (x1, y1, x2, y2)。
<强>在正反两个方向上应用宽松
上面的轮播图中应用了正反两个方向的动画——单击左箭头时,当前项目向右滑出视图,同时下一个项目向左滑入,如果点击右箭头,就会发生相反的情况。我最初的假设是,可以简单地反转动画使项目以相反方向滑出,如下所示:
这里有一个问题:给动画添加反向也反转了宽松曲线!所以,现在我的动画在一个方向看起来很好,但在反方向上是不对的。
