質問編集履歴
2
実現したいこと・要点を明確にしました。cssを追加しました。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -186,6 +186,22 @@
|
|
|
186
186
|
</body>
|
|
187
187
|
</html>
|
|
188
188
|
```
|
|
189
|
+
```css
|
|
190
|
+
body {
|
|
191
|
+
padding: 0;
|
|
192
|
+
margin: 0;
|
|
193
|
+
height: 100vh;
|
|
194
|
+
background: linear-gradient(0deg,rgba(13,35,93,1) 0%,rgba(0,5,8,1) 70%);/*グラディエーションの角度と色 */
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
#canvas {
|
|
198
|
+
position: fixed;
|
|
199
|
+
left: 0;
|
|
200
|
+
top: 0;
|
|
201
|
+
width: 100%;
|
|
202
|
+
height: 100%;
|
|
203
|
+
}
|
|
204
|
+
```
|
|
189
205
|
### 試したこと
|
|
190
206
|
- keydown 関数内で countUp 関数を使用してキーダウンによるアニメーションの制御を試みましたが、連続したキーダウンに対応できず、アニメーションが重くなる問題が発生しています。
|
|
191
207
|
- 流れ星のアニメーション終了後の制御に関して、MeteorAnimationLoop などを試しましたが、適切なアプローチが見つかっていません。
|
1
実現したいこと・要点を明確にしました。
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
JavaScriptで流れ星のアニメーションを適切に制御する。
|
test
CHANGED
|
@@ -1,10 +1,14 @@
|
|
|
1
|
-
###
|
|
1
|
+
### 前提
|
|
2
2
|
**参考元**
|
|
3
3
|
[Moon Night Meteor Canvas Animation](https://www.youtube.com/watch?v=1pz-r5UzMu8&list=PL9uxHAkvBwk3nj7IZVVmxMuskRSIXNJ-B&index=16)
|
|
4
4
|
|
|
5
5
|
上記リンク先はCanvasを用いたアニメーション作成動画で、HTMLとJavaScriptを使用して、月と煌めく星と流れ星のアニメーションが表示されます。
|
|
6
6
|
動画ではDOMContentLoadedで制御されていますが、これをkeydownが発生すると流れ星のアニメーションが開始されるようなコードを構築しようとしています。（流れ星以外のアニメーションはページロード時に表示）
|
|
7
|
+
### 実現したいこと・要点
|
|
8
|
+
- キーボード押下一回につき、表示される流れ星は一つ。２回３回押せば２個３個表示される。
|
|
9
|
+
- 流れ星のアニメーションは、画面外上部から始まり、画面外下部へ消えて終了がワンループ。
|
|
10
|
+
- 生成された流れ星のスピードは、画面外へ消えるまで常に一定（生成時に決められたスピードの値が変化しないということ）
|
|
7
|
-
|
|
11
|
+
- 流れ星の発生位置、スピードともにランダム。
|
|
8
12
|
|
|
9
13
|
### 発生している問題・エラーメッセージ
|
|
10
14
|
- 連続したキーダウンに対応できていない。連続すると（恐らく）配列に次々と追加され、動作が重くなる。
|