我似乎無法解決以下問題。我正在創建一個劊子手游戲并使用自繪制的 svg（劊子手）然后我嘗試將鉛筆 svg 從引導圖示調整為劊子手 svg，以便看起來劊子手是用鉛筆繪制的。
我唯一的問題是鉛筆應該總是與我的 svg 成一個角度，這樣看起來筆尖就在接觸 svg。
以下是我的代碼。正如您所看到的，鉛筆尖并不總是在我試圖繪制的 svg 線上，因為它正在四處移動。
有沒有辦法解決它？如果不是，我將如何以其他方式完成該任務？
謝謝大家！
function animateHangman(target)
{
anime({
targets: '#hangman-animation #svg5 ' target,
strokeDashoffset: [anime.setDashoffset, 0],
easing: 'easeInOutSine',
opacity: [0, 1],
duration: 2000,
});
var path = anime.path('#hangman-animation #svg5 ' target);
anime({
targets: '#pencil',
translateX: path('x'),
translateY: path('y'),
rotate: path('angle'),
easing: 'linear',
duration: 1900,
opacity: [0, 1]
});
}
var elements = ['#startblock', '#pillar', '#crossbar', '#stabilizer', '#rope', '#stickhead', '#stickbody', '#rightarm', '#leftarm', '#rightleg', '#leftleg'];
function delay(time)
{
return new Promise(resolve => setTimeout(resolve, time));
}
elements.forEach((el, index) => {
setTimeout(() => {
animateHangman(el);
}, 1000 * index)
});#hangman-animation {
position: relative;
}
#startblock {
opacity: 0;
}
#pillar {
opacity: 0;
}
#crossbar {
opacity: 0;
}
#stabilizer {
opacity: 0;
}
/*#headrope {
opacity: 0;
}*/
#stickhead {
opacity: 0;
}
#rope {
opacity: 0;
}
#stickbody {
opacity: 0;
}
#rightarm {
opacity: 0;
}
#leftarm {
opacity: 0;
}
#rightleg {
opacity: 0;
}
#leftleg {
opacity: 0;
}
#svg5 {
border: #000 dashed 1px;
padding: 3rem;
}
.square {
width: 5px;
height: 5px;
fill: darkgreen;
opacity: 0;
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" integrity="sha384-ejwKkLla8gPP8t2u0eQyL0Q/4ItcnyveF505U0NIobD/SMsNyXrLti6CWaD0L52l" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<div id="hangman-animation" class="mt-4 mb-3">
<svg
width="250px"
height="250px"
viewBox="0 0 132.40746 133.18132"
version="1.1"
id="svg5"
inkscape:version="1.1.2 (b8e25be833, 2022-02-05)"
sodipodi:docname="sp_hangman_4.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview7"
pagecolor="#505050"
bordercolor="#eeeeee"
borderopacity="1"
inkscape:pageshadow="0"
inkscape:pageopacity="0"
inkscape:pagecheckerboard="0"
inkscape:document-units="mm"
showgrid="false"
inkscape:zoom="0.5"
inkscape:cx="121"
inkscape:cy="230"
inkscape:window-width="1920"
inkscape:window-height="1017"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1"
inkscape:current-layer="svg5"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0" />
<defs
id="defs2" />
<g id="pencil">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil" viewBox="0 0 16 16">
<path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"/>
</svg>
</g>
<path
style="fill:none;stroke:#000000;stroke-width:0.211347;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 0.285709,132.847 43.289791,0.228 0.1789,-10.821 -16.994,-5.809 H 14.4175 l -14.310675,5.581 z"
id="startblock" />
<path
style="fill:none;stroke:#000000;stroke-width:0.264583;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="M 14.4252,116.467 H 26.7555 L 27.1129,12.1056 H 15.3187 Z"
id="pillar" />
<path
style="fill:none;stroke:#000000;stroke-width:0.264583;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="M 0.843947,12.463 27.1129,12.1056 H 125.398 V 0.13273 L 0.665247,0.66883 Z"
id="crossbar" />
<path
style="fill:none;stroke:#000000;stroke-width:0.264583;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="M 27.1129,27.6526 44.6255,11.927 59.6364,12.1057 26.7555,40.1616 Z"
id="stabilizer" />
<g
id="headrope"
inkscape:label="headrope" />
<path
id="rope"
style="fill:none;stroke:#000000;stroke-width:0.20767;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 116.996,12.1075 0.721,21.8865 z" />
<ellipse
style="fill:#000000;stroke-width:0.264583"
id="stickhead"
cx="117.93734"
cy="39.625481"
rx="7.2373662"
ry="7.460743"
inkscape:label="stickhead" />
<path
style="fill:none;stroke:#000000;stroke-width:0.264583;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 118.105,47.0091 0.347,22.6185"
id="stickbody" />
<path
style="fill:none;stroke:#000000;stroke-width:0.264583;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 118.357,53.7378 13.995,-6.4759"
id="rightarm" />
<path
style="fill:none;stroke:#000000;stroke-width:0.264583;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="M 118.357,53.7378 105.563,47.2619"
id="leftarm" />
<path
style="fill:none;stroke:#000000;stroke-width:0.264583;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 118.452,69.6276 9.604,13.1415"
id="rightleg" />
<path
style="fill:none;stroke:#000000;stroke-width:0.264583;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 118.452,69.6276 -9.35,12.1306"
id="leftleg" />
</svg>
</div>uj5u.com熱心網友回復：
如果您希望特定點接觸它所跟蹤的路徑，則需要確保該點位于 SVG 空間中的 0,0 處。對于您的鉛筆，看起來像輕推它 16 個單位讓它走上正軌。最重要的是，您需要確保路徑和鉛筆影片之間的持續時間和緩動匹配，否則它們將彼此不同步。
我注意到的唯一另一件事是您將影片間隔僅 1000 毫秒。由于您只有一支鉛筆，您將有多個影片相互爭奪控制它。最新的影片將獲勝，這就是為什么它在跳到下一條之前永遠不會完成一條線。如果這不是故意的，您可以為每個鉛筆創建一個新鉛筆，并在影片完成使用complete回呼時將其銷毀。
function animateHangman(target)
{
anime({
targets: '#hangman-animation #svg5 ' target,
strokeDashoffset: [anime.setDashoffset, 0],
easing: 'easeInOutSine',
opacity: {value: [0, 1], duration: 250},
duration: 1900,
});
var path = anime.path('#hangman-animation #svg5 ' target);
anime({
targets: '#pencil',
translateX: path('x'),
translateY: path('y'),
rotate: path('angle'),
easing: 'easeInOutSine',
duration: 1900,
opacity: {value: [0, 1], duration: 250},
});
}
var elements = ['#startblock', '#pillar', '#crossbar', '#stabilizer', '#rope', '#stickhead', '#stickbody', '#rightarm', '#leftarm', '#rightleg', '#leftleg'];
function delay(time)
{
return new Promise(resolve => setTimeout(resolve, time));
}
elements.forEach((el, index) => {
setTimeout(() => {
animateHangman(el);
}, 1000 * index)
});#hangman-animation {
position: relative;
}
#startblock {
opacity: 0;
}
#pillar {
opacity: 0;
}
#crossbar {
opacity: 0;
}
#stabilizer {
opacity: 0;
}
/*#headrope {
opacity: 0;
}*/
#stickhead {
opacity: 0;
}
#rope {
opacity: 0;
}
#stickbody {
opacity: 0;
}
#rightarm {
opacity: 0;
}
#leftarm {
opacity: 0;
}
#rightleg {
opacity: 0;
}
#leftleg {
opacity: 0;
}
#svg5 {
border: #000 dashed 1px;
padding: 3rem;
}
.square {
width: 5px;
height: 5px;
fill: darkgreen;
opacity: 0;
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" integrity="sha384-ejwKkLla8gPP8t2u0eQyL0Q/4ItcnyveF505U0NIobD/SMsNyXrLti6CWaD0L52l" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<div id="hangman-animation" class="mt-4 mb-3">
<svg
width="250px"
height="250px"
viewBox="0 0 132.40746 133.18132"
version="1.1"
id="svg5"
inkscape:version="1.1.2 (b8e25be833, 2022-02-05)"
sodipodi:docname="sp_hangman_4.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview7"
pagecolor="#505050"
bordercolor="#eeeeee"
borderopacity="1"
inkscape:pageshadow="0"
inkscape:pageopacity="0"
inkscape:pagecheckerboard="0"
inkscape:document-units="mm"
showgrid="false"
inkscape:zoom="0.5"
inkscape:cx="121"
inkscape:cy="230"
inkscape:window-width="1920"
inkscape:window-height="1017"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1"
inkscape:current-layer="svg5"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0" />
<defs
id="defs2" />
<g id="pencil">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil" viewBox="0 0 16 16" x="0" y="-16">
<path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z" />
</svg>
</g>
<path
style="fill:none;stroke:#000000;stroke-width:0.211347;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 0.285709,132.847 43.289791,0.228 0.1789,-10.821 -16.994,-5.809 H 14.4175 l -14.310675,5.581 z"
id="startblock" />
<path
style="fill:none;stroke:#000000;stroke-width:0.264583;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="M 14.4252,116.467 H 26.7555 L 27.1129,12.1056 H 15.3187 Z"
id="pillar" />
<path
style="fill:none;stroke:#000000;stroke-width:0.264583;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="M 0.843947,12.463 27.1129,12.1056 H 125.398 V 0.13273 L 0.665247,0.66883 Z"
id="crossbar" />
<path
style="fill:none;stroke:#000000;stroke-width:0.264583;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="M 27.1129,27.6526 44.6255,11.927 59.6364,12.1057 26.7555,40.1616 Z"
id="stabilizer" />
<g
id="headrope"
inkscape:label="headrope" />
<path
id="rope"
style="fill:none;stroke:#000000;stroke-width:0.20767;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 116.996,12.1075 0.721,21.8865 z" />
<ellipse
style="fill:#000000;stroke-width:0.264583"
id="stickhead"
cx="117.93734"
cy="39.625481"
rx="7.2373662"
ry="7.460743"
inkscape:label="stickhead" />
<path
style="fill:none;stroke:#000000;stroke-width:0.264583;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 118.105,47.0091 0.347,22.6185"
id="stickbody" />
<path
style="fill:none;stroke:#000000;stroke-width:0.264583;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 118.357,53.7378 13.995,-6.4759"
id="rightarm" />
<path
style="fill:none;stroke:#000000;stroke-width:0.264583;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="M 118.357,53.7378 105.563,47.2619"
id="leftarm" />
<path
style="fill:none;stroke:#000000;stroke-width:0.264583;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 118.452,69.6276 9.604,13.1415"
id="rightleg" />
<path
style="fill:none;stroke:#000000;stroke-width:0.264583;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 118.452,69.6276 -9.35,12.1306"
id="leftleg" />
</svg>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/459453.html
標籤：javascript css 动画片 svg 动漫.js