How to Create a Typewriter Effect With ProtoPie

概要

• タイプライター効果とは？

• 今日学ぶこと

• 始める前に

• タイプライター効果の手順

• さらにプロトタイピングスキルを身につける

タイプライター効果とは？

タイプライター効果は、テキストが画面に টাইピングされていくような錯覚を与え、アプリやWebサイトをユーザーにとってより魅力的にできます。ランディングページ、CTA要素、個人向けWebサイト/アプリ、コードデモなど、さまざまな用途で使われます。

ProtoPieを使えば、あらかじめ用意された式、変数、そして「left」や「length」のようなテキスト関数を使って、この効果を簡単に実現できます。このチュートリアルを終えるころには、タイプライター効果の使い方をしっかりマスターできるでしょう。

基本手順は本文のチュートリアルに従うか、下の動画チュートリアルをご覧ください。カーソルの点滅が追加された拡張版で、よりリアルなタイプライター効果を実現できます。

最新のプロトタイピングのヒントを受け取るために登録しましょう。

動画

今日学ぶこと

このプロトタイピングレッスンでは、次のことを学びます。

1. 「left」と「length」の式を理解する

2. テキスト文字列を保存し、文字数を数える変数を作成する

3. テキストを徐々に表示してタイプライター効果を実現する

最後には、こんなものを作れるようになります！

[完成済み Pie ファイル]

始める前に

チュートリアルに進む前に、「left」と「length」の式を理解し、なぜ使うのかを確認しましょう。

1. 「Left」は、指定した文字数に基づいてテキストの左側から一部分を抽出するために使います。

• left(source:TEXT,count:NUMBER) → TEXT

次の例では、「left」式が左から最初の3文字を抽出しています。

• left("hello", 3) → “hel”

2. 「Length」は、テキスト内の文字数を数えるために使います。

• length(source:TEXT) → NUMBER

次の例では、「length」式がテキスト内の5文字を表しています。

• length("hello") → 5

式についてもっと学ぶ。

タイプライター効果のステップバイステップ手順

1. テキスト文字列を保存し、文字数を数える変数を作成する

💡 なぜまた変数を使うの？

変数は値を保存する「バスケット」のようなものだと考えてください。名前、パスワード、口座残高など、後で使いたいデータを保存します。

この場合、テキスト文字列用の変数を作成すると、将来その値をすばやく再利用したり変更したりできます。文字数を数える変数は、どれだけの文字が表示されたかを把握するのに役立ちます。

1. まず、このシーン用の変数「textToType」を作成します。種類を Number から Text に変更します。

• この変数には、入力するテキストが保存されます。

2. このシーン用の変数「characterCount」を作成します。

• この変数は、表示されたテキストの文字数を数えるのに役立ちます。

3. 変数のデフォルト値を設定します。

• textToType: Let's bake delicious pies! :) (or anything you want as per your prototype)

• characterCount: 0

💡 characterCount を 0 に設定するのは、0 から始めて、textToType の長さの値に達するまで 1 ずつ増やしたいからです。

変数についてもっと学ぶ。

2. テキストを徐々に表示する

1. Startトリガーを作成します。変数「characterCount」にリンクされた Assign レスポンスを作成します。

2. Assign レスポンスを次のプロパティで設定します。

式を使用: characterCount+1

• これにより、次の文字が表示されます。

開始遅延: 2s

• これにより、テキストが表示される前に少し遅延が入り、よりリアルに見えます。

繰り返し回数: length(textToType)

• これにより、すべての文字が表示されるまで次の文字を表示し続けられます。ここでは、テキスト「Let's bake delicious pies! :)」で表示される文字数は 29 文字です。つまり、Assign レスポンスは 29 回繰り返されます。

間隔: 0.1s

• これにより、各文字の表示間隔が 0.1s に保たれます。

3. textCount 変数に対する Detect トリガーを作成します。

• textCount の値は継続的に変化するため、その変化を使って Detect トリガーを発火させ、テキストを変更できます。

4. Text レイヤーに Text レスポンスを追加します。left(textToType,characterCount) を式として使用します。

• ここでは、この式は left("Let's bake delicious pies! :)", 1), left("Let's bake delicious pies! :)", 2), ...., left("Let's bake delicious pies! :)", 29) のように反映されます。

💡 式と変数を組み合わせることで、characterCount 変数の値に基づいて、テキスト文字列の左側から一部を抽出できます。characterCount の値が変わるたびに、テキストレイヤーは繰り返し更新されます。これでタイプライター効果の完成です！お見事！

さらにプロトタイピングスキルを身につける

これらの簡単なコツを使って変数と式によるタイプライター効果をマスターした今こそ、プロトタイピングの基本をすべて身につけるときです。ProtoPie School の無料クラスに登録して、修了証を手に入れましょう！

[学習を始める] {プロトタイピングのヒントを受け取る}