时间戳

首页 > 解决方案 > SVG 从 css 中继续动画（没有 css）

javascript - SVG 从 css 中继续动画（没有 css）

问题描述

我刚刚结束使用 java-script 学习 svg 动画。或者只是简单的 svg 动画。我想推动我的动画以使其更简单。如果你建议我 svg 用于 linux 的动画程序或简单的浏览器软件。这是我想简化的代码。

#r1
{    -webkit-animation: r1 12s ease-in-out infinite;
    -moz-animation: r1 12s ease-in-out infinite;
    -o-animation: r1 12s ease-in-out infinite;
    animation: r1 12s ease-in-out infinite;
}

@-webkit-keyframes r1 {
    0% {
        display: none;
        opacity: 0;
    }

    25% {
        display: block;
        opacity: 0.25;
    }
  98% {
        display: block;
        opacity: 0.25;
    }
  100% {
        display: block;
        opacity: 0;
    }
}
#r2
{    -webkit-animation: r2 12s ease-in-out infinite;
    -moz-animation: r2 12s ease-in-out infinite;
    -o-animation: r2 12s ease-in-out infinite;
    animation: r2 12s ease-in-out infinite;
}

@-webkit-keyframes r2 {
    0% {
        display: none;
        opacity: 0;
    }

    25% {
        display: block;
        opacity: 0;
    }
  50% {
        display: block;
        opacity: 0.25;
    }

  98% {
        display: block;
        opacity: 0.25;
    }
  100% {
        display: block;
        opacity: 0;
    }
}
#r3
{    -webkit-animation: r3 12s ease-in-out infinite;
    -moz-animation: r3 12s ease-in-out infinite;
    -o-animation: r3 12s ease-in-out infinite;
    animation: r3 12s ease-in-out infinite;
}

@-webkit-keyframes r3 {
    0% {
        display: none;
        opacity: 0;
    }
  50% {
        display: block;
        opacity: 0;
    }
      75% {
        display: block;
        opacity: 0.25;
    }

  98% {
        display: block;
        opacity: 0.25;
    }
  100% {
        display: block;
        opacity: 0;
    }
}
#r4
{    -webkit-animation: r4 12s ease-in-out infinite;
    -moz-animation: r4 12s ease-in-out infinite;
    -o-animation: r4 12s ease-in-out infinite;
    animation: r4 12s ease-in-out infinite;
}

@-webkit-keyframes r4 {
    0% {
        display: none;
        opacity: 0;
    }
      75% {
        display: block;
        opacity: 0;
    }
        90% {
        display: block;
        opacity: 0.25;
    }

  98% {
        display: block;
        opacity: 0.25;
    }
  100% {
        display: block;
        opacity: 0;
    }
}
<svg width="250" height="250">

<rect x="100" y="-75" width="150" height="150" id="r1"
style="fill:red;stroke: rgb(252, 156, 156);stroke-width:10;opacity:0.25; stroke-radius:20;" transform="rotate(45)"></rect>



 <rect x="100" y="-75" width="125" height="125"  id="r2"
style="fill:red;stroke: rgb(252, 156, 156);stroke-width:10;opacity:0.25; stroke-radius:20;" transform="rotate(45)"></rect>


 <rect x="100" y="-75" width="100" height="100" id="r3"
style="fill:red;stroke: rgb(252, 156, 156);stroke-width:10;opacity:0.25; stroke-radius:20;" transform="rotate(45)" id="r3">
</rect>


 <rect x="100" y="-75" width="75" height="75" id="r4"
style="fill:red;stroke: rgb(252, 156, 156);stroke-width:10;opacity:0.25; stroke-radius:20;" transform="rotate(45)" id="r4">
</rect>
</svg>

如果您有时间向我展示结果，我将很高兴获得或建议您使用的软件。非常感谢

标签： javascriptanimationsvg

解决方案

我感受到了你的痛苦！我尝试了几种不同的 SVG 动画方法。简短的回答，要对您的选择有一个很好的概述，请参阅Sarah Drasner 的这篇文章（以及谷歌她的一些工作——她太棒了！）。

更长的答案：

我认为没有很多应用程序可以像 GIF 或 PNG 那样对 SVG 进行动画处理。即使有，我也不确定动画是否有一致的浏览器支持，因为他们必须使用 SMIL 将动画写入 SVG 代码（如果你阅读了上面的文章，你会知道不再是一个坚持的标准）。如上所述，通过 CSS 制作动画，我发现即使在 Chrome 和 Firefox 之间也不一致，更不用说 IE 和 Edge。所以我认为你最好的选择确实是一个可以保证跨浏览器支持的 JavaScript 库。

我从Velocity.js开始——这很好，它有效，但我只是不喜欢图书馆的“感觉”。它非常类似于 JQuery（实际上，它有点“替代” JQuery 的 animate() 函数）——如果你喜欢 JQuery，你可能喜欢 Velocity。Julian Shapiro（创建者）有一些很酷的使用 Velocity 的演示。

最近，我切换到GreenSock。它超级灵活，我想我会称它为 SVG 动画的事实上的“行业标准”。我使用 Greensock在我的个人作品集网站上制作了几个 SVG 动画。加载器图标如下所示：

try{
    var elone = document.getElementById('one')
    var eltwo = document.getElementById('two')
    var elthree = document.getElementById('three')
    var elfour = document.getElementById('four')
    TweenMax.to(elone, .7, { attr:{ r: 10, cx: 20, fill: '#aaa' }, repeat: -1, ease: Power2.easeInOut })
    TweenMax.to(eltwo, .7, { attr:{ r: 13, cx: 55, fill: '#fff' }, repeat: -1, ease: Power2.easeInOut })
    TweenMax.to(elthree, .7, { attr:{ r: 10, cx: 90, fill: '#aaa' }, repeat: -1, ease: Power2.easeInOut })
    TweenMax.to(elfour, .7, { attr:{ r: 5, cx: 80, fill: '#222' }, repeat: -1, ease: Power2.easeInOut })
}
catch(err) {
    console.log('GreenSock animation library failed to load or is unsupported; some animations will not work properly.')
}

非常简单——在 SVG 文件中定义一个引用元素的变量，然后为它们设置动画。您甚至可以创建自定义缓动曲线（动画末尾的 Power2.ease 内容），我发现它确实减少了我的 CSS 中的关键帧 % 定义。

希望这能提供一些方向！

推荐阅读