CSS剪辑使用GPU？

Question

在我正在开发的一款 HTML5 游戏中，我在 CSS 动画中使用了 CSS 功能剪辑。但我意识到这会影响游戏的性能。

我猜 clip 没有使用 gpu 加速(如果我错了，请告诉我)。有没有一种方法可以实现与利用 GPU 加速的剪辑相同的效果？

这是我的简单动画:

@-webkit-keyframes animation 
  {
   0% 
      {
   clip:rect(0px,auto,0px,auto);
  }

  50%
  {
    clip:rect(0px,auto, 69px,auto);
  }

  100% 
      {
   clip:rect(0px,auto,0px,auto);
  }
  }

提前致谢。

Answer 1

您可以使用 translate3d 或类似的 CSS 和 3 个容器获得类似的结果:

html:

<input id="run" type="button" value="Run">
<ul style="list-style:none;">
    <li style="position:relative; overflow:hidden;">
        <div id="content" style="background-color:#ff0000; width:100px; height:100px;">
            <p>this is content</p>
        </div>
    </li>
</ul>
<p id="totalFrames">0</p>

Javascript:

var transform = /(Chrome|Safari)/.test(navigator.userAgent) ? '-webkit-transform' : 'transform',
    run = document.getElementById('run'),
    content = document.getElementById('content'),
    container = document.getElementById('container'),
    ticks = document.getElementById('totalFrames'),
    curPos = 0,
    end = 100;

function tick() {
    var dist = (end - curPos) * .05;
    curPos += dist;

    if (Math.abs(dist) > .01) {
        ticks.innerHTML = requestAnimationFrame(tick, null);
      } else {
        curPos = end;
        end = -curPos;
    }
    content.style[transform] = 'translate3d(0, ' + curPos + 'px, 0)';
    container.style[transform] = 'translate3d(0, ' + -curPos + 'px, 0)';
}
run.addEventListener('click', tick);

jsFiddle:http://jsfiddle.net/my4Sv/7/