AA(アスキー・アート)だけでアニメーションを作りたい! アニメーション用JavaScript - 誰でも簡単に使えます

イントロダクション

ブログやWebサイトで文章を書いていると、動きのあるものをページ内に挿入したくなる時があります。

しかし、アニメーションを gif や動画で作るには、絵を作るのも編集ソフトを使うのも手間がかかって面倒くさいというときがあります。

そんなとき、文字だけでアニメーションが作れたら、どんなに楽かと思ってしまいます。

ならば作ってしまおう！
ということで、文字だけでアニメーションが作れる JavaScript を作ってみました。

文字だけでアニメーションが作れる JavaScript

文字だけでアニメーションをさせるには、以下の HTML と JavaScript コードを使用します。

コード：

<div id="aa-anime-container">
<div>
Hello
</div>
<div style="display:none;">
World
</div>

</div>


<script type="text/javascript">
<!--
    (function () {
        
        // AA アニメデータを収めた要素を取得
        var obj_text = document.getElementById("aa-anime-container");
        if (!obj_text) return;
        obj_text.removeAttribute("id");                                     // 複数の要素が html 内にある場合に備えて、id 削除

        // AA アニメの全フレームデータを配列として取得
        var aa_array = obj_text.getElementsByTagName("div");
        if (aa_array.length <= 1) return;


        // AA アニメのアニメーション処理部
        var aa_index = 0;                                                   // 現在表示している aa のインデックス
        function animeAA() {
            
            // 今まで表示していた AA のフレームを非表示
            aa_array[aa_index].style.display = "none";

            // 次の AA フレームを選択
            aa_index++;
            if (aa_index >= aa_array.length) aa_index = 0;

            // 次の AA フレームを表示
            aa_array[aa_index].style.display = "block";

            // 一定間隔で AA アニメを実行
            setTimeout(animeAA, 1000);
        };
        animeAA();

    })();

//-->
</script>

これを、実際にブログページやWebページに埋め込むと、次のようになります。

実行結果：

Hello

このアニメーションが正常に動作していると、"Hello" と "World" が 1 秒間隔で交互に表示されるはずです。

そして、これを使えば、今のように、AA(アスキー・アート）をアニメーションさせることもできます。

　∩ ∩
(^w^ )○　

このアニメーションが正常に動作していると、うさぎがぴょんぴょん！しているはずです。
（これをやりたかった）

これの、アニメーション用文字データの部分(aa-anime-container)は、次のようになっています。

<div id="aa-anime-container">

<div>
<br />
　∩   ∩<br />
(^w^ )○　<br />
</div>
<div style="display:none;">
　∩   ∩<br />
(^w^ )○　＜ぴょんぴょんっ！<br />
<br />
</div>

</div>

このように、id 属性として "aa-anime-container" が設定された div タグの中に、アニメーションに使用する文字データが入っています。

id 属性として "aa-anime-container" が設定された div タグの中には、複数の div タグが配置されており、div タグ 1 つが、アニメの 1 フレームになるわけです。

（なお、この "aa-anime-container" という id 属性は、実行時に削除されるため、その id を元にスタイルシートを適用することはできません。スタイルシートで装飾を施したい場合には、タグに埋め込むか、class 属性を設定する、アニメーションのフレームに class 属性を埋め込む、全体をさらに別の div 要素で囲む(スタイルシート適用に使用する id を付与)等の対策が必要です。）

注意事項

なお、この文字のアニメーションが動作するには、HTML のタグや JavaScript が動作する必要があります。

そのため、一般的な掲示板では、それらが無効化されてしまうので、これを使ってアニメーションさせることができません。

HTML モードによる編集が可能であり、JavaScript が埋め込めるブログや、Web サイトのページなどでお使いください。

また、このアニメーションには JavaScript が動作することが必要ですので、JavaScript を無効に設定している環境では動作しません。
（最初の 1 フレームのみ表示された状態になります。）

まとめ

このように、この JavaScript を使用することで文字だけでアニメーションを作ることができます。

いろいろなAA（アスキー・アート）をアニメーションさせてみると、面白いですね。

(^o^)

→ ジェネレータで簡単にアニメーションを作成できるようになりました！
アニメーション用JavaScriptを自動生成-HTMLやJavaScriptの知識が無くても、文字・AA(アスキー・アート)だけでアニメーションを作りたい!
http://upa-pc.blogspot.com/2015/03/aa-anime-javascript-generator.html

既にインターネット上にあるAA(アスキー・アート)アニメーションとの違い

インターネット上を見渡すと、既にアスキーアートでアニメーションを作るための Web サービスや、ソフトウェアがありますが、それらとの違いを記載します。

埋め込みコードですべてが完結

外部からのスクリプトを使用していないため、外部のサービスに依存しないアニメーションを作ることができます。

利用者が見渡せる範囲のコード

この文字をアニメーションさせるためのコードは非常に簡潔のため、利用者がパッと見て理解できる程度の長さです。

アニメーションコードの自由な改変

利用者が見渡せるコード量のため、利用者が好きに改変することができます。

Dr.ウーパのコンピュータ備忘録

2015年3月3日火曜日