CSS剪辑使用gpu？

在我开发的一个HTML5游戏中，我在css动画中使用了CSS特征剪辑。但是我意识到它正在影响游戏的表现。CSS剪辑使用gpu？

我想剪辑没有使用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); 
    } 
    }

在此先感谢。

来源

2013-07-15 Victor Ga

可以使用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-24 21:00:23 user3457231

替换此'navigator.userAgent'测试类似于document.style'中的''webkitTransform'。此外，javascript属性不是'-webkit-transform'，而是我之前引用的那个。 –

CSS剪辑使用gpu？

回答

相关问题