質問編集履歴
2
タイトル修正
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
Vueでsvgを1,5秒毎に変化させたいが、うまくいきません。
|
|
1
|
+
Vueでsvgを1,5秒毎に変態（大きさを変化させる）させたいが、うまくいきません。
|
body
CHANGED
|
File without changes
|
1
言葉遣い訂正
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
Vueでsvgを1,5秒毎に
|
|
1
|
+
Vueでsvgを1,5秒毎に変化させたいが、うまくいきません。
|
body
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
### 前提・実現したいこと
|
|
2
2
|
|
|
3
|
-
Vue.jsでsvgを作成し、svg内にある2つのcircleを1.5秒毎に「
|
|
3
|
+
Vue.jsでsvgを作成し、svg内にある2つのcircleを1.5秒毎に「変態（大きさを変える）」させたいと考えています。
|
|
4
4
|
※ただし、この2つのcircleはrequestAnimationFrameでtranslateが常に実行されているため、一定の速度で動き続けています。
|
|
5
5
|
|
|
6
|
-
私は
|
|
6
|
+
私は変態させるために、circleのr要素を一時的に「大きくする(rを+5)→小さくする(rを-5)」を行おうと考え、下記の該当のソースコードのような実装を行いました。
|
|
7
7
|
|
|
8
8
|
### 発生している問題・エラーメッセージ
|
|
9
9
|
|
|
10
10
|
しかし、
|
|
11
11
|
「大きくする(rを+5)→小さくする(rを-5)」
|
|
12
|
-
のメソッドが一瞬で完了してしまうため、
|
|
12
|
+
のメソッドが一瞬で完了してしまうため、変態が確認できません（下記gif参照）
|
|
13
13
|
|
|
14
14
|
|
|
15
15
|
|
|
@@ -117,5 +117,5 @@
|
|
|
117
117
|
|
|
118
118
|
### お聞きしたいこと
|
|
119
119
|
|
|
120
|
-
* 「
|
|
120
|
+
* 「変態」についてのロジックは他にどのような方法が考えられ、どのような実装になりますでしょうか？
|
|
121
121
|
* 「大きくする(rを+5)→小さくする(rを-5)」のロジックの場合、きれいに描くにはどのような修正が必要でしょうか？
|