嘗試使用 vanilaanimate()函式為 SVG <path>元素設定影片
小路：
<path id="path1" fill="black" d="M30,30l 50,10 0,50"></path>
JS：
path1.animate([
{ d: `M30,30 l10,10 50,0` },
{ d: `M30,30 l60,10 50,20` },
{ d: `M30,30 l10,10 50,0` },
], {
duration: 1000
})
收到警告但沒有作業：
屬性 d 的關鍵幀值無效：M30,30 l10,10 50,0 屬性 d 的關鍵幀值無效：M30,30 l60,10 50,20 屬性 d 的關鍵幀值無效：M30,30 l10,10 50,0
uj5u.com熱心網友回復：
Node.jsanimate()正在使用Web 影片 API。
所以你需要將你的 d coordiantes 包裝在一個path()函式中，比如在 css 路徑影片中。
path.animate([
{ d: "path('M40 40 l10 10 50 0')" },
], {
duration: 1000,
})
顯示代碼片段
let path0 = document.getElementById("path0");
path0.animate([
// { d: "path('M30,30l 50,10 0,50')" },
{ d: "path('M40 40 l10 10 50 0')" },
{ d: "path('M50,50 l60,10 50,20')"},
{ d: "path('M30,60 l10,20 50,0')" },
], {
duration: 1000,
iterations: Infinity
})svg {
width: 200px;
display: inline-block;
border: 1px solid red;
}
.pathAni {
transition: 0.3s;
}
.pathAniCss {
animation: dAni 3s forwards infinite;
}
@keyframes dAni {
33% {
d: path("M40 40 l10 10 50 0");
}
66% {
d: path("M50,50 l60,10 50,20");
}
100% {
d: path("M30,60 l10,20 50,0");
}
}<svg viewBox="0 0 100 100">
<path class="pathAn0" id="path0" fill="black" d="M30,30l 50,10 0,50"></path>
</svg>
<svg viewBox="0 0 100 100">
<path class="pathAniCss" id="path2" fill="black" d="M30,30l 50,10 0,50"></path>
</svg>來自 W3C 檔案：Web Animations；W3C 作業草案，2021 年 5 月 18 日
Web 影片模型旨在提供表達 CSS 過渡 [CSS-TRANSITIONS-1]、CSS 影片 [CSS-ANIMATIONS-1] 和 SVG [SVG11] 所需的特性。因此，Web Animations 模型的用例是這三個規范的用例的結合。
檢查瀏覽器對path()
Firefox caniuse 報告 2022 的支持：
僅支持 clip-path 和 offset-path 屬性。
測驗瀏覽器支持的一些示例：Animate SVG Path Changes in CSS
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/414824.html
標籤：