我如何为带有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中文网其他相关文章！