質問編集履歴
2
コードを変えて、動きは出るようになったが、ボックスを押すと戻ってしまい、リセットボタンを押しても反応しない。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -11,7 +11,9 @@
|
|
|
11
11
|
ヒントとして、setInterval、clearIntervalとあります。
|
|
12
12
|
|
|
13
13
|
### 発生している問題・エラーメッセージ
|
|
14
|
+
index.html:44 Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
|
|
15
|
+
index.html:11 Uncaught ReferenceError: reset is not defined
|
|
14
|
-
|
|
16
|
+
at HTMLButtonElement.onclick
|
|
15
17
|
|
|
16
18
|
### 該当のソースコード
|
|
17
19
|
|
|
@@ -28,45 +30,40 @@
|
|
|
28
30
|
<div id="wrapper">
|
|
29
31
|
<button onclick="reset()">リセット</button>
|
|
30
32
|
<div id="box">
|
|
31
|
-
|
|
33
|
+
<p>box</p>
|
|
32
34
|
</div><!-- box -->
|
|
33
35
|
</div><!-- wrapper -->
|
|
34
36
|
|
|
35
37
|
<script>
|
|
36
|
-
function slideAnimation(element, direction, distance, duration)
|
|
37
|
-
var position = 0;
|
|
38
|
-
const boxAnimation = document.getElementById("box");
|
|
39
|
-
function boxslideAimation(){
|
|
40
|
-
|
|
41
|
-
if(sw == 0) {
|
|
42
|
-
const element = document.getElementById("box");
|
|
43
|
-
|
|
38
|
+
function slideAnimation(target, moveX, moveY, duration) { // スライドアニメーションを申請する
|
|
39
|
+
if(target.getAttribute("animating") !== null) return; // アニメーション中なら何もしない
|
|
40
|
+
target.setAttribute("animating", ""); // 要素がアニメーション中であることを表す
|
|
41
|
+
const startTime = performance.now(); // アニメーションを開始した時間を保存
|
|
42
|
+
const intervalId = setInterval(slide, 1000 / 60); // 1秒/60フレーム=60fpsでslide関数を実行
|
|
44
|
-
|
|
43
|
+
function slide() { // 経過時間に合わせて位置を変更する
|
|
45
|
-
|
|
44
|
+
const nowTime = performance.now(); // 今の時間を保存
|
|
46
|
-
|
|
47
|
-
function slide() {
|
|
48
|
-
position += 1;
|
|
49
|
-
//
|
|
50
|
-
if
|
|
45
|
+
const diffTime = nowTime - startTime; // 経過時間を保存
|
|
51
|
-
if
|
|
46
|
+
if(diffTime >= duration) { // 経過時間がduration以上なら
|
|
52
|
-
|
|
47
|
+
translate(target, moveX, moveY); // スライドの最後の状態にする（位置ズレ解消のため）
|
|
48
|
+
target.removeAttribute("animating", ""); // 要素がアニメーション中でないことを表す
|
|
49
|
+
clearInterval(intervalId); // インターバルを削除
|
|
53
|
-
|
|
50
|
+
return;
|
|
51
|
+
}
|
|
52
|
+
const nowX = (moveX / duration) * diffTime, // 現在いるべきx座標を表す
|
|
53
|
+
nowY = (moveY / duration) * diffTime; // 現在いるべきy座標を表す
|
|
54
|
+
translate(target, nowX, nowY); // 現在いるべき座標の状態にする
|
|
55
|
+
}
|
|
54
56
|
}
|
|
55
|
-
}else {clearInterval(slide);
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
|
|
57
|
+
function translate(target, x, y) { // 位置をずらすための関数
|
|
59
|
-
}
|
|
60
|
-
|
|
58
|
+
target.style.transform = `translate(${x}px, ${y}px)`;
|
|
61
|
-
}else if(sw > 1) {
|
|
62
|
-
}
|
|
63
59
|
}
|
|
64
60
|
|
|
65
|
-
|
|
61
|
+
document.querySelector("#box").addEventListener("click", e => {
|
|
62
|
+
slideAnimation(e.currentTarget, 500, 300, 2000); // #boxを右に500px下に300pxを2000ミリ秒かけてスライドさせる
|
|
63
|
+
});
|
|
66
|
-
|
|
64
|
+
document.querySelector("reset").addEventListener("click", () => {
|
|
67
|
-
|
|
65
|
+
translate(box, 0, 0); // #boxの位置をリセットする
|
|
68
|
-
sw = 0;
|
|
69
|
-
}
|
|
66
|
+
});
|
|
70
67
|
</script>
|
|
71
68
|
</body>
|
|
72
69
|
</html>
|
1
コードを見やすくしました。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -15,6 +15,7 @@
|
|
|
15
15
|
|
|
16
16
|
### 該当のソースコード
|
|
17
17
|
|
|
18
|
+
```html
|
|
18
19
|
<!DOCTYPE html>
|
|
19
20
|
<html>
|
|
20
21
|
<head>
|
|
@@ -22,6 +23,7 @@
|
|
|
22
23
|
<title>lesson02 アニメーション1</title>
|
|
23
24
|
<link rel="stylesheet" type="text/css" href="base.css">
|
|
24
25
|
</head>
|
|
26
|
+
<html>
|
|
25
27
|
<body>
|
|
26
28
|
<div id="wrapper">
|
|
27
29
|
<button onclick="reset()">リセット</button>
|
|
@@ -31,40 +33,45 @@
|
|
|
31
33
|
</div><!-- wrapper -->
|
|
32
34
|
|
|
33
35
|
<script>
|
|
36
|
+
function slideAnimation(element, direction, distance, duration)
|
|
37
|
+
var position = 0;
|
|
34
|
-
const
|
|
38
|
+
const boxAnimation = document.getElementById("box");
|
|
39
|
+
function boxslideAimation(){
|
|
35
40
|
|
|
41
|
+
if(sw == 0) {
|
|
42
|
+
const element = document.getElementById("box");
|
|
36
|
-
|
|
43
|
+
function slideAnimation(element, direction, distance, duration) {
|
|
37
|
-
|
|
44
|
+
let position = 0;
|
|
38
|
-
function slide() {
|
|
39
|
-
position += 1;
|
|
40
|
-
//
|
|
41
|
-
if (position < distance) {
|
|
42
|
-
if (direction === "rightdown") {
|
|
43
|
-
element.style.transform = `translate(${position}px,${position}px)`;
|
|
44
|
-
sw = 1;
|
|
45
|
-
}
|
|
46
|
-
}else {
|
|
47
|
-
clearInterval(slide);
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
|
-
|
|
45
|
+
const startTime=performance.now();;
|
|
51
46
|
|
|
47
|
+
function slide() {
|
|
48
|
+
position += 1;
|
|
49
|
+
//
|
|
50
|
+
if (position < distance) {
|
|
52
|
-
|
|
51
|
+
if (direction === "rightdown") {
|
|
52
|
+
element.style.transform = `translate(${position}px,${position}px)`;
|
|
53
|
-
|
|
53
|
+
sw = 1;
|
|
54
|
-
|
|
54
|
+
}
|
|
55
|
-
|
|
55
|
+
}else {clearInterval(slide);
|
|
56
|
+
}
|
|
57
|
+
}
|
|
56
|
-
|
|
58
|
+
setInterval(slide, duration);
|
|
59
|
+
}
|
|
57
|
-
|
|
60
|
+
slideAnimation(element, "rightdown", (500,300), 2000);
|
|
58
|
-
|
|
61
|
+
}else if(sw > 1) {
|
|
59
|
-
|
|
62
|
+
}
|
|
60
63
|
}
|
|
61
64
|
|
|
62
|
-
|
|
65
|
+
function styleReset(){
|
|
66
|
+
const boxreset = document.getElementById("box")
|
|
67
|
+
boxreset.style.transform = `translate(0px,0px)`;
|
|
68
|
+
sw = 0;
|
|
63
|
-
|
|
69
|
+
}
|
|
64
|
-
|
|
65
70
|
</script>
|
|
66
71
|
</body>
|
|
67
72
|
</html>
|
|
73
|
+
```
|
|
68
74
|
|
|
69
75
|
|
|
70
76
|
|
|
77
|
+
|