回答編集履歴
2
.
test
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
いまのコードだと「2ms 毎に 1px ずつ動かす」となってますが、それだと「2000ms で指定の量の移動がおわる」とはなりません。
|
|
2
2
|
|
|
3
|
-
いまのコードをベースにして考えると、`slide()`が1000回呼ばれたときに目的の量になればいいので、`translate()` には `${Math.floor(distance * position / (duration * 1000 / 2))}px` を指定しましょう。
|
|
3
|
+
いまのコードをベースにして考えると、`slide()`が1000回 (duration * 1000ms / 2ms) 呼ばれたときに目的の量になればいいので、`translate()` には `${Math.floor(distance * position / (duration * 1000 / 2))}px` を指定しましょう。
|
|
4
4
|
* 関数の引数の一つに `(500,300)` と書くと `300` だけが渡ります。一つの配列かオブジェクトに入れて渡すか2つの引数にしましょう。
|
|
5
5
|
* 現在の一般的なシステムでは1秒間に500回も画面更新できません。秒間60回で充分です。`setInterval()` ではなく `requestAnimationFrame()` を使えばシステムの最適なタイミングで画面更新できます。
|
|
6
6
|
|
|
@@ -13,6 +13,7 @@
|
|
|
13
13
|
{transform:'translate(0px,0px)'},
|
|
14
14
|
{transform:'translate(500px,300px)'}
|
|
15
15
|
], {duration:2000}).onfinish = e => {
|
|
16
|
+
// アニメーションAPIでfillすると剥がすのが面倒なので手動fillする
|
|
16
17
|
element.style.transform = 'translate(500px, 300px)';
|
|
17
18
|
};
|
|
18
19
|
```
|
1
.
test
CHANGED
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
[
|
|
13
13
|
{transform:'translate(0px,0px)'},
|
|
14
14
|
{transform:'translate(500px,300px)'}
|
|
15
|
-
], {duration:
|
|
15
|
+
], {duration:2000}).onfinish = e => {
|
|
16
16
|
element.style.transform = 'translate(500px, 300px)';
|
|
17
17
|
};
|
|
18
18
|
```
|