每隔n秒重復一次的CSS影片-有解無憂

我正在為一個 svg 元素制作影片，目前如下所示

.r1 {
     transform-box: fill-box;
     transform-origin: 50% 50%;    
     animation-name: simpleRotation,xRotation;
     animation-delay: 0s, 2s;
     animation-duration: 2s;
     animation-iteration-count: 1, 1;
     animation-timing-function: linear;
     animation-direction: normal;
     animation-fill-mode: forwards;
}

@keyframes simpleRotation {
     from {
         transform: rotate(0deg); 
    }
     to {
         transform: rotate(359deg);
  
    }
}
@keyframes xRotation {
     from {
         transform: rotateX(0deg); 
    }
     to {
         transform: rotateX(359deg); 
    }
}

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<rect class="r1" id="r1" x="10" y="10" width="10" height="10" stroke="black" stroke-width="0.25" fill="orange"></rect>    
    </svg>

是否有可能以某種方式對影片（使用javascript）進行排隊，以便影片每2秒在一個回圈中一個接一個地運行，例如simpleRotation(0-2s);xRotation(2-4s);simpleRotation(4-6s);xRotation(6-8s);simpleRotation(8-10s);.....

uj5u.com熱心網友回復：

這是SVG 影片格式比 CSS 關鍵幀影片更容易使用的情況 - 原則上。

SVG 影片可以定義與事件相關的影片的開始時間——其中包括另一個影片的結束時間。通過這種方式，您可以將影片鏈接在一起，并且可以定義回圈：

<animate id="first" begin="0s;second.end" ... />
<animate id="second" begin="first.end" ... />

第一個影片從第二個影片的結尾開始0s并由第二個影片的結尾觸發，第二個影片在第一個影片的結尾觸發。

您的用例的問題是您想要為 3D 變換函式設定影片。SVGtransform在語法上與 CSS 不同transform，并且只支持 2D 轉換。所以下面這個例子充其量只能模擬效果，很多細節都得換種方式寫。

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
  <rect id="r1" x="-5" y="-5" transform="translate(15 15)"
        width="10" height="10" stroke="black" stroke-width="0.25" fill="orange">
    <animateTransform id="simpleRotation" attributeName="transform" type="rotate"
                      additive="sum" begin="0s;xRotation.end" dur="2s"
                      from="0" to="360" />
    <animateTransform id="xRotation" attributeName="transform" type="scale"
                      additive="sum" begin="simpleRotation.end" dur="2s"
                      values="1 1;1 -1;1 1" keyTimes="0;0.5;1"
                      calcMode="spline" keySplines=".375 0 .375 1;.375 0 .375 1" />
  </rect>
</svg>

影片物件的中心最初放置在0,0以簡化以下變換。每個<animateTransform>都有一個additive="sum"屬性，以便它后乘到translate()影片物件上的靜態屬性。
為了模擬xRotate()，scale使用了將 y 軸從 1 縮放到 -1 并回傳的變換。此外，定義了樣條插值以給出平滑“旋轉”的印象。請注意，此模擬僅在沒有perspective.

uj5u.com熱心網友回復：

ccprog 的 svg SMIL 方法的替代方法可能是使用 Web Animations API

關鍵幀影片可以像這樣轉換為影片物件

let ani1 = animEl.animate(
  [{
    transform: "rotate(0deg)"
  }, {
    transform: "rotate(359deg)"
  }], {
    delay: 500,
    duration: 1000,
    iterations: 1
  }
);

另請參閱：MDN：使用 Web 影片 API

例子

顯示代碼片段

let animEl = document.querySelector(".rect1");

let ani1 = animEl.animate(
  [{
    transform: "rotate(0deg)"
  }, {
    transform: "rotate(359deg)"
  }], {
    delay: 500,
    duration: 1000,
    iterations: 1
  }
);

let ani2 = animEl.animate(
  [{
    transform: "rotateX(0deg)"
  }, {
    transform: "rotateX(359deg)"
  }], {
    delay: 500,
    duration: 1000,
    iterations: 1,
  }
);
// pause 2. animation
ani2.pause();

// chain animations
ani1.onfinish = function() {
  ani2.play();
};

ani2.onfinish = function() {
  ani1.play();
};

svg {
  border: 1px solid #ccc;
  display: block;
  width: 10em
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <rect class="rect1" id="r1" x="25" y="25" width="50" height="50" stroke="black" stroke-width="0.25" fill="orange" transform-origin="50 50" ></rect>
</svg>

我們通過暫停第二個開始影片

 ani2.pause();

并添加一個 eventListener 以在第一個影片完成后啟動第二個影片。

ani1.onfinish = function() {
  ani2.play();
};

編輯您也可以使用Dan Wilson 描述的場所

不要錯過 svg 的 SMIL 影片的強大功能

特別是當涉及到 svg 相關的影片時，他們仍然提供了許多 css 影片中沒有的花里胡哨，比如

連續影片：

<animate[...] begin="firstAnimation.end" />

通過begin屬性啟動連續影片（無需任何先前持續時間的計算）的能力真是太棒了——這個優雅的概念應該被用于相應的 css 影片方法。

沿路徑移動元素
獨立的影片——比如加載微調器...... svg 獲勝！

我可以用嗎：

SMIL 影片往往比Web Animations API
擁有更可靠的瀏覽器支持，盡管由于 Internet Explorer 的感激退休，它可以忽略不計。

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/432822.html

標籤：javascript css svg CSS动画

上一篇：將兩個基于貝塞爾曲線的形狀合并為一個以創建新輪廓

下一篇：文本隱藏在SVG后面