おしえて

Vivus.jpでアニメーションを作りたい

解決済

質問者：apricot1101
質問日時：2021/05/26 11:47
回答数：2件

Vivus.jpを使って、アニメーションを作ろうとしていますが、アニメーションにならず文字(SVG)のみ表示されます。

使い方を調べると、大まかに
1)アニメーションしたい画像(文字)のSVGファイルを作成し、
2)HTMLファイルにvivus.jpを読みこみ、SVGファイルを貼り付ける
とあるので以下のようにやってみました。

<body>
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="500.000000pt" height="500.000000pt" viewBox="0 0 500.000000 500.000000"
preserveAspectRatio="xMidYMid meet">

<g transform="translate(0.000000,500.000000) scale(0.100000,-0.100000)">
<path fill="#524b4b" stroke="#524b4b" d="M2363 4110 c-23 -5 -81 -25 -130 -45 -109 -46 -179 -112 -213 -202
-23 -61 -90 -316 -110 -417 l-12 -58 -61 6 c-68 8 -292 56 -372 80 -27 8 -51
13 -54 11 -8 -8 32 -46 99 -93 36 -26 88 -64 116 -87 28 -22 85 -64 128 -93
l76 -52 0 -183 c0 -100 5 -227 10 -281 12 -122 20 -111 -175 -242 -236 -157
-406 -325 -481 -474 -32 -64 -43 -163 -24 -212 36 -90 166 -259 217 -283 19
-9 60 -21 91 -27 54 -10 66 -8 197 31 77 23 205 67 285 98 80 31 159 56 175
56 17 0 62 -12 101 -26 39 -14 91 -28 115 -32 42 -6 46 -5 57 20 16 35 15 84
-3 135 -8 23 -15 46 -15 50 0 4 37 35 83 70 112 87 297 269 366 360 103 137
178 294 207 433 9 40 17 73 19 75 8 8 48 -11 122 -60 199 -129 320 -279 354
-439 14 -67 -5 -241 -37 -337 -43 -129 -124 -233 -292 -373 -109 -90 -299
-222 -382 -264 -30 -15 -109 -50 -175 -77 l-120 -49 85 5 c47 3 148 18 225 35
658 139 928 340 986 731 38 264 -50 508 -254 696 -115 106 -375 263 -464 280
-27 5 -38 15 -54 48 -45 90 -150 166 -227 166 -23 0 -63 -12 -99 -30 -89 -45
-94 -56 -23 -52 77 5 120 -16 120 -58 0 -17 -4 -30 -9 -30 -34 0 -204 -36
-289 -61 -84 -25 -242 -82 -344 -124 -16 -6 -18 0 -18 65 0 77 25 265 40 306
5 13 17 24 27 24 35 0 258 61 352 97 186 69 324 150 434 253 48 44 67 69 67
87 0 72 -89 165 -228 236 -107 56 -166 99 -288 212 -81 75 -129 108 -152 104
-4 -1 -26 -5 -49 -9z m100 -104 c18 -7 51 -34 74 -60 45 -51 123 -193 123
-224 0 -10 -11 -31 -25 -45 -53 -53 -239 -148 -317 -162 -45 -8 -43 -18 -28
150 10 118 38 232 72 299 31 60 44 66 101 42z m350 -1298 c-16 -74 -58 -183
-85 -220 -104 -145 -271 -308 -417 -407 l-59 -41 -21 88 c-28 123 -51 249 -51
283 0 25 9 36 63 70 99 64 295 157 429 204 68 24 128 44 135 44 6 1 9 -8 6
-21z m-908 -515 c15 -48 45 -128 67 -177 21 -50 42 -96 45 -103 3 -8 -90 -60
-266 -147 -301 -150 -300 -150 -367 -85 -36 34 -83 125 -91 173 -5 30 1 38 63
95 85 78 186 145 374 250 80 44 146 81 147 81 1 0 14 -39 28 -87z"/>
</g>
</svg>

<script src="js/vivus.js"></script>
<script>
new Vivus('test', {duration: 200 , start: 'autostart'});
</script>
</body>

手持ちのソフトにIllustratorがないのでPhotoshop CS5で文字を作成(シェイプに変換)し、PNG形式で保存、PNGからSVG変換するインターネットサービスでSVG変換しました。
この方法がよくないのか、ソース自体に問題があるのか分からず、確認事項等ございましたら教えてください。

現在は、アニメーションにならず「あ」とだけ表示されます。
どうぞよろしくお願いいたします。

svgタグにIDがなかったのでidを追加しました。
また、内容と関係ないかもですが、少し整理して以下のようにしました。

<svg id="test" version="1.0" xmlns="http://www.w3.org/2000/svg"
width="500" height="500" viewBox="0 0 500 500">

補足日時：2021/05/26 12:42
通報する
そしてアニメーションタイプを以下追加しました。

<script src="js/vivus.js"></script>
<script>
new Vivus('test', {duration: 200 , start: 'autostart', type: 'oneByOne'});
</script>

補足日時：2021/05/26 12:43
通報する
遅くなりすみません。Inkscapeというソフトで作ってみました。

<path>を分離してそれぞれ一筆書き風にするところまでできました。
1)　1画目を書いてる途中で、2画目が始まる
2) 文字の筆自体ではなく、筆の輪郭をアニメーションする
ようになっています。
これを
1)　1画目を書き終わったら、2画目、2画目を書き終わったら３画目
2) 筆部分自体をアニメーションする
ようにしたいのですが、確認事項等教えてください。
<path
style="fill:none;stroke:#000000;stroke-width:0.26458px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"　d="省略"/>
<path　省略 />
<path　省略 />
</svg>

補足日時：2021/06/01 12:26
通報する
遅くなりすみません。Inkscapeというソフトで作ってみました。

<path>を分離してそれぞれ一筆書き風にするところまでできました。
1)　1画目を書いてる途中で、2画目が始まる
2) 文字の筆自体ではなく、筆の輪郭をアニメーションする
ようになっています。
これを
1)　1画目を書き終わったら、2画目、2画目を書き終わったら３画目
2) 筆部分自体をアニメーションする
ようにしたいのですが、確認事項等教えてください。
<path
style="fill:none;stroke:#000000;stroke-width:0.26458px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"　d="省略"/>
<path　省略 />
<path　省略 />
</svg>

No.2の回答に寄せられた補足コメントです。補足日時：2021/06/01 12:27
通報する

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： Ogre7077
回答日時：2021/05/27 11:08

書き順でアニメするならば、

* 一画毎の線になるように <path> を分離
* 線も書き順になるように座標指定を見直す
* 線ごとに細かく data 属性で挙動を調整
とすればそれらしくなるかと思いますが、

本質的には vivus は線画をアニメにするものなので、
文字の輪郭をシェイプに変換するのではなく、
ペンツールなどで文字を描く線画データを用意してください。

- 1
- 件

通報する

この回答へのお礼

早速ありがとうございます。
別作業が発生してしまったので後程手持ちのソフトでやってみます。
早々にありがとうございます。

通報する

お礼日時：2021/05/27 16:49

No.1

回答者： Ogre7077
回答日時：2021/05/26 17:22

「あ」の輪郭をアニメーションするなら、

以下のようにしないと輪郭が見えないかと思います。

fill-opacity="0" ← 塗りつぶしを透明に
stroke-width="10px" ← 縮小後に 1px になる輪郭の太さ

輪郭描画後は塗りつぶしたいなら、
アニメーション終了後のコールバック処理にて
fill-opacity 等の余分なスタイルを削除してください