我如何為帶有SASS和SMIL選項的SVG裝載機製作生成器

本文詳細介紹了提供SMIL和SASS動畫選項的SVG裝載機生成器的創建。該項目源於學習體驗的融合，為生成可定制的SVG裝載機提供了一種多功能工具。

發電機的起源

三個關鍵因素啟發了發展：

1。莎拉·德拉斯納（Sarah Drasner）的“ SVG動畫”

作者最初接觸SASS循環來自Sarah Drasner的書，特別是有關使用SASS函數進行交錯動畫來對數據可視化進行動畫可視化的章節。這引起了人們對動畫循環的可能性的興趣。

2。裝載機複製請求

複製蘋果式裝載機的請求為新發現的知識提供了實際應用。作者實施了一個SASS循環以有效管理動畫延遲：

 @for $ i從1到12 {
  .loader：type（＃{$ i}）{
    動畫：1S $ I * 0.08S不透明度負載器無限；
  }
}
@keyframes opacityloader {
 到{不透明：0; }
}

這個簡潔的SASS代碼與Vanilla CSS中的同等相同的結果相同：

 .loader：nth-​​type（1）{
  動畫：1s 0.08s opacity Loader Infinite；
}
.loader：nth-​​type（2）{
  動畫：1s 0.16s obacity Loader Infinite;
}

/ * ... */

.loader：nth-​​type（12）{
  動畫：1s 0.96s obacity Loader Infinite;
}
@keyframes opacityloader {
  到{不透明：0; }
}

3。畫廊的想法

SASS循環水平和對裝載機的需求的結合導致了裝載機生成器的概念，從而解決了隨時可用的在線資源中感知到的差距。

雙動畫輸出：SMIL和SASS

SASS輸出的初步發展挑戰導致將Smil動畫納入了替代方案。但是，儘管產出偶爾存在差異，但最終還是整合了這兩種選項。

SMIL與CSS/SASS：關鍵差異

開發過程強調了幾個關鍵區別：

• 資源獨立性：與CSS或SASS不同，SMIL直接在SVG標記中動畫。
• 圖像嵌入： SVG用作圖像或背景時，SMIL動畫持續存在。
• 動畫流動性： Smil動畫通常看起來更順暢，儘管確切的原因尚不清楚。
• 動畫鏈接： SMIL中的additive="sum"依次添加動畫，而CSS/SASS優先列為衝突屬性的最後一個動畫聲明。
• 轉換處理：轉換需要在SASS中進行解決方法，以實現Smil的行為的均等，需要使用<g></g>封裝形狀的元素。

技術堆棧：vue.js和nuxt.js

該項目利用VUE.JS進行基於組件的體系結構，直觀的數據綁定以及易於處理HTML和SVG的易度。 NUXT.JS提供了一個簡化的開發環境，具有自動路由和SEO優化等功能。

示例加載程序用法

發電機的靈活性允許多種集成方法：

• SMIL SVG作為背景圖像：下載生成的SVG並將其用作CSS背景圖像。
• 直接HTML嵌入：將生成的SVG代碼直接嵌入到HTML中。
• SASS循環集成：使用生成的SASS循環對Inline SVG進行動畫。

持續的發展和未來的增強

未來的計劃包括添加第三個樣式選項，以實現更簡單的單元素SVG操作，解決處理自定義動畫參數的挑戰並改善代碼清晰度。該項目的開源性質歡迎貢獻和反饋。

該項目的旅程是由簡單的Sass循環發起的，儘管存在折舊問題，但仍展示了SMIL動畫的功能和多功能性。雖然應檢查瀏覽器支持（使用Caniuse之類的資源），但當前情況表明持續的生存能力。此處省略了詳細的瀏覽器支撐表，以簡短。

以上是我如何為帶有SASS和SMIL選項的SVG裝載機製作生成器的詳細內容。更多資訊請關注PHP中文網其他相關文章！