html - 智能手机上的 SVG 动画不流畅
问题描述
我用 css 动画制作了一个 SVG 动画。动画在电脑上很流畅，但在安卓智能手机上绝对不流畅:(
遗憾的是，我没有在智能手机上找到太多关于 svg 平滑度的信息：X
我已经尝试过 will-change、translate3d 和 steps 但没有任何效果，也没有改变任何东西。
*{
padding:0;
margin:0;
}
body{
background-color: #161616;
}
#stroke_small{
animation-name: s_small;
animation-duration: .5s;
animation-direction: alternate;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
transform-origin: center;
will-change: transform,opacity,rotate;
transform:translate3d(0,0,0);
}
#stroke_big{
animation-name: s_big;
animation-duration: .6s;
animation-direction: alternate;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
transform-origin: center;
will-change: transform,opacity,rotate;
transform:translate3d(0,0,0);
}
@keyframes s_small {
0%{
transform: scale(0) rotate(90deg);
opacity:0;
}
95%{
transform: scale(1.2) rotate(90deg);
}
100%{
transform: scale(1) rotate(90deg);
opacity: 1;
}
}
@keyframes s_big {
0%{
transform: scale(0);
opacity: 0;
}
80%{
transform: scale(1.4);
opacity: 0.3;
}
100%{
transform: scale(1);
opacity: 1;
}
}
#wrap{
height: 500px;
transform: translate(0,50%);
}
svg{
height: 100%;
width: 100%;
}<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js.js"></script>
</head>
<body>
<div id="wrap">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 150 150" width="150" height="150">
<defs>
<clipPath id="_clipPath_LSwlYo9f2BqiKFIU9xti0kwRpXdFVREV"><rect width="150" height="150"/></clipPath>
</defs>
<g clip-path="url(#_clipPath_LSwlYo9f2BqiKFIU9xti0kwRpXdFVREV)">
<defs>
<filter id="Wak5toas1V39NqTVjCKE95NQoDAjvIxm" x="-200%" y="-200%" width="400%" height="400%" filterUnits="objectBoundingBox" color-interpolation-filters="sRGB"><feGaussianBlur xmlns="http://www.w3.org/2000/svg" in="SourceGraphic" stdDeviation="4.293609062839028"/><feOffset xmlns="http://www.w3.org/2000/svg" dx="0" dy="0" result="pf_100_offsetBlur"/><feFlood xmlns="http://www.w3.org/2000/svg" flood-color="#000000" flood-opacity="1"/><feComposite xmlns="http://www.w3.org/2000/svg" in2="pf_100_offsetBlur" operator="in" result="pf_100_dropShadow"/><feBlend xmlns="http://www.w3.org/2000/svg" in="SourceGraphic" in2="pf_100_dropShadow" mode="normal" result="_out_rCE9DJXr10m2lurUI4sPvRW8P2VjDGfr"/><feGaussianBlur xmlns="http://www.w3.org/2000/svg" in="_out_rCE9DJXr10m2lurUI4sPvRW8P2VjDGfr" stdDeviation="2.146804531419514"/><feOffset xmlns="http://www.w3.org/2000/svg" dx="0" dy="0" result="pf_101_offsetBlur"/><feFlood xmlns="http://www.w3.org/2000/svg" flood-color="#000000" flood-opacity="1"/><feComposite xmlns="http://www.w3.org/2000/svg" in2="pf_101_offsetBlur" operator="in" result="pf_101_dropShadow"/><feBlend xmlns="http://www.w3.org/2000/svg" in="_out_rCE9DJXr10m2lurUI4sPvRW8P2VjDGfr" in2="pf_101_dropShadow" mode="normal" result="_out_vkz613rCnMiUq3TGHYc6YN9ZfsLARbBU"/>
<feMerge><feMergeNode in="_out_vkz613rCnMiUq3TGHYc6YN9ZfsLARbBU"/></feMerge>
</filter>
</defs>
<g filter="url(#Wak5toas1V39NqTVjCKE95NQoDAjvIxm)"><circle cx="75" cy="75" r="57" id="stroke_big" fill="transparent" stroke-width="14" stroke-dasharray="1,34" stroke="rgb(255,255,255)" stroke-linejoin="bevel" stroke-linecap="butt" stroke-miterlimit="3"/><circle vector-effect="non-scaling-stroke" cx="75" cy="75" r="50" id="stroke_big" fill="none"/></g>
<defs>
<filter id="kApXcD8xa6moYJmMIkGqbyC7guWaEPtb" x="-200%" y="-200%" width="400%" height="400%" filterUnits="objectBoundingBox" color-interpolation-filters="sRGB"><feGaussianBlur xmlns="http://www.w3.org/2000/svg" in="SourceGraphic" stdDeviation="4.293609062839028"/><feOffset xmlns="http://www.w3.org/2000/svg" dx="0" dy="0" result="pf_100_offsetBlur"/><feFlood xmlns="http://www.w3.org/2000/svg" flood-color="#000000" flood-opacity="1"/><feComposite xmlns="http://www.w3.org/2000/svg" in2="pf_100_offsetBlur" operator="in" result="pf_100_dropShadow"/><feBlend xmlns="http://www.w3.org/2000/svg" in="SourceGraphic" in2="pf_100_dropShadow" mode="normal" result="_out_q38EKtVito3vTzoYDgDggO89qEmheCPw"/><feGaussianBlur xmlns="http://www.w3.org/2000/svg" in="_out_q38EKtVito3vTzoYDgDggO89qEmheCPw" stdDeviation="2.146804531419514"/><feOffset xmlns="http://www.w3.org/2000/svg" dx="0" dy="0" result="pf_101_offsetBlur"/><feFlood xmlns="http://www.w3.org/2000/svg" flood-color="#000000" flood-opacity="1"/><feComposite xmlns="http://www.w3.org/2000/svg" in2="pf_101_offsetBlur" operator="in" result="pf_101_dropShadow"/><feBlend xmlns="http://www.w3.org/2000/svg" in="_out_q38EKtVito3vTzoYDgDggO89qEmheCPw" in2="pf_101_dropShadow" mode="normal" result="_out_rltGqyg0cPUUeAoL2XaPyexknaV3NvJI"/>
<feMerge><feMergeNode in="_out_rltGqyg0cPUUeAoL2XaPyexknaV3NvJI"/></feMerge>
</filter>
</defs>
<g filter="url(#kApXcD8xa6moYJmMIkGqbyC7guWaEPtb)"><circle cx="75" cy="75" r="52" id="stroke_small" fill="transparent" stroke-width="4" stroke-dasharray="1,62" stroke="rgb(255,255,255)" stroke-linejoin="bevel" stroke-linecap="butt" stroke-miterlimit="3"/><circle vector-effect="non-scaling-stroke" cx="75" cy="75" r="50" id="stroke_small" fill="none"/></g>
</g>
</svg>
</div>
</body>
</html>
解决方案
这很可能是您正在使用的 SVG 过滤器。
他们似乎做的不多。尝试删除它们。还有一个剪辑路径也非常没用。
*{
padding:0;
margin:0;
}
body{
background-color: #161616;
}
#stroke_small{
animation-name: s_small;
animation-duration: .5s;
animation-direction: alternate;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
transform-origin: center;
will-change: transform,opacity,rotate;
transform:translate3d(0,0,0);
}
#stroke_big{
animation-name: s_big;
animation-duration: .6s;
animation-direction: alternate;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
transform-origin: center;
will-change: transform,opacity,rotate;
transform:translate3d(0,0,0);
}
@keyframes s_small {
0%{
transform: scale(0) rotate(90deg);
opacity:0;
}
95%{
transform: scale(1.2) rotate(90deg);
}
100%{
transform: scale(1) rotate(90deg);
opacity: 1;
}
}
@keyframes s_big {
0%{
transform: scale(0);
opacity: 0;
}
80%{
transform: scale(1.4);
opacity: 0.3;
}
100%{
transform: scale(1);
opacity: 1;
}
}
#wrap{
height: 500px;
transform: translate(0,50%);
}
svg{
height: 100%;
width: 100%;
}<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js.js"></script>
</head>
<body>
<div id="wrap">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 150 150" width="150" height="150">
<g>
<circle cx="75" cy="75" r="57" id="stroke_big" fill="transparent" stroke-width="14" stroke-dasharray="1,34" stroke="rgb(255,255,255)" stroke-linejoin="bevel" stroke-linecap="butt" stroke-miterlimit="3"/>
<circle vector-effect="non-scaling-stroke" cx="75" cy="75" r="50" id="stroke_big" fill="none"/>
</g>
<g>
<circle cx="75" cy="75" r="52" id="stroke_small" fill="transparent" stroke-width="4" stroke-dasharray="1,62" stroke="rgb(255,255,255)" stroke-linejoin="bevel" stroke-linecap="butt" stroke-miterlimit="3"/>
<circle vector-effect="non-scaling-stroke" cx="75" cy="75" r="50" id="stroke_small" fill="none"/>
</g>
</svg>
</div>
</body>
</html>推荐阅读
- php - 基于视图生成 PDF 作为电子邮件附件 - Laravel
- jquery - 如何使用“输入”创建构造函数？
- excel - 比较两张表中唯一 ID 号中的唯一代码号和最高比率
- express - 使用 Cloudflare 的 Express.js 头盔 CSP 设置 - 放入什么？
- python - 在 json dict 中添加键和值
- php - 呼叫 URL 友好的正确链接
- autocomplete - Visual Studio 2019 中的自动完成/智能感知损坏
- c++ - std::string 的 C++ c_str 返回空
- javascript - 如何修复代码不移动类别下的频道
- javascript - 根据 ID 设置 React 组件的样式