애니메이션에 KUTE.js를 효율적으로 사용하기: 3부, SVG 애니메이션-Word누르다-php.cn

애니메이션에 KUTE.js를 효율적으로 사용하기: 3부, SVG 애니메이션

王林

풀어 주다： 2023-08-29 12:33:16

원래의

1404명이 탐색했습니다.

애니메이션에 KUTE.js를 효율적으로 사용하기: 3부, SVG 애니메이션

이 시리즈의 이전 튜토리얼에서는 KUTE.js를 사용하여 모든 요소의 다양한 CSS 속성에 애니메이션을 적용하는 방법을 보여주었습니다. 그러나 핵심 엔진에서는 SVG 요소와 관련된 속성에 애니메이션을 적용할 수 없습니다. 마찬가지로, 스트로크를 사용하여 SVG를 다른 경로 모양으로 변형하거나 다른 SVG 요소를 그리는 데 애니메이션을 적용할 수 없습니다. 이러한 작업을 수행하려면 KUTE.js SVG 플러그인을 사용해야 합니다.

시작하기 전에 이 튜토리얼의 예제가 제대로 작동하려면 KUTE.js 코어 엔진과 SVG 플러그인을 포함해야 한다는 점을 기억하세요.

변형된 SVG 모양

한 SVG 모양을 다른 SVG 모양으로 변환하는 것은 흔히 접하게 되는 매우 일반적인 기능입니다. KUTE.js SVG 플러그인은 자체 모핑 애니메이션을 쉽게 만드는 데 필요한 모든 것을 제공합니다.

이 라이브러리를 사용하면 세 가지 방법으로 SVG 모양을 변형할 수 있습니다.

fromTo() 메소드를 사용하여 요소의 초기 및 최종 SVG 경로를 지정할 수 있습니다.
to() 方法并避免指定初始路径。在这种情况下，变形的起始值将根据要变形的所选元素的 d 속성 값을 사용하여 결정할 수도 있습니다.
최종 경로를 트윈에 직접 문자열로 전달하는 옵션도 있습니다. 이렇게 하면 SVG에 두 개의 다른 경로가 생기는 것을 방지할 수 있습니다.

으아아아

초기화 중에 라이브러리는 우리가 제공하는 경로를 기반으로 일부 포인트를 샘플링합니다. 그런 다음 이 포인트는 두 개의 서로 다른 배열에 저장됩니다. 마지막으로 이러한 배열은 보간에 사용됩니다. 다양한 경로의 변형 동작을 제어하기 위해 다양한 옵션을 구성할 수 있습니다.

morphPrecision：正如您可能已经猜到的，此选项允许您指定变形的精度或准确度。它被指定为一个数字，值越小精度越高。请记住，更高的精度会带来更高的准确度，但也会损害性能。当您处理 d 属性仅包含 h、l 和 v 이 옵션은 다각형 모양이나 경로에는 적용되지 않습니다. 이 경우 새 경로를 샘플링하는 대신 원래 다각형 경로가 사용됩니다.
reverseFirstPath：您可以将此选项的值设置为 true 以反转第一个形状的绘制路径。它的默认值为 false.
reverseSecondPath：您可以将此选项的值设置为 true 以反转第二个形状的绘制路径。它的默认值也是 false.
morphIndex：有时，路径上的点在变形过程中可能需要覆盖很长的距离。您可以使用 morphIndex 매개변수는 이 동작을 제어합니다. 이 매개변수를 지정하면 모든 점이 가능한 최단 거리로 이동하도록 최종 경로를 회전할 수 있습니다.

지금까지 배운 내용을 활용하여 배터리 아이콘을 북마크 아이콘으로 바꿔 보겠습니다. 상대 경로를 지정하기 위해 소문자 l를 사용한다는 점에 유의하세요. 필수 태그는 다음과 같습니다.

으아아아

다음 JavaScript는 트윈 객체를 생성하고 버튼을 클릭하면 애니메이션을 시작합니다.

으아아아

다음은 위 코드의 실제 작동 모습을 보여주는 데모입니다. 또한 변형 애니메이션이 reverseFirstPath 设置为 true가 될 추가 요소도 추가했습니다. 이는 다양한 구성 옵션이 변형에 미치는 전반적인 영향을 이해하는 데 도움이 됩니다. 두 애니메이션을 자세히 살펴보고 차이점을 확인할 수 있도록 애니메이션 지속 시간을 5초로 설정했습니다.

