html/css/jsでグルグルアニメーションの仕方について(ローディングじゃないよ！)

###前提・実現したいこと
HTML(css/js)でドット風に配置された要素(1010マス)を表示する際に、
ドラクエ1の敵モンスターが出現する時のエフェクトと"似た"事がしたい
ex:)
ドット風要素の集合体(1010)の中心点から、外側に渦を巻きながら、
順番にアニメーションでフェードイン
下の図(1)で示した感じの要素であれば、
44 -> 45 -> 55 -> 54 -> 53 -> 43
の順番にアニメーションを起こす。
※外側から中心点に向けてでも可

・図(1)

	列0	列1	列2	列3	列4	列5	列6	列7	列8	列9
行0	00	01	02	03	04	05	06	07	08	09
行1	10	21	22	23	24	25	26	27	28	29
行2	20	21	22	23	24	25	26	27	28	29
行3	30	31	32	33	34	35	36	37	38	39
行4	40	41	42	43	44	45	46	47	48	49
行5	50	51	52	53	54	55	56	57	58	59
行6	60	61	62	63	64	65	66	67	68	69
行7	70	71	72	73	74	75	76	77	78	79
行8	80	81	82	83	84	85	86	87	88	89
行9	90	91	92	93	94	95	96	97	98	99

###発生している問題・エラーメッセージ
アニメーションは、起こせるので、アニメーション効果の詳細は、一時、割愛中
渦巻き(順)にアニメーションを実行する手段が知りたい。
00から99まで全ての要素が配列ライクになった要素は、取得可能

###該当のソースコード

