SVGを最後同時にアニメーションを終わらせたい

##実装したい動き
SVGアニメーションでロゴに動きを付けてアニメーションが終わってから元のロゴをpng画像を表示させるHPを作成しております。
最初同時にアニメーションを始める事はできるのですが、最初ではなく最後を一緒に終わらせることは可能なのでしょうか？

実際下記で動かしていますがここに何か付け足せればアニメーションが終わる時を統一にできるのでしょうか？
最後が一緒に終わる事が出来れば最初の始まりは一緒でなくても構いませんのでお分かりになる方いらっしゃいましたら
ご伝授の方よろしくお願いします。

LAZY LINE PAINTERを使用しSVGを作成しました。

js
1var pathObj = {
2    "skills": {
3        "strokepath": [
4            {
5                "path": "M 0,67.24 L 26.68  z",//省略してます
6                "duration": 1000
7            },
8            {
9                "path": "M 6.238,232.25 L 6.238   z",//省略してます
10                "duration": 1000
11            },
12            {
13                "path": "M20.909",//省略してます
14                "duration": 1000
15            },
16            {
17                "path": "M21.896",//省略してます
18                "duration": 1000
19            },
20            {
21                "path": "M23.877",//省略してます
22                "duration": 1000
23            },
24            {
25                "path": "M21.896",//省略してます
26                "duration": 1000
27            }
28        ],
29        "dimensions": {
30            "width": 45,
31            "height": 894
32        }
33    }
34}; 
35
36$(document).ready(function(){
37    $('#skills_logo').fadeOut(0, 1);
38    setTimeout(function(){
39        $('#skills').lazylinepainter({
40            "svgData": pathObj,
41            "strokeWidth": 2,
42            "strokeColor": "#000",
43            "drawSequential": false,
44        }).lazylinepainter('paint');
45 
46    setTimeout(function() {
47    // 線画消して元のロゴフェードインする
48        $('#skills_logo').fadeTo(1000, 1);
49        $('#skills').fadeOut(1000);
50        }, 1100);
51 
52     },800);
53});

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

回答1件

ベストアンサー

LAZY LINE PAINTERに詳しくはないのですが, 動作原理上パスの長さが計算できれば後はどうとでもなるでしょう.

例えば次のようにしてパスの長さを揃えることでストロークアニメーションは同時に終了するものと考えられます.

JavaScript
1//パスの長さを求めるpath要素(getTotalLengthメソッドを利用する)
2const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
3//最も長いパスの長さを求める
4const max = pathObj.skills.strokepath.reduce((prev, curr) => {
5	path.setAttribute("d", curr.path);
6	return Math.max(prev, path.getTotalLength());
7}, 0);
8//パスの長さを揃える
9pathObj.skills.strokepath.forEach(strokepath => {
10	const pathstr = strokepath.path;
11	path.setAttribute("d", pathstr);
12	//SVGの描画範囲外に捨てパスを定義し, 先頭に追加する
13	const filler = `M0-100h${max - path.getTotalLength()}`;
14	strokepath.path = filler + pathstr;
15});
16

NOTE:パスの描画速度を変更できるのであれば, それぞれのパスの長さからパスの描画速度を求めることでも対処できます.

投稿2017/12/26 02:03

defghi1977

総合スコア4756

satoshickkk

2017/12/26 02:31

コードありがとうございます。このようなやり方でパスの長さをそろえて同時に終了させる事が出来るなんで驚きました。パスの描画速度を変更すれば同時に終了させることができることは盲点で使用しているLAZY LINE PAINTERではコチラのが設定しやすかったのでパスの描画速度を変更し同時に終わらせました。本当に助かりました、ありがとうございました！

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