KUTE.js로 애니메이션 성능 최적화: 5부, 향상된 이징 기능 및 속성-Word누르다-php.cn

KUTE.js로 애니메이션 성능 최적화: 5부, 향상된 이징 기능 및 속성

王林

풀어 주다： 2023-09-02 23:09:03

원래의

675명이 탐색했습니다.

使用 KUTE.js 优化动画性能：第 5 部分，增强缓动函数和属性

이 시리즈에서는 지금까지 다양한 요소의 CSS 속성에 애니메이션을 적용하는 방법, 다양한 SVG 관련 애니메이션을 만드는 방법, 웹 페이지에서 다양한 요소의 텍스트 콘텐츠에 애니메이션을 적용하는 방법을 배웠습니다. KUTE.js를 사용하여 웹 페이지의 요소에 애니메이션을 적용할 수 있는 또 다른 방법은 다양한 속성의 값을 변경하는 것입니다. 이를 위해서는 프로젝트에 속성 플러그인을 포함해야 합니다.

이 튜토리얼에서는 속성 플러그인을 사용하여 KUTE.js의 다양한 유형의 속성 값에 애니메이션을 적용하는 방법을 배웁니다. 또한 다양한 애니메이션 속도를 제어하는 데 사용할 수 있는 다양한 여유 기능에 대해서도 논의하겠습니다.

이징 기능

실생활의 물체는 직선적으로 움직이는 경우가 거의 없습니다. 속도가 빨라지거나 느려집니다. 가속과 감속도 서로 다른 크기로 발생합니다. 지금까지 모든 애니메이션은 선형적으로 진행되었습니다. 전혀 자연스러운 느낌이 들지 않습니다. 이 섹션에서는 다양한 애니메이션 속도를 제어하기 위해 KUTE.js에서 제공하는 모든 여유 기능에 대해 알아봅니다.

라이브러리의 핵심 완화 기능은 기본적으로 핵심 엔진에 포함되어 있습니다. 애니메이션에 QuadraticInOut 완화를 적용한다고 가정해 보겠습니다. 이는 두 가지 방법으로 달성할 수 있습니다:

으아아아

각 이징 함수에는 애니메이션 중에 요소가 가속되는 방식을 결정하는 고유한 곡선이 있습니다. 正弦 曲线意味着线性加速度。请记住，这与 线性 缓动函数不同。 linear 函数表示动画的线性速度，而正弦曲线表示动画的线性加速速度。换句话说，动画的速度会线性增加或减少。同样， quadratic 意味着 2 的幂加速，cubic 意味着 3 的幂，quartic 意味着 4 的幂，而 quintic 表示 5 的幂。还有 circular 和 exponential 완화 기능.

In、Out 或 InOut 附加到任何缓动函数。值 In 意味着动画将非常缓慢地开始并不断加速直到结束。值 Out 意味着动画将以最大速度开始，然后缓慢减速，直到最后停止。值 InOut를 사용하여 애니메이션이 처음에는 빨라지고 끝에서는 느려진다는 것을 나타낼 수 있습니다.

애니메이션에서 bounce 和 elastic 缓动函数，并附加 In、Out，或者InOut를 사용할 수도 있습니다. 아래 데모에서는 이러한 완화 기능을 모두 다양한 원에 적용하여 애니메이션 속도에 어떤 영향을 미치는지 확인할 수 있습니다.

원하는 애니메이션 속도를 제공하는 핵심 여유 기능이 없을 수도 있습니다. 이 경우 프로젝트의 Experiment 분기에서 3차 베지어 함수를 포함하고 이러한 완화 함수를 사용할 수 있습니다.

마찬가지로 KUTE.js는 Dynamics.js 라이브러리에서 가져온 일부 물리학 기반 여유 기능도 제공합니다. 이러한 모든 여유 기능과 이를 올바르게 사용하는 방법에 대한 자세한 내용은 라이브러리의 여유 기능 페이지에서 확인할 수 있습니다.

애니메이션 속성

SVG의 속성은 숫자와 문자열을 값으로 받아들일 수 있습니다. 문자열은 색상 값이거나 px、em 或 %와 같이 단위 접미사가 있는 숫자일 수 있습니다. 속성 자체의 이름은 하이픈으로 연결된 두 단어로 구성될 수도 있습니다. 이러한 차이점을 염두에 두고 KUTE.js는 다양한 속성의 값을 지정하는 다양한 방법을 제공합니다.

