SVG从css (无css)中连续生成动画
我刚刚开始学习使用java-script的svg动画。或者只是简单的svg动画。我希望推送到我的动画，让它更简单。如果你向我推荐适用于linux的svg动画程序或简单的浏览器软件。下面是我想要简化的代码。
#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>
请任何人，如果你有时间给我看结果，我将非常高兴得到或建议您使用的软件。非常感谢
回答 1
Stack Overflow用户
发布于 2018-07-30 08:16:39
我能感受到你的痛苦！我已经尝试了几种不同的SVG动画方法。简而言之，要想更好地了解您的选择，请参阅this article by Sarah Drasner (并在Google上搜索她的一些工作--她太棒了！)。
更长的答案：
我不认为有很多应用程序可以像GIF或PNG那样对SVG进行动画处理。即使有，我也不确定动画是否具有一致的浏览器支持，因为它们必须使用SMIL将动画写入SVG代码(如果您阅读了上面的文章，您就会知道它不再是一个受支持的标准)。通过CSS动画，正如你上面所说，我发现即使在Chrome和Firefox之间也是不一致的，更不用说IE和Edge了。所以我认为你最好的选择是一个可以保证跨浏览器支持的JavaScript库。
我从Velocity.js开始--这很好，它工作了，但是我不喜欢这个库的“感觉”。它非常类似于JQuery(实际上，它在某种程度上替代了JQuery的animate()函数)--如果您喜欢JQuery，那么您可能会喜欢Velocity。朱利安·夏皮罗(创作者)拥有some cool demos using Velocity。
最近，我切换到了GreenSock。它非常灵活，我想我可以称之为SVG动画的一种事实上的“行业标准”。我使用Greensock在my personal portfolio site上制作了几个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中的关键帧%定义。
希望这能提供一些方向！
https://stackoverflow.com/questions/51585200
复制相似问题
腾讯云开发者
