@text
テキストコンテナに文字を1文字ずつアニメーション表示します。
構文
@text <テキスト>通常、@text コマンドを明示的に使用する必要はありません。スクリプト中でコマンドではない行はすべてテキストとして自動的に解釈されます。
@font.size 1.5em
普通姉妹でこんなことしなくない!?上記は以下と同等です。
@font.size 1.5em
@text 普通姉妹でこんなことしなくない!?
@pauseパラメータ
| パラメータ | 説明 |
|---|---|
テキスト | 表示するテキスト |
表示速度
文字の表示速度は Context の speed プロパティ(単位: 文字/秒)によって制御されます。デフォルトは 20 文字/秒 です。
ts
pikimerin.context.text.speed = 40; // 40文字/秒に変更アニメーションの仕組み
テキストは1文字ずつ <span> 要素(改行は <br> 要素)に分割され、まとめて非表示状態(data-hide 属性付き)で DOM へ追加されます。 その後、speed に基づいて先頭から順に data-hide 属性を外し、CSS トランジションでフェードインさせます。
このコマンドが中断されると、全文が一気に表示されます。詳細は非同期処理と中断を参照してください。
行末の自動処理
テキスト行の末尾には自動的に @pause が挿入されます。ユーザーが入力するまで次の行には進みません。
1行目のテキスト
2行目のテキスト上記は内部的に以下と同等です。
@text 1行目のテキスト
@pause
@text 2行目のテキスト
@pause戻り値
テキストの文字送りアニメーションを行う非同期処理 AbortablePromise<void> を返します。
