戻る

requestAnimationFrameを使用した文字の表示

文を1文字ずつ表示して、さいごにすべての文字列を表示するサンプルです。

copy

let str ="吾輩は猫である";
function stringAnimate(str) 
{
	let lastTime =0;
	let index = 0;
	//currentTime:アニメーション開始からの経過時間
	function animate(currentTime)
	{
		//経過時間を計算
		const timeElapsed = currentTime - lastTime;
		//0.6秒を経過したら、if文のステップを実行
		if(timeElapsed > 600)
		{
			const test = document.getElementById('test1');
			if (index < str.length) 
			{
				//指定のインデックス位置から1文字を取得
				test.innerText=str.substring(index,index+1);
				//次の計測をするため差し替えます
				lastTime = currentTime;
				//次のインデックス位置にインクリメントします
				index++;
				requestAnimationFrame(animate);// 次のフレームで再度実行
			}
			else
			{
				//さいごに、すべての文字列を表示します
				test.innerText=str;
			}
		}
		else
		{
			requestAnimationFrame(animate);// 次のフレームで再度実行
		}
	}
	requestAnimationFrame(animate);
}

// アニメーション開始
stringAnimate(str);

requestAnimationFrameは画像をスムーズに動かすためのメソッドですが
今回は文を表示するサンプルとして使用しました。
str変数に実行したい文を入れます。

requestAnimationFrameが実行されます。
実行したいメソッドを通知することで、このサンプルではanimateメソッドが実行されます。

このサンプルでは0.6秒ごとに1文字を表示切替する仕様にしています。
経過時間を計算して次の1文字を表示するタイミングを取得します。

1文字を表示する判定処理です。

この処理により、現在時間(currentTime)をlastTimeに差し替えることで
次の計算の準備をします。

この処理をすることで、再帰実行をします。

if (index < str.length)のelseです。
1文字ずつすべて表示し終えたので、この仕様では、さいごにすべての文字列を表示させます。
そして、これで処理が終わりなので、requestAnimationFrameは実行していません。

「イラスト：農民イラスト」さんの画像を使用させていただいております。
ありがとうございます。

[URL]イラスト：農民イラスト

URL[https://nawmin.stores.jp][クリックすると開きます])

戻る

back

Displaying characters using requestAnimationFrame

This is an example that displays a sentence character by character and then displays the entire string at the end.

copy

let str ="I Am a Cat";
function stringAnimate(str) 
{
	let lastTime =0;
	let index = 0;
	//currentTime:Time elapsed since the start of the animation
	function animate(currentTime)
	{
		//Calculate elapsed time
		const timeElapsed = currentTime - lastTime;
		//After 0.6 seconds have passed, execute the step in the if statement
		if(timeElapsed > 600)
		{
			const test = document.getElementById('test1');
			if (index < str.length) 
			{
				//Gets one character from the specified index position.
				test.innerText=str.substring(index,index+1);
				//Replace for next measurement
				lastTime = currentTime;
				//Increments to the next index position
				index++;
				requestAnimationFrame(animate);// Run again next frame
			}
			else
			{
				//Finally, display all the strings.
				test.innerText=str;
			}
		}
		else
		{
			requestAnimationFrame(animate);// Run again next frame
		}
	}
	requestAnimationFrame(animate);
}

// Animation Start
stringAnimate(str);

requestAnimationFrame is a method used to smoothly animate an image.
In this example, we used it to display a statement.
Enter the statement you want to execute in the str variable.

requestAnimationFrame is executed.
In this example, the animate method is executed by notifying the desired method.

This sample is set to display one character every 0.6 seconds.
Calculate the elapsed time to determine the timing to display the next character.

This is the process to determine whether to display one character.

This process replaces the current time (currentTime) with lastTime
to prepare for the next calculation.

This process enables recursive execution.

This is the else part of if (index < str.length).
Since all characters have been displayed one by one, this specification displays the entire string at the end.
Since this is the end of the process, requestAnimationFrame is not executed.

images used are from "illustration by nawmin.com"
Thank you very much.

[URL]illustration by nawmin.com

URL[https://nawmin.stores.jp][click to open the homepage])

back