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

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

新規登録して質問してみよう
ただいま回答率
85.50%
SVG

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

2485閲覧

illustratorで描いた点線の曲線が左から右に表示させるアニメーションをつくりたい

ameazu1019

総合スコア13

SVG

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2019/07/12 16:13

編集2019/07/16 00:57

前提・実現したいこと

イメージ説明

上記イメージのようなちょうちょの軌跡を動きで表現したいです。最後にちょうちょが現れて羽を動かすアニメーションを作りたいですが、まずは線のアニメーションができたらいいなと思っていますので、そちらのみの質問をさせていただいています。svgで作るのかなと思い、svgで試していますが、他の方法でも可能でしたらご教示いただけますと幸いです。

該当のソースコード

svg

1<svg id="レイヤー_1" data-name="レイヤー 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1060.16 330.76" style=""> 2 <defs> 3 <style>.cls-1{fill:none;stroke:#101010;stroke-linecap:round;stroke-linejoin:round;stroke-width:5px;}</style> 4 </defs> 5 6 <title>アートボード 2</title> 7 8 <path class="cls-1 VAqfrSel_0" d="M2.5,308.82s126.26,31,203,14.68c131.1-27.94,228.39-123.45,280.83-167.64,63.76-53.73,275.82-244.65,571.34-100.65"></path> 9 <style data-made-with="vivus-instant"> 10 .VAqfrSel_0{ 11 stroke-dasharray:5 100; <!--長さの数値をコンマまたはスペースで区切ることで点線や破線のパターンを指定する--> 12 stroke-dashoffset:500; <!--点線の始まりの位置を指定--> 13 animation:VAqfrSel_draw 1500ms ease-out 0ms forwards; 14 } 15 @keyframes VAqfrSel_draw{100%{stroke-dashoffset:0;}} 16 @keyframes VAqfrSel_fade{0%{stroke-opacity:1;}100%{stroke-opacity:1;}100%{stroke-opacity:0;}} 17 </style> 18</svg>

試したこと

https://maxwellito.github.io/vivus-instant/
でまず直線状態のsvgファイルをダウンロードし、stroke-dasharrayとstroke-dashoffsetで点線に調整しましたが
軌跡をたどるような動きではなく、最初から線の全体が現れていて、点線が流れる動きになってしまいました。
点線にせず、直線のままだと左から右に軌跡を描くようなアニメーションになります。

初心者及びterateilでの質問が初めてのため、言葉足らずなところがあるかもしれませんが
皆様のお知恵を拝借できたら嬉しいです。

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

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

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

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

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

guest

回答2

0

ベストアンサー

方法1 コンテナで囲う方法

簡単なのは、コンテナで囲い、コンテナを徐々に広げる方法です。
「奇跡に沿って」ではなく、「左から右へ」になってしまいますが、少なくともご提示の図のように左へ戻る軌跡がなければキーフレームで調整できます。

javascript

1<div class="container"> 2 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1060.16 330.76" width="600px" height="400px"> 3 <defs> 4 <style>.cls-1{fill:none;stroke:#101010;stroke-linecap:round;stroke-linejoin:round;stroke-width:5px;}</style> 5 </defs> 6 <path class="cls-1 VAqfrSel_0" d="M2.5,308.82s126.26,31,203,14.68c131.1-27.94,228.39-123.45,280.83-167.64,63.76-53.73,275.82-244.65,571.34-100.65"></path> 7 <style data-made-with="vivus-instant"> 8 .VAqfrSel_0 { 9 stroke-dasharray:5 100; 10 stroke-dashoffset:500; 11 } 12 </style> 13 </svg> 14</div> 15<style> 16 .container { 17 height: 400px; 18 overflow: hidden; 19 animation: slideRight 1500ms ease-out 0ms forwards; 20 } 21 @keyframes slideRight { 22 0% { width: 0px; } 23 100% { width: 600px; } 24 } 25</style>

コンテナの overflow: hidden を利用してはみ出した部分を隠してしまうのがポイントです。

方法2 ツールで生成

Adobe Animate を利用すれば、ユーザーインターフェースを利用してアニメーションを作成し、HTML + javascript の形式で出力を作成してくれます。有料ソフトですが、Illustrator をお持ちなら或いは……

プラットフォームタイプを HTML5 Canvas にし、作成したアニメーションを パブリッシュ で出力すれば Webサイトで利用できる形の出力になります。

投稿2019/07/23 11:16

R.Mizukami

総合スコア1077

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

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

ameazu1019

2019/07/24 07:12 編集

R.Mizukami様 ご回答いただきありがとうございます! 表現したかった動きがそのまま再現されていて、しかもコードまで書いていただきとても分かりやすく勉強になりました! Adobe Animateのこともはじめて知りました。複雑な動きでもこちらのツールを使いこなせば簡単にWebに反映できそうですね。早速ダウンロードしました。こちらも時間があるときに触ってみたいと思います!本当にありがとうございました!
guest

0

簡単に思いつく方法では一続きになっているpathをillustrator側で分割してその一つ一つのpathにタグ付けを行いjsやcssでopacitytransition-delayをかけてやる方法です.

あと質問の文字化けはともかくMarkdownでsvgのコード部分をくくったほうが見やすいです.

<追記>
やってみましたがIllustratorで破線の分離は難しいようですね.ネット上を探すと分離させるスクリプトがあるかもしれません.ブラシを使うやり方もあるようです.
通常でできることは波線をアウトライン化をしてしまうか点線のようなので波線を目安に点を配置するという方法です.

パスそのままだとすると左からワイプ表示という手がつかえるかもしれません.

投稿2019/07/14 13:55

編集2019/07/16 15:13
Weapon

総合スコア106

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

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

ameazu1019

2019/07/15 04:26

Weapon様 ご回答いただきありがとうございます! jsやcssでopacityのtransition-delayをかけてやる方法 ↑こちらの方法でした場合はパスを分割しないと難しいでしょうか? コード部分見づらくて申し訳ありません… ダウンロードしたコードをそのまま張り付けてしまいました。 svgのコード部分をくくったほうが見やすいとのことですが、<svg id=~・・・></svg>となっていますが、それとは違うということででしょうか? お手数おかけいたしますが教えていただけますと幸いです。
H40831

2019/07/15 17:21

Teratailの投稿部分にはマークダウン記法という書き方がつかえるので、 マークダウン記法のうちの1つである、コードブロックという機能を使って、コード部分をひとまとめにしたほうがいいというアドバイスだと思います。コード自体の内容については言及されてないです。
ameazu1019

2019/07/16 00:59 編集

H40831様 ご親切に教えていただきありがとうございます! 早速コードブロックの機能を使って編集したいと思います。
ameazu1019

2019/07/24 06:34 編集

Weapon様 追記読みました、お返事がおそくなり申し訳ありません。 点を配置するやり方か、ワイプで表示させるやり方で色々試してみたいと思います! ありがとうございました!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問