javascriptでテキストをランダムにシャッフルするアニメーションを書いてみた。【WEBプログラミング・WEB初心者・WEB制作・animation・javascript・js・js-animation】

posted on 2018.11.22

文字の出現をランダムにするプログラムは以下になります。テキストをシャッフルするjavascriptの基本構造に軽い追加、変更を加えただけで実装できます。追加変更箇所には*追加、*変更と付してあります。

<!DOCTYPE html>
<!--

-->
<html>
    <head>
        <title>js animation shuffle txt 2</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    </head>
    <body>
        <div id="letter">Shuffle! Shuffle! OK!! Shuffle! Shuffle! OK!!</div>

        <script>

            (function ($) {

                $(document).ready(function () {


                    var node = document.querySelector('#letter');
                    var str = node.textContent.split('');  //文字を分割
                    var types = [];  //ランダム表示する文字のタイプの配列
                    var step = 3;  //繰り返しの数何週するか
                    var fps = 20;  //表示スピード
                    var strClone = [];   //strクローン用の配列
                    var typeClone = [];  //typeクローン用の配列
                   var index = []; //始動時の順序の配列。ランダムに表示させるために使用 *追加 

                    for (var i = 0; i <= str.length; i++) {

                        types[i] = 'symbol';  //randomCharでsymbolを返す。
                        typeClone[i] = 'first';  //randomCharでfirstをを返す。
                        index[i] = i;  //文字の長さ分だけ格納。あとでシャッフルする。 *追加   

                    }
                    ;
                    // ランダム文字を生成して返す。
                    var randomChar = function (type) {
                        var pool;
                        switch (type) {
                            case 'symbol':
                                pool = '?/\\(^)![]abcdefghijklmnopqrstuvwxyz0123456789{}*&^%$';
                                break;
                            case 'first':
                                pool = '---';
                                break;
                            default:
                                pool = '';
                        }

                        return pool.charAt(Math.floor(Math.random() * pool.length));
                    };

                    //配列をシャッフルする。 *追加
                    var sh = function (a) {
                        var j, x, i;
                        for (i = a.length - 1; i > 0; i--) {
                            j = Math.floor(Math.random() * (i + 1));
                            x = a[i];
                            a[i] = a[j];
                            a[j] = x;
                        }
                        return a;
                    };


                    //インデックス配列のクローンを作成しシャッフルする。　*追加

                    var indexClone = index.slice(0);
                    sh(indexClone);

                    var j = 0;
                    var k = 0;

                    node.textContent = '';
                    //textの初期化　空にします。

                    // console.log(indexClone);
                    // ランダム文字を織り交ぜながら一文字ずつ表示させる。メインです。
                    var ticker = function () {
                        // strClone = str.slice(0);
                        // typeClone = types.slice(0);
                        if (k > str.length) {
                            k = str.length;
                            //str.lengthを超えたらstr.lengthで止める。
                            //理由はそれ以上文字がないから止まっちゃうので。 
                            //+3ぐらいまでは平気。
                        }

                        //Math.max(a, 0); aと0を比較して値の大きい方を返します。aがマイナスの値の間は0。
                        for (var i = Math.max((j + ((step - 1) * -str.length)), 0); i < k;
                                i++
                                ) {
                            //*変更
                            strClone[Math.abs(i)] = randomChar(typeClone[Math.abs(indexClone[i])]);

                            if (k >= str.length) {
                                typeClone.splice(Math.abs(j - str.length), 1, types[Math.abs(i)]);


                            }


                            if ((j + ((step - 1) * -str.length)) >= 0) {

                                strClone[Math.abs(j + ((step - 1) * -str.length))] = str[Math.abs(j + ((step - 1) * -str.length))];
                            }

                        }

                        node.textContent = strClone.join('');  //ループ途中の現在のstrCloneの中身を'#letter'の中に追加していきます。

                        if (j === step * str.length) {

                            return;  //この条件で終了。

                        }
                        // console.log(j);
                        j++;
                        k++;

                        return setTimeout(function () {
                            ticker();//本人のなかで本人を回しているので本人が終了すれば終了です。

                        }, 1000 / fps);

                    };
                    ticker();

                });
            })(jQuery);






        </script>





    </body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

<!DOCTYPE html>

<!--

