【发布时间】：2018-10-09 03:08:17
【问题描述】：
我想在浏览器加载 Angular 5 的脚本和其他资源时播放动画。
例如这个 SVG 动画：
<?xml version="1.0" standalone="no"?>
<!-- Generator: SVG Circus (http://svgcircus.com) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg id="SVG-Circus-fd09094d-ef46-ec99-9c7e-2ce68491a50b" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
<rect id="actor_8" x="30" y="45" width="10" height="10" opacity="1" fill="rgba(242,162,12,1)" fill-opacity="1" stroke="rgba(166,3,17,1)" stroke-width="1" stroke-opacity="1" stroke-dasharray="">
</rect>
<rect id="actor_7" x="30" y="60" width="10" height="10" opacity="1" fill="rgba(242,162,12,1)" fill-opacity="1" stroke="rgba(166,3,17,1)" stroke-width="1" stroke-opacity="1" stroke-dasharray="">
</rect>
<rect id="actor_6" x="45" y="60" width="10" height="10" opacity="1" fill="rgba(242,162,12,1)" fill-opacity="1" stroke="rgba(166,3,17,1)" stroke-width="1" stroke-opacity="1" stroke-dasharray="">
</rect>
<rect id="actor_5" x="60" y="60" width="10" height="10" opacity="1" fill="rgba(242,162,12,1)" fill-opacity="1" stroke="rgba(166,3,17,1)" stroke-width="1" stroke-opacity="1" stroke-dasharray="">
</rect>
<rect id="actor_4" x="60" y="45" width="10" height="10" opacity="1" fill="rgba(242,162,12,1)" fill-opacity="1" stroke="rgba(166,3,17,1)" stroke-width="1" stroke-opacity="1" stroke-dasharray="">
</rect>
<rect id="actor_3" x="60" y="30" width="10" height="10" opacity="1" fill="rgba(242,162,12,1)" fill-opacity="1" stroke="rgba(166,3,17,1)" stroke-width="1" stroke-opacity="1" stroke-dasharray="">
</rect>
<rect id="actor_2" x="45" y="30" width="10" height="10" opacity="1" fill="rgba(242,162,12,1)" fill-opacity="1" stroke="rgba(166,3,17,1)" stroke-width="1" stroke-opacity="1" stroke-dasharray="">
</rect>
<rect id="actor_1" x="30" y="30" width="10" height="10" opacity="1" fill="rgba(242,162,12,1)" fill-opacity="1" stroke="rgba(166,3,17,1)" stroke-width="1" stroke-opacity="1" stroke-dasharray="">
</rect>
<script type="text/ecmascript"><![CDATA[(
function()
{
var actors={};
actors.actor_1=
{
node : document.getElementById("SVG-Circus-fd09094d-ef46-ec99-9c7e-2ce68491a50b").getElementById("actor_1"),
type : "square",
cx : 35,
cy : 35,
dx : 10,
dy : 5,
opacity : 1
};
actors.actor_2=
{
node:document.getElementById("SVG-Circus-fd09094d-ef46-ec99-9c7e-2ce68491a50b").getElementById("actor_2"),
type : "square",
cx : 50,
cy : 35,
dx : 10,
dy : 5,
opacity : 1
};
actors.actor_3=
{
node : document.getElementById("SVG-Circus-fd09094d-ef46-ec99-9c7e-2ce68491a50b").getElementById("actor_3"),
type:"square",
cx:65,
cy:35,
dx:10,
dy:5,
opacity:1
};
actors.actor_4=
{
node:document.getElementById("SVG-Circus-fd09094d-ef46-ec99-9c7e-2ce68491a50b").getElementById("actor_4"),
type:"square",
cx:65,
cy:50,
dx:10,
dy:5,
opacity:1
};
actors.actor_5=
{
node:document.getElementById("SVG-Circus-fd09094d-ef46-ec99-9c7e-2ce68491a50b").getElementById("actor_5"),
type:"square",
cx:65,
cy:65,
dx:10,
dy:5,
opacity:1
};
actors.actor_6=
{
node:document.getElementById("SVG-Circus-fd09094d-ef46-ec99-9c7e-2ce68491a50b").getElementById("actor_6"),
type:"square",
cx:50,
cy:65,
dx:10,
dy:5,
opacity:1
};
actors.actor_7=
{
node:document.getElementById("SVG-Circus-fd09094d-ef46-ec99-9c7e-2ce68491a50b").getElementById("actor_7"),
type:"square",
cx:35,
cy:65,
dx:10,
dy:5,
opacity:1
};
actors.actor_8=
{
node:document.getElementById("SVG-Circus-fd09094d-ef46-ec99-9c7e-2ce68491a50b").getElementById("actor_8"),
type:"square",
cx:35,
cy:50,
dx:10,
dy:5,
opacity:1
};
var tricks={};
tricks.trick_1=
(
function(t,i)
{
i=
(
function(t)
{
return Math.sqrt(1-(t-=1)*t)
}
)(i) % 1, i = 0 > i ? 1 + i : i;
var _ = t.node;0.2 >= i
?
_.setAttribute("opacity", i * (t.opacity / 0.2))
:
i >= 0.8
? _.setAttribute("opacity",t.opacity-(i-0.8)*(t.opacity/(1-0.8)))
:_.setAttribute("opacity",t.opacity)
}
);
var scenarios={};
scenarios.scenario_1=
{
actors:
[
"actor_1",
"actor_2",
"actor_3",
"actor_4",
"actor_5",
"actor_6",
"actor_7",
"actor_8"
],
tricks:
[{
trick: "trick_1",
start:0,
end:1
}],
startAfter:0,
duration:800,
actorDelay:100,
repeat:0,
repeatDelay:0
};
var _reqAnimFrame = window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.oRequestAnimationFrame,
fnTick = function(t)
{
var r,a,i,e,n,o,s,c,m,f,d,k,w;
for(c in actors)
actors[c]._tMatrix=[1,0,0,1,0,0];
for(s in scenarios)
for(o=scenarios[s],m=t-o.startAfter,r=0,a=o.actors.length;a>r;r++)
{
if(i=actors[o.actors[r]],i&&i.node&&i._tMatrix)
for(f=0,m>=0&&(d=o.duration+o.repeatDelay,o.repeat>0&&m>d*o.repeat&&(f=1),f+=m%d/o.duration),e=0,n=o.tricks.length;n>e;e++)
k=o.tricks[e],w=(f-k.start)*(1/(k.end-k.start)),tricks[k.trick]&&tricks[k.trick](i,Math.max(0,Math.min(1,w)));m-=o.actorDelay
}
for(c in actors)
i=actors[c],i&&i.node&&i._tMatrix&&i.node.setAttribute("transform","matrix("+i._tMatrix.join()+")");
_reqAnimFrame(fnTick)
};
_reqAnimFrame(fnTick);
}
)()]]></script>
</svg>
我把它放在<my-app></my-app> 标签之间。但是当我转到http://localhost:4200 时，动画播放了一点，然后就卡住了。
为什么会这样？如何在初始加载屏幕上使用 SVG 作为加载指示器？
附：如果我使用 HTML + CSS 动画，它可以正常工作，并且在加载资产和脚本期间播放动画。
【问题讨论】：
-
对 SVG (SMIL) 动画也有同样的问题。 SMIL 一般不会在未来得到支持。所以我建议对 SVG 使用基于 CSS 的动画。看到这个：developer.mozilla.org/en-US/docs/Web/SVG/…
-
@SergeyRudenko 谢谢，我会检查的。