質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

SVG

SVGは、XMLを基盤とした2Dベクター画像記述言語。画像を線・面といった図形の集合体として扱うベクター画像のため、環境に適した表示が可能です。アニメーション機能もサポートされており、簡単なインタラクティブコンテンツ作成もできます。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

0回答

686閲覧

Vueでsvgを1,5秒毎に変態(大きさを変化させる)させたいが、うまくいきません。

Daimian

総合スコア53

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

SVG

SVGは、XMLを基盤とした2Dベクター画像記述言語。画像を線・面といった図形の集合体として扱うベクター画像のため、環境に適した表示が可能です。アニメーション機能もサポートされており、簡単なインタラクティブコンテンツ作成もできます。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/06/19 10:47

編集2020/06/19 10:50

前提・実現したいこと

Vue.jsでsvgを作成し、svg内にある2つのcircleを1.5秒毎に「変態(大きさを変える)」させたいと考えています。
※ただし、この2つのcircleはrequestAnimationFrameでtranslateが常に実行されているため、一定の速度で動き続けています。

私は変態させるために、circleのr要素を一時的に「大きくする(rを+5)→小さくする(rを-5)」を行おうと考え、下記の該当のソースコードのような実装を行いました。

発生している問題・エラーメッセージ

しかし、
「大きくする(rを+5)→小さくする(rを-5)」
のメソッドが一瞬で完了してしまうため、変態が確認できません(下記gif参照)

イメージ説明

該当のソースコード

Vue

1<template> 2 <svg class="whole"> 3 <template v-for="(circle, index) in $data.dataArray"> 4 <circle 5 :key="`circle_${index}`" 6 :r="circle.radius" 7 :cx="circle.cx" 8 :cy="circle.cy" 9 :stroke="circle.stroke" 10 :fill="circle.fill" 11 /> 12 </template> 13 </svg> 14</template> 15 16<script> 17export default { 18 data() { 19 return { 20 dataArray: [ 21 { 22 radius: 10, 23 cx: 100, 24 cy: 100, 25 stroke: 'white', 26 fill: 'black' 27 }, 28 { 29 radius: 15, 30 cx: 300, 31 cy: 100, 32 stroke: 'white', 33 fill: 'gray' 34 } 35 ], 36 reduced: 1000 37 }; 38 }, 39 methods: { 40 translate() { 41 const { 42 width, 43 height 44 } = this.$el.getBoundingClientRect(); 45 46 this.$data.dataArray.forEach((data) => { 47 if (data.cx <= width) { 48 data.cx += 1; 49 } 50 if (data.cy <= height) { 51 data.cy += 1; 52 } 53 }); 54 }, 55 async swell() { 56 await this.$data.dataArray.forEach((data) => { 57 data.radius += 5; 58 }); 59 }, 60 async shrink() { 61 await this.$data.dataArray.forEach((data) => { 62 data.radius -= 5; 63 }); 64 }, 65 async move() { 66 await this.swell(); 67 await this.shrink(); 68 }, 69 run() { 70 this.$data.reduced -= 0.1; 71 72 if(this.$data.reduced > 0.001) { 73 this.translate(); 74 setInterval(this.move, 1500); 75 requestAnimationFrame(this.run); 76 } else { 77 this.$data.reduced = 0; 78 } 79 } 80 }, 81 mounted () { 82 this.run(); 83 }, 84}; 85</script> 86 87<style scoped> 88.whole { 89 width: 100vw; 90 height: 100vh; 91} 92</style> 93

試したこと

sleepやsetTimeoutを実装し、一度力技で確認する間をおいてみたのですがうまくいきません。

お聞きしたいこと

  • 「変態」についてのロジックは他にどのような方法が考えられ、どのような実装になりますでしょうか?
  • 「大きくする(rを+5)→小さくする(rを-5)」のロジックの場合、きれいに描くにはどのような修正が必要でしょうか?

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問