Высокая скорость CPU / GPU с SVG-анимацией с использованием преобразований CSS - PullRequest
Новая
       46

Высокая скорость CPU / GPU с SVG-анимацией с использованием преобразований CSS

0 голосов
/ 29 февраля 2020

Я начал свой проект с этого кода: https://codepen.io/cassie-codes/pen/zWJxXj, который отлично работает.

Когда я использую этот код в своем проекте реагирования, увеличивается скорость процессора и графического процессора, а вентилятор компьютера начать вращаться. Это мой проект .

Может кто-нибудь мне помочь? Я действительно не понимаю, почему это происходит.

Спасибо, а. 

body,
.bgImage {
  margin: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.bgImage {
  position: absolute;
  background-image: url(https://images.unsplash.com/photo-1500462918059-b1a0cb512f1d?ixlib=rb-0.3.5&s=e20bc3d490c974d9ea190e05c47962f5&auto=format&fit=crop&w=634&q=80);
  background-size: cover;
  background-position: top;
  -webkit-filter: grayscale(70%); /* Safari 6.0 - 9.0 */
  filter: grayscale(70%);
  z-index: -1;
}

.blobCont {
  position: absolute;
  width: 100vw;
  height: 100vh;
}

@for $i from 1 through 18 {
  $a: #{$i*90};
  $b: #{$i*90+360};

  .blob:nth-child(#{$i}) {
    animation: move#{$i} 20s infinite linear;
  }

  @keyframes move#{$i} {
    from {
      transform: rotate(#{$a}deg) translate(200px, 0.1px) rotate(-#{$a}deg);
    }
    to {
      transform: rotate(#{$b}deg) translate(200px, 0.1px) rotate(-#{$b}deg);
    }
  }
}
<div class="bgImage"></div>
<svg class="blobCont">
		<image xlink:href="https://images.unsplash.com/photo-1500462918059-b1a0cb512f1d?ixlib=rb-0.3.5&s=e20bc3d490c974d9ea190e05c47962f5&auto=format&fit=crop&w=634&q=80" mask="url(#mask)" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" />
      <defs>
      <filter id="gooey" height="130%">
				<feGaussianBlur in="SourceGraphic" stdDeviation="15" result="blur" />
				<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" />
    	</filter>
    </defs>
			<mask id="mask" x="0" y="0">
				<g style="filter: url(#gooey)">
          <circle class="blob" cx="10%" cy="10%" r="80" fill="white" stroke="white"/>
					<circle class="blob" cx="50%" cy="10%" r="40" fill="white" stroke="white"/>
					<circle class="blob" cx="17%" cy="15%" r="70" fill="white" stroke="white"/>
					<circle class="blob" cx="90%" cy="20%" r="120" fill="white" stroke="white"/>
					<circle class="blob" cx="30%" cy="25%" r="30" fill="white" stroke="white"/>
          <circle class="blob" cx="50%" cy="60%" r="80" fill="white" stroke="white"/>
					<circle class="blob" cx="70%" cy="90%" r="10" fill="white" stroke="white"/>
					<circle class="blob" cx="90%" cy="60%" r="90" fill="white" stroke="white"/>
					<circle class="blob" cx="30%" cy="90%" r="80" fill="white" stroke="white"/>
          <circle class="blob" cx="10%" cy="10%" r="80" fill="white" stroke="white"/>
					<circle class="blob" cx="50%" cy="10%" r="20" fill="white" stroke="white"/>
					<circle class="blob" cx="17%" cy="15%" r="70" fill="white" stroke="white"/>
					<circle class="blob" cx="40%" cy="20%" r="120" fill="white" stroke="white"/>
					<circle class="blob" cx="30%" cy="25%" r="30" fill="white" stroke="white"/>
          <circle class="blob" cx="80%" cy="60%" r="80" fill="white" stroke="white"/>
					<circle class="blob" cx="17%" cy="10%" r="100" fill="white" stroke="white"/>
					<circle class="blob" cx="40%" cy="60%" r="90" fill="white" stroke="white"/>
					<circle class="blob" cx="10%" cy="50%" r="80" fill="white" stroke="white"/>
				</g>
			</mask>
	</svg>
...