1

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

提前致谢。

4

1 回答 1

0

您可以使用 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/

于 2014-03-24T21:00:23.080 回答