KUTE.js を使用した効率的なテキスト アニメーション: パート 4、テキスト アニメーション

このシリーズの 2 番目のチュートリアルでは、KUTE.js を使用して、Web ページ上の要素のさまざまな CSS プロパティをアニメーション化する方法を学習しました。すべての変換プロパティと、border-radius や border-color などのプロパティをアニメーション化する方法を学習しました。 CSS プラグインを使用して、font-size、line-height、letter-spacing、Word Spacing などの CSS プロパティをアニメーション化することもできます。 ＃＃＃。

KUTE.js には、カウントダウンなどの数値を増減したり、文字列を 1 文字ずつ書いたりすることで、さまざまな要素内のテキストをアニメーション化できるテキスト プラグインもあります。

このチュートリアルでは、KUTE.js の CSS とテキスト プラグインを使用して、Web ページ上のさまざまな要素内のテキストをアニメーション化する方法を学びます。

アニメーションCSSテキストプロパティ

前に述べたように、KUTE.js CSS プラグインを使用して、4 つの異なるテキスト関連の CSS プロパティをアニメーション化できます。これらのプロパティは、

font-size、line-height、letter-spacing、および word-spacing です。また、最初のチュートリアルで説明したコア エンジンのいくつかのプロパティを使用して、個々の文字をアニメーション化します。以下のデモでこれらすべての概念を組み合わせて、振動する HELLO テキストを作成する方法を見てみましょう。

上記のアニメーションの作成に使用したコードは次のとおりです:

リーリー

単語の各文字は

span タグ内に含まれており、独自の一意のクラスを持ちます。最初のトゥイーンは、200 ミリ秒のオフセットですべての文字の色を白から赤に変更します。これは、「アニメーションの開始」をクリックした後に再生される最初のアニメーションでもあります。 animateFontSize トゥイーンは animateColor にリンクされています。このようにして、カラー アニメーションが終了すると、font-size アニメーションが開始されます。

アニメーションの動作を制御するために、

repeat と yoyo という 2 つのプロパティを使用していることに気づいたかもしれません。 yoyo プロパティは、現在繰り返し再生されているアニメーションを反転するために使用されます。これにより、アニメーション中にさまざまなプロパティの値が突然変化することがなくなり、アニメーションが滑らかに見えます。

font-size アニメーションは、すべての文字を -15 度傾ける animateSkewing にリンクされています。 skewX および skewY プロパティは、コア エンジン自体で使用できます。

さまざまな文字の色をアニメーション化するために使用されるすべてのトゥイーンが

animateSkewing にリンクされるようになりました。こうすることで、リンクされているすべてのカラー アニメーションが、傾きアニメーションの終了後に再生を開始するようになります。最後に、lettersSqueezed トゥイーンは、異なる文字間の間隔を 15 ピクセル縮小します。

プロパティのさまざまな組み合わせを使用すると、より興味深い効果を作成できます。

アニメーション数字

KUTE.js で数値をアニメーション化することもできます。ただし、アニメーションを作成するには追加のテキスト プラグインを含める必要があります。

デジタル アニメーションのプロセスは実際には非常にシンプルです。アニメーション番号を表示するセレクターと、アニメーションを終了する最終番号を指定するだけです。

これは、アニメーションを使用して 2016 年の米国の空港の総数を示す基本的な例です。

リーリー

また、

duration、repeat、delay などの一般的なトゥイーン オプションを適用して、アニメーションの動作をカスタマイズすることもできます。先ほど書いたコードは次のアニメーションを生成します:

テキストを一文字ずつ書く

これは非常に人気のあるエフェクトであり、多くの Web サイトで見つけることができます。 KUTE.js テキスト プラグインを使用すると、元の文を一度に 1 文字ずつ置き換える新しい文を指定できます。

ランダムな文字は、最初の文字を最終的な値に置き換える前に、先ほど見た数値例のようにアニメーション化されます。埋め込まれた 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 中国語 Web サイトの他の関連記事を参照してください。