CSS剪辑使用gpu？答案

【问题标题】：CSS clip uses gpu?CSS剪辑使用gpu？
【发布时间】：2013-07-13 10:27:12
【问题描述】：

在我正在开发的一个 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);
  }
  }

提前致谢。

【问题讨论】：

标签： css performance gpu clip acceleration

【解决方案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/

【讨论】：

将此navigator.userAgent 测试替换为'webkitTransform' in document.style 之类的内容。此外，javascript 属性不是-webkit-transform，而是我之前引用的那个。