我正在使用以下內容并SMIL animation第一次嘗試。
如果你看一下，你會發現影片并不流暢，最后有一個跳躍。
我怎樣才能讓它順利運行而沒有任何跳躍？
<svg class="layer1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<defs>
<filter id="trip">
<feTurbulence id="turbulence" baseFrequency="10" numOctaves="20" seed="10" stitchTiles="stitch">
<animate id="noiseAnimate" attributeName="baseFrequency" attributeType="XML" from="10" to="15" begin="0s" dur="5s" repeatCount="indefinite"></animate>
</feTurbulence>
<feDisplacementMap in="SourceGraphic" scale="1"></feDisplacementMap>
</filter>
</defs>
<rect class="bg" id="bg" width="200" height="200" fill="black">
</rect>
<rect class="bg" id="bg" x="50" y="50" width="30" height="30" fill="white" filter="url(#trip)">
</rect>
</svg>uj5u.com熱心網友回復：
讓我們忽略你的影片是否是一個好的選擇這個問題，只看一下所涉及的語法。
<animate ... from="10" to="15" repeatCount="indefinite"></animate>
此影片的行為與 CSS屬性 animation-direction: normal相同：
[E]每次影片回圈時，影片將重置為開始狀態并重新開始。
從 10 移動到 15 后，它跳回到 10 并重新開始。
雖然 CSS 具有animation-direction: alternate描述平滑來回移動的影片的值，但 SMIL 不存在相同的值。相反，您必須描述具有三個值的運動：開始值、結束值和開始值。這不能用fromandto屬性來描述，而是用values.
此外，您必須設定keyTimes屬性。在 0...1 的間隔中，它描述了相對于簡單持續時間何時達到該值。
<animate ... values="10;15;10" keyTimes="0;.5;1" repeatCount="indefinite"></animate>
注意：對于影片baseFrequency，您必須設定stitchTiles="noStitch"，否則頻率會在離散步驟中發生變化，以至于Perlin 單元大小始終是原始過濾器區域大小的整數部分。
<svg class="layer1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<defs>
<filter id="trip">
<feTurbulence id="turbulence" baseFrequency="10" numOctaves="20"
seed="10" stitchTiles="noStitch">
<animate id="noiseAnimate" attributeName="baseFrequency" attributeType="XML"
values="10;15;10" keyTimes="0;.5;1" begin="0s" dur="5s"
repeatCount="indefinite"></animate>
</feTurbulence>
<feDisplacementMap in="SourceGraphic" scale="1"></feDisplacementMap>
</filter>
</defs>
<rect class="bg" id="bg" width="200" height="200" fill="black">
</rect>
<rect class="bg" id="bg" x="50" y="50" width="30" height="30" fill="white" filter="url(#trip)">
</rect>
</svg>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/451026.html