집 > 기사 > 웹 프론트엔드 > CSS를 사용하여 베지어 곡선 만들기

CSS를 사용하여 베지어 곡선 만들기

一个新手원래의: 2017-10-08 09:32:183033검색

머리말

cubic-bezier를 이해하기 전에 CSS3의 애니메이션 효과인 animation-timing-function과 transition-An에 대해 알아야 합니다. 타이밍 기능의 중요한 내용.

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

本体

简介

cubic-bezier 又称三次贝塞尔，主要是为 animation 生成速度曲线的函数，规定是cubic-bezier(bc6fe54a88198feaad90e17e912675f1, 22e181b6d31cf86e9ad22800df920dd0, be787f7ac9828fa514a83e4c791ae092, f4bf86c47d72eed593f57bb329a5f9f8)。

我们可以从下图中简要理解一下 cubic-bezier：

从上图我们需要知道的是 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 轴任意），最后形成的曲线就是动画的速度曲线。

使用

在测试例子中：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <title>Document</title>

  <style>
    .animation {
      width: 50px;
      height: 50px;
      background-color: #ed3;
      -webkit-transition:  all 2s;
           -o-transition:  all 2s;
              transition:  all 2s;
    }
    .animation:hover {
      -webkit-transform:  translateX(100px);
          -ms-transform:  translateX(100px);
           -o-transform:  translateX(100px);
              transform:  translateX(100px);
    }
  </style>
</head>
<body>
  <p class="animation"></p>
</body>
</html>

我们可以在浏览器中看到，当鼠标移到元素上时，元素开始向右移动，开始比较慢，之后则比较快，移开时按原曲线回到原点。

在例子中，当我们不为 transition 添加 cubic-bezier 或是其他 timing-function 时，默认的速度曲线是ease，此时的速度曲线是：

那么让我们在代码中加入 cubic-bezier(.17, .86, .73, .14)：

....animation {
  ...  -webkit-transition:  
  all 2s cubic-bezier(.17, .86, .73, .14);       
  -o-transition:  all 2s cubic-bezier(.17, .86, .73, .14);          
  transition:  all 2s cubic-bezier(.17, .86, .73, .14);
}
...

再刷新页面观察效果，会看到动画在执行过程中有一段很缓慢的移动，前后的速度相似，此时的运动曲线是：

几个常用的固定值对应的 `cubic-bezier`Ontology

소개

cubic-bezier는 cubic-bezier라고도 하는데 주로 animation 생성 속도 때문에 곡선의 함수는 cubic-bezier(<x1>, <y1>, <x2>, <y2>)</y2></x2></y1></x1>로 지정됩니다.

cubic-bezier

위 그림에서 우리가 알아야 할 것은 cubic-bezier의 추출입니다. code> 값 범위:

P1: 동적 값(x1, y1 )

P2: 동적 값(x2, y2)

X축

cubic-bezier

Y축

범위가 1인 좌표축에 직선을 놓고 가운데에서 두 점을 빼내는 것입니다(X축의 값 범위는 [0, 1 ], Y축은 임의적임), 형성된 최종 곡선은 애니메이션의 속도 곡선입니다

테스트 예에서 🎜🎜를 사용하세요:

ease：cubic-bezier(.25, .1, .25, 1)
liner：cubic-bezier(0, 0, 1, 1) / cubic-bezier(1, 1, 0, 0)
ease-in：cubic-bezier(.42, 0, 1, 1)
ease-out：cubic-bezier(0, 0, .58, 1)
ease-in-out：cubic-bezier(.42, 0, .58, 1)
In Out . Back（来回的缓冲效果）：cubic-bezier(0.68, -0.55, 0.27, 1.55)

🎜 브라우저에서 마우스가 요소 위로 이동하면 요소가 처음에는 천천히 오른쪽으로 이동하기 시작하고, 그런 다음 상대적으로 빠릅니다. 멀리 이동할 때 원래 곡선을 눌러 원점으로 돌아갑니다. 🎜예제에서 transition에 cubic-bezier 또는 기타 timing-function을 추가하지 않으면 기본 속도는 곡선은 ease이고 이때의 속도 곡선은 다음과 같습니다.
🎜그래서 cubic-bezier( . 17, .86, .73, .14)：rrreee🎜페이지를 새로 고쳐서 효과를 관찰하면 실행 과정에서 애니메이션이 매우 느리게 움직이는 것을 볼 수 있으며 전후의 속도도 다릅니다. 모션 곡선은 다음과 같습니다.

cubic-bezier 값과 속도 곡선🎜🎜🎜rrreee🎜🎜

위 내용은 CSS를 사용하여 베지어 곡선 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：CSS 선택기의 점(.)에 대한 솔루션다음 기사：CSS 선택기의 점(.)에 대한 솔루션

CSS를 사용하여 베지어 곡선 만들기

머리말

本体

简介

使用

几个常用的固定值对应的 cubic-bezierOntology

cubic-bezier 값과 속도 곡선🎜🎜🎜rrreee🎜🎜

관련 기사

几个常用的固定值对应的 `cubic-bezier`Ontology