Angular 初始加载屏幕上的角度冻结SVG动画
我想在浏览器加载脚本和Angular 5的其他资源时播放动画 例如，此SVG动画：Angular 初始加载屏幕上的角度冻结SVG动画,angular,svg,browser,Angular,Svg,Browser,我想在浏览器加载脚本和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">
<?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>
我1+i:i；
var=t.node；0.2>=i
?
_.setAttribute（“不透明度”，i*（t.opacity/0.2））
:
i>=0.8
? _.setAttribute（“不透明度”，t.opacity-（i-0.8）*（t.opacity/（1-0.8）））
：u.setAttribute（“不透明度”，t.opacity）
}
);
var场景={}；
情景1=
{
演员：
[
“演员1”，
“演员2”，
“演员3”，
“演员4”，
“演员5”，
“演员6”，
“演员七号”，
“演员8”
],
诀窍：
[{
诀窍：“诀窍1”，
起点：0，
完:1
}],
开始时间：0，
持续时间：800，
演员名单：100，
重复：0，
重复延迟：0
};
var _reqAnimFrame=window.requestAnimationFrame | | window.mozRequestAnimationFrame | | window.webkitRequestAnimationFrame | | window.oRequestAnimationFrame，
fnTick=函数（t）
{
变量r，a，i，e，n，o，s，c，m，f，d，k，w；
对于（演员中的c）
演员[c]。t矩阵=[1,0,0,1,0,0]；
用于（场景中的）
对于（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.\u tMatrix）
对于（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，数学最大值（0，数学最小值（1，w））；m-=o.actorDelay
}
对于（演员中的c）
i=actors[c]，i&&i.node&&i.\u tMatrix&&i.node.setAttribute（“变换”、“矩阵”（+i.\u tMatrix.join（）+））；
_重新调整帧（fnTick）
};
_重新调整帧（fnTick）；
}
)()]]>
另外，如果我使用的是HTML+CSS动画，它将正常工作，并且在加载资源和脚本期间播放动画。浏览器呈现页面为单线程。当执行繁重的js脚本时，一些CSS动画属性可以冻结所有动画 有关动画渲染的详细信息
如果您使用的是SVG，请使用