-->

<html>

<head>

<title>js animation shuffle txt 2</title>

</head>

<body>

<div id="letter">Shuffle! Shuffle! OK!! Shuffle! Shuffle! OK!!</div>

(function ($) {

$(document).ready(function () {

var node = document.querySelector('#letter');

var str = node.textContent.split(''); //文字を分割

var types = []; //ランダム表示する文字のタイプの配列

var step = 3; //繰り返しの数何週するか

var fps = 20; //表示スピード

var strClone = []; //strクローン用の配列

var typeClone = []; //typeクローン用の配列

var index = []; //始動時の順序の配列。ランダムに表示させるために使用 *追加

for (var i = 0; i <= str.length; i++) {

types[i] = 'symbol'; //randomCharでsymbolを返す。

typeClone[i] = 'first'; //randomCharでfirstをを返す。

index[i] = i; //文字の長さ分だけ格納。あとでシャッフルする。 *追加

}

;

// ランダム文字を生成して返す。

var randomChar = function (type) {

var pool;

switch (type) {

case 'symbol':

pool = '?/\\(^)![]abcdefghijklmnopqrstuvwxyz0123456789{}*&^%$';

break;

case 'first':

pool = '---';

break;

default:

pool = '';

}

return pool.charAt(Math.floor(Math.random() * pool.length));

};

//配列をシャッフルする。 *追加

var sh = function (a) {

var j, x, i;

for (i = a.length - 1; i > 0; i--) {

j = Math.floor(Math.random() * (i + 1));

x = a[i];

a[i] = a[j];

a[j] = x;

}

return a;

};

//インデックス配列のクローンを作成しシャッフルする。　*追加

var indexClone = index.slice(0);

sh(indexClone);

var j = 0;

var k = 0;

node.textContent = '';

//textの初期化　空にします。

// console.log(indexClone);

// ランダム文字を織り交ぜながら一文字ずつ表示させる。メインです。

var ticker = function () {

// strClone = str.slice(0);

// typeClone = types.slice(0);

if (k > str.length) {

k = str.length;

//str.lengthを超えたらstr.lengthで止める。

//理由はそれ以上文字がないから止まっちゃうので。

//+3ぐらいまでは平気。

}

//Math.max(a, 0); aと0を比較して値の大きい方を返します。aがマイナスの値の間は0。

for (var i = Math.max((j + ((step - 1) * -str.length)), 0); i < k;

i++

) {

//*変更

strClone[Math.abs(i)] = randomChar(typeClone[Math.abs(indexClone[i])]);

if (k >= str.length) {

typeClone.splice(Math.abs(j - str.length), 1, types[Math.abs(i)]);

}

if ((j + ((step - 1) * -str.length)) >= 0) {

strClone[Math.abs(j + ((step - 1) * -str.length))] = str[Math.abs(j + ((step - 1) * -str.length))];

}

node.textContent = strClone.join(''); //ループ途中の現在のstrCloneの中身を'#letter'の中に追加していきます。

if (j === step * str.length) {

return; //この条件で終了。

}

// console.log(j);

j++;

k++;

return setTimeout(function () {

ticker();//本人のなかで本人を回しているので本人が終了すれば終了です。

}, 1000 / fps);

};

ticker();

});

})(jQuery);

</script>

</body>

</html>

テキストレングスをシャッフルする配列を用意する

下準備はテキストレングスのインデックスを保存する配列を用意するだけ。取りあえずクローンしておきます。

配列をシャッフルする関数

配列をシャッフルするshuffle関数を作成し、準備しておいたindexClone配列をシャッフルします。中身は0からテキストレングス分までの整数がシャッフルされた配列です。

代入される側をindexClone配列に変更

strClone[Math.abs(i)] = randomChar(typeClone[Math.abs(i)]);を strClone[Math.abs(i)] = randomChar(typeClone[Math.abs(indexClone[i])]);に変更します。変更箇所はこれのみになります。結果文字列がランダムに表示されるようになります。

以上でjavascriptでテキストをシャッフルするコードの解説は終わりです。うまく伝達してくれたでしょうか？。基本的なところがなんとなく理解できれば、後は条件や変数に入る数字を少しいじると少し動きも変化します。いろいろ試してみて下さいね。それではまた。

1 2