JavaScriptで同じアニメーション処理をその都度呼び出したい

###前提・実現したいこと
現在、anime.jsを用いたアニメーション作成を行っています。
何度か使うアニメーション処理をjson形式のデータとして持っておき、必要に応じてアニメーション処理を呼び出したいと思っています。

なので、下記のソースコードのように呼び出したい時に変数として格納していたデータをその都度呼び出して実装しようとしました。
ただ、1回目の呼び出しは問題なく処理が実行されるのですが、2回目以降に呼び出しても処理が行われないまま次のアニメーションが処理されてしまいます。
毎回呼び出そうとしているにも関わらず、１度しか呼び出されない理由が解らずに行き詰っています。
どうすれば何度も使う処理をその都度呼び出せるのでしょうか。
アドバイスお願いします。

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

HTML
1<!DOCTYPE html lang="ja">
2	<head>
3	</head>
4
5	<body>
6		<!-- 要素 -->
7    	<div class="square"></div>
8
9      <!-- 外部ファイル読込 -->
10      <link rel="stylesheet" href="elements.css" />
11			<script type="text/javascript" src="anime.min.js"></script>
12			<script type="text/javascript" src="animation.js"></script>
13	</body>
14</html>

CSS
1.square{
2	position: absolute;
3	width: 50px;
4	height: 50px;
5	background: green;
6}

JavaScript
1//四角のアニメーション
2var basicTimeline = anime.timeline({
3  loop: true
4});
5
6//下に移動するアニメーション ２回以上使用する
7var moveDown = [{
8  targets: ".square",
9  translateX: "+=0",
10  translateY: "+=100",
11  duration: 500,
12}];
13
14basicTimeline
15  //右に移動
16	.add({
17  		targets: ".square",
18  		translateX: "+=100",
19  		translateY: "+=0",
20  		duration: 500,
21	})
22  //下に移動
23	.add(moveDown)
24
25	//左に移動
26  	.add({
27    	targets: ".square",
28    	translateX: "-=100",
29    	translateY: "+=0",
30    	duration: 500,
31  	})
32
33	//下に移動
34	.add(moveDown);

###補足情報(言語/FW/ツール等のバージョンなど)
anime.jsライブラリを使用しています。

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

回答1件

ベストアンサー

対処：

.add(moveDown)
を
.add(moveDown[0])

もしくは

var moveDown = [{
  targets: ".square",
  translateX: "+=0",
  translateY: "+=100",
  duration: 500,
}];
を
var moveDown = {
  targets: ".square",
  translateX: "+=0",
  translateY: "+=100",
  duration: 500,
};

原因：
var moveDown = [{定義}]
配列の中に、オブジェクト形式で定義をしているが利用する際には
ラップしている配列をそのまま利用しているためではないかと。

投稿2017/05/10 02:10