으아아아

보시다시피 접미사 값은 따옴표로 묶어야 합니다. 마찬가지로 이름에 하이픈이 있는 속성은 따옴표로 묶거나 camelCase로 지정해야 합니다.

단위 없는 속성

많은 속성에서 단위 없는 값을 허용합니다. 예를 들어 경로의 行程宽度 可以是无单位的。同样，您不必为 Circle 元素的 r、cx 和 cy 속성은 단위를 지정합니다. 속성 플러그인을 사용하면 이러한 모든 속성을 한 값에서 다른 값으로 애니메이션화할 수 있습니다.

이제 다양한 여유 기능을 사용하는 방법을 알았으므로 다양한 속성을 다양한 속도로 애니메이션화할 수 있습니다. 예는 다음과 같습니다.

var radiusAnimation = KUTE.allTo(
  "circle",
  {
    attr: { r: 75 }
  },
  {
    repeat: 1,
    yoyo: true,
    offset: 1000,
    easing: 'easingCubicIn'
  }
);

var centerxAnimationA = KUTE.to(
  "#circle-a",
  {
    attr: { cx: 500 }
  },
  {
    repeat: 1,
    yoyo: true,
    easing: 'easingCubicInOut',
  }
);

var centerxAnimationB = KUTE.to(
  "#circle-b",
  {
    attr: { cx: 100 }
  },
  {
    repeat: 1,
    yoyo: true,
    easing: 'easingCubicInOut'
  }
);

var centeryAnimation = KUTE.allTo(
  "circle",
  {
    attr: { cy: 300 }
  },
  {
    repeat: 1,
    yoyo: true,
    offset: 1000,
    easing: 'easingCubicOut'
  }
);

로그인 후 복사

第一个补间使用我们在第一个教程中讨论的 allTo() 方法同时对两个圆的半径进行动画处理。如果设置为 true，则 yoyo 属性以相反方向播放动画。

两个圆圈的 cx 属性分别进行动画处理。然而，它们都是由同一个按钮点击触发的。最后，两个圆圈的 cy 属性同时以 1000 毫秒的 offset 进行动画处理。

颜色属性

从版本 1.5.7 开始，KUTE.js 中的属性插件还允许您对 fill、行程 和 stopColor 进行动画处理属性。您可以使用有效的颜色名称或颜色的十六进制值。您还可以提供 RGB 或 HSL 格式的颜色值。

您必须记住的一件重要的事情是，只有当您没有在 CSS 中设置这些属性的值时，动画才会起作用。在下面的演示中，如果我在演示中添加了以下 CSS，则 fill 颜色根本不会有动画效果。

rect {
    fill: brown;
}

로그인 후 복사

我创建的演示非常基础，但您可以通过应用变换和使用更多颜色使其变得更有趣。

后缀属性

许多 SVG 属性，例如 r 和 行程宽度 可以使用或不使用后缀。例如，您可以将 r 的值设置为 10 等数字或 10em 等 em 单位。有一些属性，例如用于颜色停止的 offset 属性，始终要求您添加后缀。在 KUTE.js 中为后缀属性指定值时，请始终确保将该值括在引号内。

在下面的示例中，我对渐变中第一个停止点的偏移值和第二个停止点的颜色进行了动画处理。由于 offset 需要后缀，因此我将值括在引号内。

var offsetAnimation = KUTE.allTo(
  ".stop1",
  {
    attr: { offset: '90%'}
  },
  {
    repeat: 1,
    offset: 1000,
    yoyo: true,
    easing: 'easingCubicIn'
  }
);

var colorAnimation = KUTE.allTo(
  ".stop2",
  {
    attr: { stopColor: 'black'}
  },
  {
    repeat: 1,
    offset: 1000,
    yoyo: true,
    easing: 'easingCubicIn'
  }
);

var scaleAnimation = KUTE.allTo(
  "circle",
  {
    svgTransform: { scale: 2}
  },
  {
    repeat: 1,
    offset: 1000,
    yoyo: true,
    easing: 'easingCubicIn'
  }
);

로그인 후 복사

演示中有三种不同的渐变，每个渐变都有两个颜色停止点，其类名称为 stop1 和 stop2。我还使用 svgTransform 属性应用了缩放变换，我们在本系列的第三个教程中对此进行了讨论。