適当に要素を作ってそれをJavascriptで左右にアニメーションさせたいです。

具体的には、右に100px（任意）移動し、100px移動したら次は左に100px移動させ、それを永遠に繰り返す（右→左→右→左）記述を書きたいのですが、よくわからず質問させていただきました。

setTimeoutを使ってやればいいと思うのですが、どのような書き方をすれば実現できるでしょうか？

jQueryは使わずにJavascriptで記述したいです。

現状右に移動するだけの動作はできています。

------ HTML ------
<div id="rect">box</div>
------ HTML ------

------ CSS -------
#rect {
	width: 100px;
	height: 30px;
	background: #00f;
	color: #fff;
	text-align: center;
	margin: 0 20px;
}
------ CSS -------

------- JS -------
var startTime = Date.now();
var box = document.getElementById("rect");
var myTime = 500;
function rect() {
	var current = new Date() - startTime;
	if( current < myTime ) {
		var id = setTimeout(rect, 10);
		box.style.marginLeft = 20 + 20 * (current / myTime) + "px";
	}
}
rect();
------- JS -------

どうぞよろしくお願いいたします。

kszk311

2018/05/01 15:23

CSSのアニメーションもできますが、Javascriptでの動作ですか？とりあえず途中かけでいいので、現在ここまで書いているコードを記載してください。

yuyan

2018/05/02 06:54 編集

コメントいただきありがとうございます！基本的にJavascriptでできると嬉しいです。早速コード載せさせていただきました！お力添えいただけると幸いです。どうぞよろしくお願いいたします。

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

回答5件

色々、検索していましたら、良さそうなのが見つかりましたので
元コードを自分なりに変更したものを載せさせて頂きます。

元コードはこちらのリンクの最初にあるコード例です。
https://developer.mozilla.org/en-US/Apps/Fundamentals/Performance/CSS_JavaScript_animation_performance

私が書いた、コードを始めに載せます。

javascript
1var boxContainer = document.getElementById('rect');
2var rafId;//requestAnimationFrame用のid
3
4var duration = 1000;//アニメーションの実行時間
5var translateX = 100;//移動するx座標の長さ
6var start;
7//animate関数の実行開始
8rafId = window.requestAnimationFrame(animate);
9function animate(time) {
10  if (!start) {
11    start = time;
12    rafId = window.requestAnimationFrame(animate);
13    return;
14  }
15
16  var progress = (time - start) / duration;
17  var x = progress * translateX;
18  var transform = 'translateX(' + x + 'px)';
19
20  //右に移動が完了したらprogressは1以上、つまりこれは左に移動している時を表す。
21  if (progress >= 1) {
22　　//translateXに1未満(2 - progress)の小数を掛けることで左に移動するためのxの数値を求めている。
23    x = (2 - progress) * translateX;
24    transform = 'translateX(' + x + 'px) ';
25  }
26  if (progress < 2) {
27    boxContainer.style.transform = transform;
28  } else {
29    start = null;
30  }
31  rafId = window.requestAnimationFrame(animate);
32}
33

右に動かすだけであれば、私もすぐに出来たのですが、
右に動かして、その後、左に動かしてを繰り返す実装方法が分からず
上記URLのコード例を見て、なるほどなーと感じさせて頂きました。

正直、アニメーションは難しいです。

余力がありましたら、こちらも参考になると思いますので、
時間がある時にでも読んでいただくと幸いです。
アニメーションの考え方が分かりやすく説明されています。
https://ics.media/entry/17183

投稿2018/05/01 18:02

fjaiofjawiefjaw

総合スコア210

yuyan

2018/05/02 02:44

コードなど詳しく説明してくださりありがとうございました！とても助かりました！読み解いてみたのですが、なかなか、、アニメーションは難しいですね、、、勉強になりました。ありがとうございました！！

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

box.style.marginLeftを操作していいのであれば
それは「javascriptで完結」とはいえないのでは…

transition-durationをcssに入れて
それを上回る秒数でsetIntervalしてプロパティを反転すればいいと思います。
未検証です。

css
1#rect {
2    width: 100px;
3    height: 30px;
4    background: #00f;
5    color: #fff;
6    text-align: center;
7    margin: 0 20px;
8    /*↓これ*/
9    transition-duration: 1s;
10}

javascript
1var box = document.getElementById("rect");
2
3var ani = function(e){
4  return function(){
5    if (e.style.marginLeft=="20px")
6      e.style.marginLeft="200px";
7    else
8      e.style.marginLeft="20px";
9  }
10}
11// transition-duration以上の秒数でsetInterval
12setInterval(ani(box), 2000);

投稿2018/05/02 00:15

編集2018/05/02 00:21

sousuke

総合スコア3828

yuyan

2018/05/02 02:51

完結と書いて誤解を生んでしまってすみません、、 cssやhtmlの操作はよくてcssのanimateなどを使わずに実装できる方法を知りたいということでした。このような書き方があるんですね！！コードも短くて素晴らしいです！勉強になりました、ありがとうございました。

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

ベストアンサー

流れ的にはこうするとわかりやすいかもしれません

javascript
1window.addEventListener('DOMContentLoaded', function(e){
2  var box = document.querySelector('#rect');
3  var step=30;
4  var span=10;
5  var max_margin=100;
6  var l_margin=0;
7  var flg=false;
8  var timerId=setInterval(function(){
9    box.style.marginLeft = l_margin + "px";
10    l_margin+=(flg?-1:1)*span;
11    if(l_margin>=max_margin || l_margin<=0) flg=!flg;
12    document.querySelector('#l_margin').textContent=l_margin;
13  },step);
14});

HTML
1<div id="rect">box</div>
2<div id="l_margin"></div>

ローレベル版

javascript
1<script>
2window.onload=function(){
3  var box = document.getElementById('rect');
4  var step=30;
5  var span=10;
6  var max_margin=100;
7  var l_margin=0;
8  var flg=false;
9  var timerId=setInterval(function(){
10    box.style.marginLeft = l_margin + "px";
11    l_margin+=(flg?-1:1)*span;
12    if(l_margin>=max_margin || l_margin<=0) flg=!flg;
13    document.getElementById('l_margin').innerHTML=l_margin;
14  },step);
15};
16</script>
17
18<div id="rect">box</div>
19<div id="l_margin"></div>