※ ChatGPTを利用し、要約された質問です(原文:JavaScriptアニメーションについて質問!!)
JavaScriptアニメーションの書き方と使い方
このQ&Aのポイント
JavaScriptを使ったアニメーションのコマ送りを実現する方法を説明します。
EmEditorとInternet Explorerを使用してHTML文書を作成し、画像のアニメーションを表示します。
コード内で画像を順番に表示するためのJavaScriptの書き方や設定方法を解説します。
JavaScriptアニメーションについて質問!!
学校の授業の入門編でやったことです
だから初心者です
使用ソフトはEmEditot, Internet Explorerです。
ペイントを使い 01.gifから順番に06まで絵をかきました
そしてz:\local\100のフォルダに保存
z:\local\100 フォルダ内で 右クリック → [新規作成] → [テキストドキュメント]
ファイル名を 100.html とする(注意が表示されるが実行する)
100.html を EmEditorで開く (アイコン上で 右クリック→[送る]→[EmEditor])
以下のHTML文書を入力する(HTML文書をドラッグしてEmEditorに貼り付けてよい)
xx, yy は作成した画像の幅と高さ, nnは画像枚数である それぞれを置き換えること
gif形式(.gif)の画像として記述しているので他の形式の場合は拡張子を書き換えること
<html>
<head>
<title>GIFアニメーション</title>
<script language="JavaScript">
<!--
var num = nn;
var ani = new Array();
for (var i=1;i<=num;i++){
if(i<10){ ani[i]=new Image(); ani[i].src="0" + i + ".gif"; }
else { ani[i]=new Image(); ani[i].src="" + i + ".gif"; }
}
var i=1;
function start(){
document.pic.src=ani[i].src;
i++;if(i>num)i=1;
setTimeout("start()",200);
}
// -->
</script>
</head>
<body onload="start()">
<img name="pic" src="01.gif" width="xx" height="yy" />
</body>
</html>
という説明文があり
<html>
<head>
<title>GIFアニメーション</title>
<script language="JavaScript">
<!--
var num = 06;
var ani = new Array();
for (var i=1;i<=num;i++){
if(i<10){ ani[i]=new Image(); ani[i].src="0" + i + ".gif"; }
else { ani[i]=new Image(); ani[i].src="" + i + ".gif"; }
}
var i=1;
function start(){
document.pic.src=ani[i].src;
i++;if(i>num)i=1;
setTimeout("start()",200);
}
// -->
</script>
</head>
<body onload="start()">
<img name="pic" src="01.gif" width="128" height="128" />
</body>
</html>
まで書いたのですが 1枚しかネット上には表示されず
アニメーションになりませんでした。
どうすれば コマ送りみたいなアニメーションになりますか
書き方を教えてください
お礼
ありがとうございます。私だけできなかったので そうなのかもしれません もう一度やってみようと思います。 本当に ありがとうございました。