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

日期:2021-02-28 类型:科技新闻 

关键词:ps网页版在线制作,静态网页制作方法,微云网页版,怎么制作一个网页,django网页模板

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

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

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

掌握基本的easing

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

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

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

掌握cubic-bezier

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

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

大家能够将这些特性简写为1个,以下所示:

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

你会留意到cubic-bezier贝塞尔涵数有4个值。这4个值是绘图曲线图所需的两对座标。这些座标意味着甚么意思呢?假如你应用过Illustrator,那末操纵曲线图尺寸和方位的空间向量点对你来讲就会很熟习。这便是大家用cubic-bezier贝塞尔涵数绘图曲线图所务必的点。

大家其实不必须了解贝塞尔曲线图身后的全部数学课专业知识。由于有巨头为大家建立了便捷的专用工具,比如LeaVerou的cubic-bezier.com,这个网站中大家能够可视性化的建立1条贝塞尔曲线图并拷贝它的座标点值。我的轮播实际效果的贝塞尔曲线图便是用这个专用工具建立的,它看起来是这样的:

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

在正反两个方位上运用easing

上面的轮播图中运用了正反两个方位的动漫 - 点击左箭头时,当今新项目向右划出主视图,另外下1个新项目向左划入;假如点一下右箭头,就会产生相反的状况。我最开始的假定是,能够简易地翻转动漫使新项目以相反向滑出,以下所示:

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

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

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

你能够看到这两个动漫的觉得彻底不1样。第1个盒子在刚开始加快,而且伴随着动漫的进展迟缓地减速,而第2个盒子刚开始时非常迟缓,随后在终止以前有1个加快的全过程。

大家有两种方式来处理这个难题:

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

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

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

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

那末,反向的座标就根据下面的公式得出:(1 - x2), (1 - y2), (1 - x1), (1 - y1)

在下面的演试中,第3个框是大家必须的实际效果:元素向相反的方位拖动,可是它与正方位的动漫曲线图是1样的。

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

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

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

: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)));
}

如今,假如大家对第1组自变量做任何的变更,反方向曲线图点可能被全自动测算出来。以便在查验和调节编码时更非常容易发现难题,我喜爱将这些新值分派到它们自身的自变量中:

: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;
}

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

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。