4

Spotify アプリでローテーションを使用する必要があります。このために、次の CSS を使用します。

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
    @-webkit-keyframes rotate {
      from {
        -webkit-transform: rotate(0deg);
      }

      to {
        -webkit-transform: rotate(360deg);
      }
    }

    #entity {
      background-color: #000;
      width: 200px;
      height: 200px;
      -webkit-animation: rotate 3s infinite linear;
    }
  </style>
</head>
<body>
  <div id="entity"></div>
</body>
</html>

Chrome (26.0.1410.43) では、CPU 使用率に大きな変化はありません (~3%)。しかし、Spotify 0.8.8.459.g4430eae7 では、永続的な CPU 使用率が 50% から 100% の間になります。このコードに加えて、Spotify のネイティブ ロード スロバーでも同じことが起こります。私のコンピュータは、MacBook Pro 2.5 GHz Intel Core i5、8 GB 1600 Mhz DDR3 メイン メモリ、Mac OS 10.8.1 です。CPU 使用率を抑えてこのローテーションを実装するにはどうすればよいですか?

4

2 に答える 2

5

Spotify の Chromium のバージョンは、ハードウェア アクセラレーションをまったくサポートしていないため、そのような CSS 変換では、非常に大きなオーバーヘッドが発生します。

于 2013-04-11T15:20:03.780 に答える
3

ハードウェア アクセラレーションを強制してみます。

 #entity {
   -webkit-transform: translate3d(0, 0, 0);
 }

ソース: http://davidwalsh.name/translate3d

于 2013-04-11T12:21:18.420 に答える