이전 예에서는 기본 경로에 하위 경로가 없었습니다. 이는 변형을 매우 간단하게 만듭니다. 그러나 항상 그런 것은 아닙니다.

배터리 아이콘과 함께 북마크에 추가 하위 경로를 추가해 보겠습니다. 지금 아이콘을 변경하면 첫 번째 하위 경로만 애니메이션으로 표시되는 것을 볼 수 있습니다. 두 번째 하위 경로는 애니메이션이 시작되면 사라지고 애니메이션이 끝나면 다시 나타납니다. 이 경우 모든 하위 경로에 애니메이션을 적용하는 유일한 방법은 하위 경로를 별도의 경로로 변경하는 것입니다. 예는 다음과 같습니다.

으아아아

애니메이션 SVG 스트로크

또 다른 인기 있는 SVG 관련 애니메이션 효과는 SVG 스트로크를 사용하여 처음부터 미리 정의된 모양을 그리는 것입니다. 이는 로고나 기타 개체의 그림을 애니메이션화하는 데 사용할 수 있습니다. 이 섹션에서는 KUTE.js를 사용하여 Font Awesome 자전거 아이콘에 대한 스트로크 애니메이션을 만드는 방법을 알아봅니다.

在 KUTE.js 中可以通过三种方式对 SVG 笔画进行动画处理。您可以通过将 fromTo 值设置为 0% 0% 和 0% 100% 来设置从 0% 到 100% 的动画。您还可以通过将值设置为 0% 5% 和 95% 100% 等值来绘制 SVG 形状的一部分。最后，您可以将结束值设置为0% 0%，以创建擦除效果而不是绘图效果。

这是我用来为自行车设置动画的 JavaScript 代码：

var wholeAnimation = KUTE.fromTo(
  "#icon",
  { draw: "0% 0%" },
  { draw: "0% 100%" },
  { duration: 10000}
);

var partialAnimation = KUTE.fromTo(
  "#icon",
  { draw: "0% 5%" },
  { draw: "95% 100%" },
  { duration: 10000}
);

var eraseAnimation = KUTE.fromTo(
  "#icon",
  { draw: "0% 100%" },
  { draw: "0% 0%" },
  { duration: 5000}
);

로그인 후 복사

正如您在下面的示例中看到的，您无需担心路径内的多个子路径。 KUTE.js 单独为所有这些子路径设置动画，没有任何问题。动画持续时间用于确定最长路径的动画时间。然后根据其余子路径的长度确定其笔画持续时间。

动画 SVG 变换

我们已经在本系列的第二个教程中学习了如何对 CSS 变换值进行动画处理。 KUTE.js SVG 插件还允许您使用 svgTransform 属性来旋转、平移、缩放或倾斜网页上的不同 SVG 元素。

rotate 属性接受确定旋转角度的单个值。默认情况下，旋转发生在元素的中心点周围，但您可以使用 transformOrigin 属性指定新的旋转中心。

translate 属性接受格式为 translate: [x, y] 或 translate: x 的值。当提供单个值时，y 的值假定为零。

当倾斜元素时，您必须使用 skewX 和 skewY。 SVG 中不支持 skew[x, y]。同样，scale 属性也只接受一个值。相同的值用于在 x 和 y 方向上缩放元素。

下面是一个代码片段，它将所有这些转换应用于矩形和圆形。

var rotation = KUTE.allTo(
  "rect, circle",
  { svgTransform: { rotate: 360 } },
  { repeat: 1, yoyo: true }
);

var scaling = KUTE.allTo(
  "rect, circle",
  { svgTransform: { scale: 1.5 } },
  { repeat: 1, yoyo: true }
);

var translation = KUTE.allTo(
  "rect, circle",
  { svgTransform: { translate: [100, -50] } },
  { repeat: 1, yoyo: true }
);

var skewing = KUTE.allTo(
  "rect, circle",
  { svgTransform: { skewX: 25 } },
  { repeat: 1, yoyo: true }
);

로그인 후 복사

我已将 yoyo 参数设置为 true ，以便在反向播放动画后，变换属性将设置为其初始值。这样，我们就可以通过单击按钮来一次又一次地重播动画。

如果您在演示中按下旋转按钮，您会发现它似乎对圆圈没有任何影响。要观察圆的旋转，您必须对其应用倾斜变换以更改其形状，然后立即单击“旋转”。