我刚刚开始学习使用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>
请任何人,如果你有时间给我看结果,我将非常高兴得到或建议您使用的软件。非常感谢
发布于 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
复制相似问题