KUTE.js를 사용한 효율적인 텍스트 애니메이션: 4부, 텍스트 애니메이션

이 시리즈의 두 번째 튜토리얼에서는 KUTE.js를 사용하여 웹 페이지 요소의 다양한 CSS 속성에 애니메이션을 적용하는 방법을 배웠습니다. 모든 속성을 변환하는 방법과 border-radius 和 border-color 等属性设置动画。您还可以使用 CSS 插件对 CSS 属性进行动画处理，例如 font-size、line-height、letter-spacing 和 字间距을 배웠습니다.

KUTE.js에는 카운트다운과 같이 숫자를 늘리거나 줄이거나 문자열을 문자별로 작성하여 다양한 요소 내의 텍스트에 애니메이션을 적용할 수 있는 텍스트 플러그인도 있습니다.

이 튜토리얼에서는 KUTE.js의 CSS와 텍스트 플러그인을 사용하여 웹 페이지의 다양한 요소 내에서 텍스트에 애니메이션을 적용하는 방법을 배웁니다.

애니메이션 CSS 텍스트 속성

앞서 언급했듯이 KUTE.js CSS 플러그인을 사용하면 네 가지 텍스트 관련 CSS 속성에 애니메이션을 적용할 수 있습니다. 이러한 속성은 font-size、line-height、letter-spacing 和 word-spacing입니다. 또한 첫 번째 튜토리얼에서 논의한 핵심 엔진의 일부 속성을 사용하여 개별 문자에 애니메이션을 적용할 것입니다. 아래 데모에서 이러한 모든 개념을 함께 사용하여 진동하는 HELLO 텍스트를 만드는 방법을 살펴보겠습니다.

위 애니메이션을 생성하는 데 사용된 코드는 다음과 같습니다.

으아아아

단어의 각 문자는 span 태그 내에 포함되며 고유한 클래스를 갖습니다. 첫 번째 트윈 애니메이션은 200밀리초의 오프셋을 사용하여 모든 문자의 색상을 흰색에서 빨간색으로 변경합니다. span 标记内，并具有自己独特的类。第一个补间动画将所有字母的颜色从白色变为红色，偏移量为 200 毫秒。这也是点击开始动画后播放的第一个动画。 animateFontSize 补间已链接到 animateColor。这样，一旦彩色动画结束，font-size애니메이션 시작

을 클릭한 후 재생되는 첫 번째 애니메이션이기도 합니다. animateFontSize 트윈은 animateColor에 연결됩니다. 이렇게 하면 컬러 애니메이션이 끝나면 font-size 애니메이션이 시작됩니다.

repeat 和 yoyo 的属性来控制动画的行为。 yoyo현재 반복되는 애니메이션을 반전시키기 위해

라는 두 가지 속성을 사용했다는 것을 눈치채셨을 것입니다. 이렇게 하면 애니메이션 중에 다양한 속성 값이 갑자기 바뀌는 것을 방지하여 부드럽게 보이도록 할 수 있습니다.

font-size 动画已与 animateSkewing 链接，它将所有字母倾斜 -15 度。 skewX 和 skewY

코어 엔진 자체에서 속성을 사용할 수 있습니다.

animateSkewing。这样，您可以确保倾斜动画结束后所有链接的颜色动画都开始播放。最后，lettersSqueezed다른 글자의 색상을 애니메이션화하는 데 사용된 모든 트윈이 이제

에 연결되었습니다. 트위너는 다른 글자 사이의 간격을 15픽셀만큼 줄입니다.

다양한 속성 조합을 사용하면 더욱 흥미로운 효과를 만들 수 있습니다.

애니메이션 숫자

KUTE.js에서 숫자에 애니메이션을 적용할 수도 있습니다. 그러나 애니메이션을 생성하려면 추가 텍스트 플러그인을 포함해야 합니다.

디지털 애니메이션의 과정은 사실 매우 간단합니다. 애니메이션 번호가 표시되어야 하는 선택기와 애니메이션이 끝나야 하는 최종 번호를 지정하기만 하면 됩니다.

2016년 미국 공항의 총 개수를 애니메이션을 활용한 기본 예시입니다.

으아아아 duration、repeat 和 delay또한

와 같은 일반적인 트위닝 옵션을 적용하여 애니메이션 동작을 사용자 정의할 수도 있습니다. 방금 작성한 코드는 다음과 같은 애니메이션을 생성합니다:

문자별로 텍스트 쓰기

이 효과는 매우 인기가 높으며 많은 웹사이트에서 찾을 수 있습니다. KUTE.js 텍스트 플러그인을 사용하면 한 번에 한 문자씩 원래 문장을 대체하는 새 문장을 지정할 수 있습니다.

임의의 문자는 초기 문자를 최종 값으로 바꾸기 전에 방금 본 숫자 예와 같이 애니메이션됩니다. 내장된 CodePen 데모를 통해 더 명확해집니다:

위의 애니메이션을 생성하기 위해 작성해야 하는 코드는 다음과 같습니다. 🎜

var animateHeading = KUTE.to(
  heading,
  { text: '70% Surface of Earth is Covered with Water.' },
  { duration: 5000}
);

startButton.addEventListener(
  "click",
  function() {
    animateHeading.start();
  },
  false
);

整个句子的人物动画在5秒内完成。您可能已经注意到，首句和末句不需要具有相同数量的字符。这给我们在设置 text 参数的值时提供了很大的自由度。

您还可以在 text 参数的值中包含 HTML 标记，然后使用 CSS 更改刚刚设置动画的文本的外观。

var animateHeading = KUTE.to(
  heading,
  { text: '70% SURFACE OF <span class="earth">EARTH</span> IS COVERED WITH <span class="water">WATER</span>.' },
  { duration: 10000, textChars: 'upper' }
);

地球出现后，地球的出现将会延迟。发生这种情况是因为插件还使用相同的角色动画编写 <span class="earth"></span> ，但这些角色实际上对用户来说都不可见。根据您的喜好，延迟可能是理想的，也可能是不理想的。

动画期间显示的中间字符默认为小写字母值。当您想要设置动画的字符均为大写字母或数字时，这可能会成为问题。动画使用哪些中间字符由 textChars 参数的值决定。它接受六个不同的值：

• alpha：在这种情况下，中间字符将为小写字母。
• upper：在这种情况下，中间字符将为大写字母。
• numeric：在这种情况下，数字字符用于动画。这与对数字进行动画处理不同，因为值不会按顺序增加。
• symbols：在这种情况下，插件将使用 #、% 和 $ 等字符来表示动画。
• all：如果您希望中间字符是字母、数字和符号的混合，则可以使用此值。
• 如果没有其他方法适合您，KUTE.js 可以让您选择指定动画期间应使用的自定义字符列表。

以下示例演示如何使用大写中间字符为标题内的文本添加动画效果。

最终想法

在本教程中，您学习了如何使用 KUTE.js 中的 CSS 和文本插件来为元素内的文本添加动画效果。当你想要为文本的外观添加动画效果时，你需要使用 CSS 插件。这将允许您使用 font-size、letter-spacing 等属性。当您想要更改任何元素内的实际字符时，您需要使用文本插件。

如果您正在寻找其他 JavaScript 资源来学习或在工作中使用，请查看我们在 Envato Market 上提供的资源。

我希望您在本教程中学到了一些新东西。如果您有任何疑问，请在评论中告诉我。

위 내용은 KUTE.js를 사용한 효율적인 텍스트 애니메이션: 4부, 텍스트 애니메이션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!