svgアニメーション
Q&A
Closed
解決したいこと
vivusで色を付けた後、リセットしループする処理がしたいです。
例）
vivus.jsを使ってsvgアニメーションを作成しているのですが、アニメーションが終わったのちclassを付与し色を付けた後、もう一度初めからアニメーションをループさせたいのですがうまくいきません。エラーも出ずに困っています。どなたかわかる方助けてください。よろしくおねがいします。
該当するソースコード
<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<title></title>
</head>
<body>
<div id="container">
<div id="animation">
<svg version="1.1" id="pen" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" viewBox="0 0 1600 800" xml:space="preserve">
<path id="pen-neck" class="logo-item" d="M586.5 506.5s-38-64 33-140c1 1 50-40 91-16 2 1 67 24 70 94 1 2 15 64-58 79 0 1-51 7-120-9l-16-8z"/>
<path id="pen-face" class="logo-item" d="M600.5 511.5s-45-98 67-120c1 0 70 0 69 89 1 1-9 39-38 43l-15.67 1.927"/>
<path id="pen-body" class="logo-item" d="M734 359.679s113.036-39.317 139.575-42.266c0 .983 57.01-1.966 70.771 23.59 0 .983 16.71-3.932 15.727-20.641 0 0 18.676 11.795 1.966 36.368l-1.966 2.949s30.471 23.59 30.471 54.061c.983.983 23.59 96.327-89.446 123.848.983.983-107.139-4.915-145.473-15.727l-15.932-3.313"/>
<path id="pen-hand" class="logo-item" d="M816.5 461.5s8 7 49-23c0 0 7 5 7 19 0 0-1 32-22 37"/>
<path id="pen-foot" class="logo-item" d="M970.5 501.5h15.521l-9.521 7 15 3-9 6s16 6 16 8-5 14-71 8l-2-1"/>
<path id="pen-mouth" class="logo-item" d="M576.343 483.213 562.5 507.5l25 1"/>
<path id="pen-head" class="logo-item" d="M625.5 472.5s19-2 22-3"/>
</svg>
</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vivus/0.4.4/vivus.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
#container {
position: fixed;
width: 100%;
height: 100%;
z-index: 999;
background:#eee;
text-align:center;
color:#fff;
}
#animation {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#animation svg{
width:300px;
}
#pen path {
fill-opacity: 0;
transition: fill-opacity .5s;
fill: none;
stroke: #333;
}
#pen.done #pen-neck{
fill: #005DBD;
stroke: #000;
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
fill-opacity: 1;
stroke: none;
}
#pen.done #pen-face{
fill: #FFF;
stroke: #000;
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
fill-opacity: 1;
stroke: none;
}
#pen.done #pen-body{
fill: #005DBD;
stroke: #000;
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
fill-opacity: 1;
stroke: none;
}
#pen.done #pen-hand{
fill: none;
stroke: #000;
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
fill-opacity: 1;
stroke: none;
}
#pen.done #pen-foot{
fill: #E9FF25;
stroke: #000;
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
fill-opacity: 1;
stroke: none;
}
#pen.done #pen-mouth{
fill: #E9FF25;
stroke: #000;
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
fill-opacity: 1;
stroke: none;
}
#pen.done #pen-head{
fill: #000;
stroke: #000;
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
fill-opacity: 1;
stroke: none;
}
var stroke;
stroke = new Vivus('pen', {
start:'autostart',
type: 'scenario-sync',
duration: 10,
forceRender: false,
animTimingFunction:Vivus.EASE,
},
function(){
$("#pen").attr("class", "done");
},
//ここがうまく起動しません
function() {
$("#pen").removeAttr("class", "done");
stroke.reset().play();
}
);
0
