初始加载屏幕上的角度冻结SVG动画 [英] Angular freeze SVG animation on initial loading screen
本文介绍了初始加载屏幕上的角度冻结SVG动画的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想在浏览器加载Angular 5的脚本和其他资源时播放动画.
I want to play an animation when browser is loading scripts and other assets of 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 时，动画会播放一点，但随后会冻结.
I put that between <my-app></my-app> tag. But when I go to http://localhost:4200, the animation plays a little bit but then freezes.
为什么会这样?如何在初始加载屏幕上使用SVG加载指示器?
Why is that happening? How can I use SVG for loading indicator on initial loading screen?
P.S.如果我使用的是HTML + CSS动画，则它可以正常工作，并且在加载资产和脚本时会播放动画.
P.S. If I am using HTML + CSS animation it works correctly and animation plays during loading assets and scripts.
推荐答案
浏览器呈现页面为单线程.而且，当执行繁重的js脚本时，某些 CSS动画属性可能会冻结所有动画.
Browser rendering page as single-threaded. And some of CSS animated properties could be freeze all animation when heavy js-script is executing.
此处有关动画渲染的更多详细信息.
Here more details about animation rendering.
如果您使用的是SVG，请使用<animate />标签对其进行动画处理
If you are using SVG, animate it with <animate /> tag
这篇关于初始加载屏幕上的角度冻结SVG动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
