推荐设备MORE

网站建设平台—深圳石岩微信

网站建设平台—深圳石岩微信

行业知识

怎样翻转CSS中的贝塞尔曲线图的完成方式,

日期:2021-02-19
我要分享
怎样翻转CSS中的贝塞尔曲线图的完成方式,
关注度4 评价 9  网民共享于:  :29 访问数19820次

怎样翻转CSS中的贝塞尔曲线图的完成方式,

最先看来一看着我以前写的一个CSS滚屏动漫实际效果,以便让转换时动漫的衔接更为的光滑我还在animation-timing-function特性中并沒有应用CSS出示的各种各样重要词,而应用了cubic-bezier(贝塞尔)涵数。

贝塞尔涵数乍一看会令人疑惑摸不到大脑,但假如应用恰当,它能够为动漫的客户感受增加一种更棒的觉得。

在搭建这一滚屏动漫的情况下,我观念到当我们给一页加上了显示信息的贝塞尔涵数时,它前一页掩藏的贝塞尔涵数则是反方向的。我认为大家共享本文的內容是是非非常非常值得的,由于建立一个贝塞尔曲线图并翻转它将会看上去很繁杂,但具体上十分的简易。

掌握基本的easing

最先,Easing这一词用于叙述原素动漫在時间网上的加快与降速节奏感。大家能够将其绘图成一个数据图表,在其中x轴是時间,y轴是动漫的进展。linear是沒有加快或降速(一直以同样的速率移动)的图型,主要表现在图上便是一条平行线:

非线形的Easing会让动漫更当然、更真实。大家能够对CSS中的transition和animation运用各种各样的easing,大家能够将这种值设定在transition-timing-function或是animation-timing-function特性上。一共有五个重要字能够设定:

linear 上边早已详细介绍了 ease-in 动漫刚开始时比较慢,并伴随着它的开展而加快。 ease-out 动漫刚开始迅速,最终降速。 ease-in-out 动漫刚开始迟缓,正中间加快,最终降速。 ease 默认设置值,与ease-in-out的动漫全过程反过来。

掌握cubic-bezier

假如上边详细介绍的重要字值也不合适大家的动漫,大家可使用cubic-bezier贝塞尔涵数建立自定的曲线图。下边是一个案子:

.my-element {
 animation-name: slide;
 animation-duration: 3s;
 animation-timing-function: cubic-bezier(0.45, 0.25, 0.60, 0.95);
}

大家能够将这种特性缩写为一个,以下所显示:

.my-element {
 animation: slide 3s cubic-bezier(0.45, 0.25, 0.60, 0.95);
}

你能留意到cubic-bezier贝塞尔涵数有四个值。这四个值是绘图曲线图需要的两对座标。这种座标意味着啥意思呢?假如你应用过Illustrator,那麼操纵曲线图尺寸和方位的空间向量点对你去说便会很了解。就是我们用cubic-bezier贝塞尔涵数绘图曲线图所务必的点。

大家其实不必须了解贝塞尔曲线图身后的全部数学课专业知识。由于挺大佬为大家建立了便捷的专用工具,,这一网站内大家能够可视性化的建立一条贝塞尔曲线图并拷贝它的座标点值。我的滚屏实际效果的贝塞尔曲线图便是用这一专用工具建立的,它看上去是那样的:

在这里里,能看到大家必须的2个点:cubic-bezier(x1, y1, x2, y2)。

在正反2个方位上运用easing

上边的滚屏图上运用了正反2个方位的动漫 - 点击左箭头符号时,当今新项目向右划出主视图,同当下一个新项目向左划入;假如点一下右箭头符号,便会产生反过来的状况。我非常初的假定是,能够简易地翻转动漫使新项目以反过来方位滑出,以下所显示:

.my-element--reversed {
 animation: slide 3s cubic-bezier(0.45, 0.25, 0.60, 0.95) reverse;
}

这儿有一个难题:给animation加上reverse也翻转了easing曲线图!因此,如今我的动漫在一个方位看上去非常好,但在反向上不是对的。

下边的演试中,第一个框显示信息正方位的动漫,第二个框显示信息加上reverse后的状况。

你可以以见到这2个动漫的觉得彻底不一样。第一个小盒子在刚开始加快,而且伴随着动漫的进度迟缓地降速,而第二个小盒子刚开始时非常迟缓,随后在终止以前有一个加快的全过程。

大家有二种方式来处理这一难题:

建立一个新的keyframe animation来显示信息动漫,随后设定为同样的easing。针对简易的动漫那样设定没法厚非,可是假如碰到繁杂的动漫应该怎么办呢?建立反方向的动漫必须做大量的工作中,并且非常容易错误。 大家可使用同样的keyframe animation(并设定animation-direction:reverse)并翻转贝塞尔曲线图,那样就完成了在正反2个方位上应用同一个easing的实际效果。这类方式其实不难。

翻转贝塞尔曲线图,相匹配在座标轴中便是将总体图型转动180度:

根据简易的数学课测算便可以获得翻转后的点座标,实际方式是:互换2个座标点,并将每一个值都用1减掉。

比如,正方位的座标是:x1, y1, x2, y2

那麼,反向的座标就根据下边的公式计算得到:(1 - x2), (1 - y2), (1 - x1), (1 - y1)

在下边的演试中,第三个框就是我们必须的实际效果:原素向反过来的方位拖动,可是它与正方位的动漫曲线图是一样的。

大家看来看怎样测算反方向的贝塞尔曲线图。

用CSS自定特性来测算反方向曲线图

大家可使用CSS自定属来测算新的曲线图!最先将每一个值赋给一个自变量:

:root {
 --x1: 0.45;
 --y1: 0.25;
 --x2: 0.6;
 --y2: 0.95;
 --originalCurve: cubic-bezier(var(--x1), var(--y1), var(--x2), var(--y2));
}

随后大家可使用这种自变量来测算新值:

:root {
 --reversedCurve: cubic-bezier(calc(1 - var(--x2)), calc(1 - var(--y2)), calc(1 - var(--x1)), calc(1 - var(--y1)));
}

如今,假如大家对第一组自变量做一切的变更,反方向曲线图点可能被全自动测算出去。以便在查验和调节编码时更非常容易发觉难题,我很喜欢将这种新值分派到他们自身的自变量中:

:root {
 /* 顺向初始值 */
 --x1: 0.45;
 --y1: 0.25;
 --x2: 0.6;
 --y2: 0.95;
 --originalCurve: cubic-bezier(var(--x1), var(--y1), var(--x2), var(--y2));
 /* 反方向测算值 */
 --x1-r: calc(1 - var(--x2));
 --y1-r: calc(1 - var(--y2));
 --x2-r: calc(1 - var(--x1));
 --y2-r: calc(1 - var(--y1));
 --reversedCurve: cubic-bezier(var(--x1-r), var(--y1-r), var(--x2-r), var(--y2-r));
}

如今剩余的便是将新的曲线图运用到反方向动漫中:

.my-element--reversed {
 animation: slide 3s var(--reversedCurve) reverse;
}

以便更形象化并切可视性化的保证这种,我建立了一个实用工具来测算一个贝塞尔曲线图的反方向值。键入初始座标值便可以全自动得到反方向曲线图的值: Reverse cubic-bezier专用工具

之上便是文中的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多的适用登博实例教程。


dengb.TechArticle怎样翻转CSS中的贝塞尔曲线图的完成方式, 最先看来一看着我以前写的一个CSS滚屏动漫实际效果,以便让转换时动漫的衔接更为的光滑我还在animatio...