SVG анимация на смартфоне не плавная - PullRequest
Новая
       14

SVG анимация на смартфоне не плавная

0 голосов
/ 03 ноября 2018

Я анимировал SVG с анимацией CSS. На компьютере анимация плавная, но на смартфоне Android она абсолютно не плавная: (

К сожалению, я не нашел так много информации о плавности SVG на смартфоне: X

Я пробовал will-change, translate3d и шаги, но ничего не получалось и ничего не изменилось. 

*{
  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>

enter image description here

1 Ответ

0 голосов
/ 03 ноября 2018

Вероятно, вы используете фильтры 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>
...