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

前提・実現したいこと

上記イメージのようなちょうちょの軌跡を動きで表現したいです。最後にちょうちょが現れて羽を動かすアニメーションを作りたいですが、まずは線のアニメーションができたらいいなと思っていますので、そちらのみの質問をさせていただいています。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での質問が初めてのため、言葉足らずなところがあるかもしれませんが
皆様のお知恵を拝借できたら嬉しいです。

行動規範の内容に同意します

回答2件

ベストアンサー

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

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

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 を利用してはみ出した部分を隠してしまうのがポイントです。

方法２　ツールで生成

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

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

投稿2019/07/23 11:16

R.Mizukami

総合スコア1086

ameazu1019

2019/07/24 07:12 編集

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

行動規範の内容に同意します

簡単に思いつく方法では一続きになっているpathをillustrator側で分割してその一つ一つのpathにタグ付けを行いjsやcssでopacityのtransition-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>となっていますが、それとは違うということででしょうか？お手数おかけいたしますが教えていただけますと幸いです。