html
1<style>
2.dqWrap{width:500px;height:500px;margin:0 auto;}
3span.dqDot{display:inline-block;width:50px;height:50px;background-color:#111; vertical-align:bottom;}
4</style>
5<div class="dqWrap">
6<div id="dqModal">
7<span class="dqDot" id="dqDot_001"></span><span class="dqDot" id="dqDot_002"></span><span class="dqDot" id="dqDot_003"></span><span class="dqDot" id="dqDot_004"></span><span class="dqDot" id="dqDot_005"></span><span class="dqDot" id="dqDot_006"></span><span class="dqDot" id="dqDot_007"></span><span class="dqDot" id="dqDot_008"></span><span class="dqDot" id="dqDot_009"></span><span class="dqDot" id="dqDot_010"></span><span class="dqDot" id="dqDot_011"></span><span class="dqDot" id="dqDot_012"></span><span class="dqDot" id="dqDot_013"></span><span class="dqDot" id="dqDot_014"></span><span class="dqDot" id="dqDot_015"></span><span class="dqDot" id="dqDot_016"></span><span class="dqDot" id="dqDot_017"></span><span class="dqDot" id="dqDot_018"></span><span class="dqDot" id="dqDot_019"></span><span class="dqDot" id="dqDot_020"></span><span class="dqDot" id="dqDot_021"></span><span class="dqDot" id="dqDot_022"></span><span class="dqDot" id="dqDot_023"></span><span class="dqDot" id="dqDot_024"></span><span class="dqDot" id="dqDot_025"></span><span class="dqDot" id="dqDot_026"></span><span class="dqDot" id="dqDot_027"></span><span class="dqDot" id="dqDot_028"></span><span class="dqDot" id="dqDot_029"></span><span class="dqDot" id="dqDot_030"></span><span class="dqDot" id="dqDot_031"></span><span class="dqDot" id="dqDot_032"></span><span class="dqDot" id="dqDot_033"></span><span class="dqDot" id="dqDot_034"></span><span class="dqDot" id="dqDot_035"></span><span class="dqDot" id="dqDot_036"></span><span class="dqDot" id="dqDot_037"></span><span class="dqDot" id="dqDot_038"></span><span class="dqDot" id="dqDot_039"></span><span class="dqDot" id="dqDot_040"></span><span class="dqDot" id="dqDot_041"></span><span class="dqDot" id="dqDot_042"></span><span class="dqDot" id="dqDot_043"></span><span class="dqDot" id="dqDot_044"></span><span class="dqDot" id="dqDot_045"></span><span class="dqDot" id="dqDot_046"></span><span class="dqDot" id="dqDot_047"></span><span class="dqDot" id="dqDot_048"></span><span class="dqDot" id="dqDot_049"></span><span class="dqDot" id="dqDot_050"></span><span class="dqDot" id="dqDot_051"></span><span class="dqDot" id="dqDot_052"></span><span class="dqDot" id="dqDot_053"></span><span class="dqDot" id="dqDot_054"></span><span class="dqDot" id="dqDot_055"></span><span class="dqDot" id="dqDot_056"></span><span class="dqDot" id="dqDot_057"></span><span class="dqDot" id="dqDot_058"></span><span class="dqDot" id="dqDot_059"></span><span class="dqDot" id="dqDot_060"></span><span class="dqDot" id="dqDot_061"></span><span class="dqDot" id="dqDot_062"></span><span class="dqDot" id="dqDot_063"></span><span class="dqDot" id="dqDot_064"></span><span class="dqDot" id="dqDot_065"></span><span class="dqDot" id="dqDot_066"></span><span class="dqDot" id="dqDot_067"></span><span class="dqDot" id="dqDot_068"></span><span class="dqDot" id="dqDot_069"></span><span class="dqDot" id="dqDot_070"></span><span class="dqDot" id="dqDot_071"></span><span class="dqDot" id="dqDot_072"></span><span class="dqDot" id="dqDot_073"></span><span class="dqDot" id="dqDot_074"></span><span class="dqDot" id="dqDot_075"></span><span class="dqDot" id="dqDot_076"></span><span class="dqDot" id="dqDot_077"></span><span class="dqDot" id="dqDot_078"></span><span class="dqDot" id="dqDot_079"></span><span class="dqDot" id="dqDot_080"></span><span class="dqDot" id="dqDot_081"></span><span class="dqDot" id="dqDot_082"></span><span class="dqDot" id="dqDot_083"></span><span class="dqDot" id="dqDot_084"></span><span class="dqDot" id="dqDot_085"></span><span class="dqDot" id="dqDot_086"></span><span class="dqDot" id="dqDot_087"></span><span class="dqDot" id="dqDot_088"></span><span class="dqDot" id="dqDot_089"></span><span class="dqDot" id="dqDot_090"></span><span class="dqDot" id="dqDot_091"></span><span class="dqDot" id="dqDot_092"></span><span class="dqDot" id="dqDot_093"></span><span class="dqDot" id="dqDot_094"></span><span class="dqDot" id="dqDot_095"></span><span class="dqDot" id="dqDot_096"></span><span class="dqDot" id="dqDot_097"></span><span class="dqDot" id="dqDot_098"></span><span class="dqDot" id="dqDot_099"></span><span class="dqDot" id="dqDot_100"></span>
8</div></div>

javascript
1function dqLikeAnimate(){
2	this.options = {
3		speed: 1000,
4		delayTime: 20,
5		type: 'dq',
6		target: $()
7	};
8}
9dqLikeAnimate.prototype = {
10	init: function(){
11		return this;
12	},
13	setup: function(options){
14		this.options = $.extend(true, {}, this.options, options);
15		this.init();
16		this.setupAnimetion();
17		return this;
18	},
19	setupAnimetion: function(){
20		var _this = this;
21		this.options.target.each(function(i, e){
22			var $this = $(this);
23			_this.animate($this, i).done(function(){
24				_this.setupAfter();
25			}).fail(function(){
26				return;
27			});
28		});
29	},
30	setupAfter: function(){
31		this.options.target.css({
32			opacity: 1
33		});
34		return this;
35	},
36	animate: function($target, index){
37		var _this = this;
38		var $d = new $.Deferred;
39		$target.delay(index * this.options.delayTime).animate({
40			opacity: 0
41		}, this.options.speed, 'swing', function(){
42			if(_this.options.target.index($target) == (_this.options.target.length - 1)){
43				$d.resolve(true);
44			}else{
45				$d.reject(false);
46			}
47		});
48		return $d.promise();
49	}
50};
51$(function(){
52	var animated = new dqLikeAnimate();
53	animated.setup({
54		target: $('#dqModal').find('.dqDot')
55	});
56});

###試したこと
上記ソースコード参照

###補足情報(言語/FW/ツール等のバージョンなど)
javascriptは、ライブラリとして、jQueryのみ利用可能です。
'#dqModal' -> こいつは、ドット要素の親
'.dqDot' -> こいつは、ドット要素

###動きのイメージ
https://jsfiddle.net/8sree1an/
↑作ってみました！

think49

2017/07/05 05:47 編集

HTML/CSSも追記して下さい。記事上にあるコードだけで状況が再現できることを確認し、足りない情報があれば随時追記して下さい。複雑なコードであれば、https://jsfiddle.net/ にUPすると回答が得られやすいと思います。

tama_yn0815

2017/07/05 05:51

質問本文の方に追記致しました。

think49

2017/07/05 07:28

素朴な疑問ですが、table要素を使わない事に特別な理由はあるのでしょうか。table関連APIを利用すると簡単に実装できそうですが、全てを自前処理にするとややコードが複雑化します(勿論、できなくはありませんが)。

tama_yn0815

2017/07/05 07:43

不可ではないですが、実現したい現象(グルグル)を、htmlに依存しない形(要は、他所(別ページ))で動かせるモノを作ろうと思っております。

tama_yn0815

2017/07/05 07:46

今回で言えば、.setup()のメソッドの引数optonsに'10*10'の様な構造体を識別出来る文字を渡して、構造を動的に解決するjsにしたいと想定しています。

think49

2017/07/05 07:59

つまり、HTML上では「#dqDot_078,#dqDot_054,#dqDot_034,#dqDot_023,...(100個続く)」のように雑然と存在していても、dqLikeAnimate() に「#dqDot_001,#dqDot_002,#dqDot_003,#dqDot_004...,#dqDot_100」のように正しい順番を指定してやれば、表形式で描画されるようにしたい、という事でしょうか。「HTML=構造」という既存の概念を覆す考え方ですね…。そういう設計方針なら、template要素を使うか、JSON等でJavaScript側にデータを持ってくる等、HTMLに構造となる要素を持ってこない方が素直な気はします。

tama_yn0815

2017/07/05 09:12

追記で動きのイメージを載せてみました。教えていただいとサイト恐縮っす！とても、便利^^;

tama_yn0815

2017/07/05 09:13

実現方法をjQueryの追加ライブラリ(swiper.jsとかとか)みたい使えるようにしたいって要望ですね...最悪は、想定していて、ページ単位でjsをゴリゴリ書くことも最後、視野に入れては居ます

think49

2017/07/05 10:30

マップチップを並べていく時に静的HTMLでゴリゴリ書かせるのが面倒くさくてやらせたくない、という事情はわかります。ただ、JavaScriptで扱う上では最終的に構造化されたHTMLで出力させた方が便利なはずなんです。静的HTMLを書かせたくないのなら、マップチップとなる素材を用意させてJavaScriptで動的に構造化されたDOMを出力させても良いと思います。span要素を並べた状態から構造化されたDOMにJavaScriptで改変させても良いはずです。ようするに、初期状態がどうあれ、最終的にspan要素を並べた状態のままで管理させるメリットが少ない、と私は思っているのですが、いかがでしょうか。

行動規範の内容に同意します

回答1件

ベストアンサー

渦巻エフェクト

構造の問題はさておき、問題の渦巻エフェクトは次のコードで実現可能です。

RPG風マップで渦巻エフェクト - JSFiddle

HTML
1<style>
2.dq-display[role="table"] {
3  margin: 1em auto;
4  padding: 0;
5  display: table;
6  width: 500px;
7  border-collapse: collapse;
8  border-style: none;
9  border-spacing: 0;
10}
11
12.dq-display [role="row"] {
13  display: table-row;
14  margin: 0;
15  padding: 0;
16  border-style: none;
17  border-collapse: collapse;
18}
19
20.dq-display [role="gridcell"] {
21  display: table-cell;
22  margin: 0;
23  padding: 0;
24  width: 50px;
25  height: 50px;
26  border-style: none;
27  color: white;
28  background-color: #111;
29  vertical-align: bottom;
30  border-collapse: collapse;
31}
32</style>
33</head>
34<body>
35
36<div class="dq-display" role="table">
37  <div role="row">
38    <span role="gridcell" data-rowindex="0" data-cellindex="0">1A</span>
39    <span role="gridcell" data-rowindex="0" data-cellindex="1">1B</span>
40    <span role="gridcell" data-rowindex="0" data-cellindex="2">1C</span>
41    <span role="gridcell" data-rowindex="0" data-cellindex="3">1D</span>
42    <span role="gridcell" data-rowindex="0" data-cellindex="4">1E</span>
43    <span role="gridcell" data-rowindex="0" data-cellindex="5">1F</span>
44    <span role="gridcell" data-rowindex="0" data-cellindex="6">1G</span>
45    <span role="gridcell" data-rowindex="0" data-cellindex="7">1H</span>
46    <span role="gridcell" data-rowindex="0" data-cellindex="8">1I</span>
47    <span role="gridcell" data-rowindex="0" data-cellindex="9">1J</span>
48  </div>
49  <div role="row">
50    <span role="gridcell">2A</span>
51    <span role="gridcell">2B</span>
52    <span role="gridcell">2C</span>
53    <span role="gridcell">2D</span>
54    <span role="gridcell">2E</span>
55    <span role="gridcell">2F</span>
56    <span role="gridcell">2G</span>
57    <span role="gridcell">2H</span>
58    <span role="gridcell">2I</span>
59    <span role="gridcell">2J</span>
60  </div>
61  <div role="row">
62    <span role="gridcell">3A</span>
63    <span role="gridcell">3B</span>
64    <span role="gridcell">3C</span>
65    <span role="gridcell">3D</span>
66    <span role="gridcell">3E</span>
67    <span role="gridcell">3F</span>
68    <span role="gridcell">3G</span>
69    <span role="gridcell">3H</span>
70    <span role="gridcell">3I</span>
71    <span role="gridcell">3J</span>
72  </div>
73  <div role="row">
74    <span role="gridcell">4A</span>
75    <span role="gridcell">4B</span>
76    <span role="gridcell">4C</span>
77    <span role="gridcell">4D</span>
78    <span role="gridcell">4E</span>
79    <span role="gridcell">4F</span>
80    <span role="gridcell">4G</span>
81    <span role="gridcell">4H</span>
82    <span role="gridcell">4I</span>
83    <span role="gridcell">4J</span>
84  </div>
85  <div role="row">
86    <span role="gridcell">5A</span>
87    <span role="gridcell">5B</span>
88    <span role="gridcell">5C</span>
89    <span role="gridcell">5D</span>
90    <span role="gridcell">5E</span>
91    <span role="gridcell">5F</span>
92    <span role="gridcell">5G</span>
93    <span role="gridcell">5H</span>
94    <span role="gridcell">5I</span>
95    <span role="gridcell">5J</span>
96  </div>
97  <div role="row">
98    <span role="gridcell">6A</span>
99    <span role="gridcell">6B</span>
100    <span role="gridcell">6C</span>
101    <span role="gridcell">6D</span>
102    <span role="gridcell">6E</span>
103    <span role="gridcell">6F</span>
104    <span role="gridcell">6G</span>
105    <span role="gridcell">6H</span>
106    <span role="gridcell">6I</span>
107    <span role="gridcell">6J</span>
108  </div>
109  <div role="row">
110    <span role="gridcell">7A</span>
111    <span role="gridcell">7B</span>
112    <span role="gridcell">7C</span>
113    <span role="gridcell">7D</span>
114    <span role="gridcell">7E</span>
115    <span role="gridcell">7F</span>
116    <span role="gridcell">7G</span>
117    <span role="gridcell">7H</span>
118    <span role="gridcell">7I</span>
119    <span role="gridcell">7J</span>
120  </div>
121  <div role="row">
122    <span role="gridcell">8A</span>
123    <span role="gridcell">8B</span>
124    <span role="gridcell">8C</span>
125    <span role="gridcell">8D</span>
126    <span role="gridcell">8E</span>
127    <span role="gridcell">8F</span>
128    <span role="gridcell">8G</span>
129    <span role="gridcell">8H</span>
130    <span role="gridcell">8I</span>
131    <span role="gridcell">8J</span>
132  </div>
133  <div role="row">
134    <span role="gridcell">9A</span>
135    <span role="gridcell">9B</span>
136    <span role="gridcell">9C</span>
137    <span role="gridcell">9D</span>
138    <span role="gridcell">9E</span>
139    <span role="gridcell">9F</span>
140    <span role="gridcell">9G</span>
141    <span role="gridcell">9H</span>
142    <span role="gridcell">9I</span>
143    <span role="gridcell">9J</span>
144  </div>
145  <div role="row">
146    <span role="gridcell">10A</span>
147    <span role="gridcell">10B</span>
148    <span role="gridcell">10C</span>
149    <span role="gridcell">10D</span>
150    <span role="gridcell">10E</span>
151    <span role="gridcell">10F</span>
152    <span role="gridcell">10G</span>
153    <span role="gridcell">10H</span>
154    <span role="gridcell">10I</span>
155    <span role="gridcell">10J</span>
156  </div>
157</div>
158
159<script>
160'use strict';
161function getElementsSpiral (table) {
162  var rows = table.querySelectorAll('[role="row"]'),
163      elements = [],
164      rLen = rows.length,
165      rStart = 0,
166      cLen = rows[0].children.length,
167      cStart = 0;
168
169  for (var i = rStart, j = cStart, cells, row; i < rLen; ++i) {
170    cells = rows[i].children;
171
172    while (j < cLen) { // leftTop to right
173      elements.push(cells[j++]);
174    }
175
176    ++rStart;
177    --j;
178
179    while (++i < rLen) {  // rightTop to bottom
180      elements.push(rows[i].children[j]);
181    }
182
183    --cLen;
184    row = rows[--i];
185
186    while (j-- > cStart) {  // rightBottom to left
187      elements.push(row.children[j]);
188    }
189
190    --rLen;
191    ++j;
192
193    while (i-- > rStart) {  // leftBottom to up
194      elements.push(rows[i].children[j]);
195    }
196
197    ++cStart;
198    ++j;
199  }
200
201  return elements;
202}
203
204setTimeout(function handleTimeout (elements, i) {
205  elements[i++].firstChild.data = '';
206
207  if (i < elements.length) {
208    setTimeout(handleTimeout, 50, elements, i);
209  }
210}, 50, getElementsSpiral(document.querySelector('.dq-display')), 0);
211
212
213var elements = getElementsSpiral(document.querySelector('.dq-display')).map(function (element) { return element.firstChild.data; });
214console.log(JSON.stringify(elements));  // ["1A","1B","1C","1D","1E","1F","1G","1H","1I","1J","2J","3J","4J","5J","6J","7J","8J","9J","10J","10I","10H","10G","10F","10E","10D","10C","10B","10A","9A","8A","7A","6A","5A","4A","3A","2A","2B","2C","2D","2E","2F","2G","2H","2I","3I","4I","5I","6I","7I","8I","9I","9H","9G","9F","9E","9D","9C","9B","8B","7B","6B","5B","4B","3B","3C","3D","3E","3F","3G","3H","4H","5H","6H","7H","8H","8G","8F","8E","8D","8C","7C","6C","5C","4C","4D","4E","4F","4G","5G","6G","7G","7F","7E","7D","6D","5D","5E","5F","6F","6E"]
215console.log(elements.length); // 100
216</script>