通过使用-webkit转换而不是-webkit过渡来利用硬件加速

Taking advantage of hardware acceleration by using -webkit-transform instead of -webkit-transition?

本文关键字：-webkit 硬件加速 转换      更新时间：2023-09-26

我想创建一个动画，每次单击按钮时，对象都会向右移动一定量。

例如，如果对象的初始位置是"left：10px"，并且动画的每1个循环都会将其移动10px，那么第一次单击后它应该是20px，第二次单击后应该是30px，依此类推

这是我现在的代码：

JavaScript

document.getElementById( 'move-me' ).addEventListener( 'click', function () {
    var move = document.getElementById( 'move' );
    move.style.left = ( move.offsetLeft + 10 ) + 'px';
}, false );

HTML

<button id="move-me">Move</button>
<div id="move"></div>

CSS

#move {
    background: green;
    height: 50px;
    left: 0px;
    position: absolute;
    top: 100px;
    transition:             left 250ms ease-in-out;
        -moz-transition:    left 250ms ease-in-out;
        -ms-transition:     left 250ms ease-in-out;
        -o-transition:      left 250ms ease-in-out;
        -webkit-transition: left 250ms ease-in-out;
    width: 50px;
}

这段代码使用CSS3转换，但它没有在我的android设备上使用-webkit转换硬件加速。我该怎么解决？

选择不是在-webkit-transform和-webkit-transition之间，而是在left和-webkit-transform之间。

以下是如何利用三维加速度：

#move {
    background: green;
    height: 50px;
    left: 0px;
    position: absolute;
    top: 100px;
    -moz-transition:    -moz-transform 250ms ease-in-out;
    -ms-transition:     -ms-transform 250ms ease-in-out;
    -o-transition:      -o-transform 250ms ease-in-out;
    -webkit-transition: -webkit-transform 250ms ease-in-out;
    transition:             transform 250ms ease-in-out;
    width: 50px;
}

Javascript：

document.getElementById( 'move' ).addEventListener( 'click', function() {
    var move = document.getElementById( 'move' );
    var transform = "translate3d("+ (move.offsetLeft+200) + "px, 0, 0)";
    move.style.webkitTransform = transform;
    move.style.mozTransform = transform;
    move.style.msTransform = transform;
    move.style.oTransform = transform;
    move.style.transform = transform;
}, false );

http://jsfiddle.net/CjQ8H/

您也可以使用translateX。这无疑是硬件加速。

targetDiv.style.webkitTransition = "0ms"
targetDiv.style.webkitTransform = "translateX(100%)

这将使div向右移动100%，但只有在硬件加速的设备中才会很好且平滑。

相关文章：