JS和CSS動畫的幀率低

Question

因此，正如您在此JSFiddle中所看到的那樣 ，我正在用本機JavaScript制作反彈動畫，該動畫旨在成為浮動雲。

問題是我只想使它上下反彈10像素，但是這樣做會使它看起來像是處於低幀速率，並且我希望它更加平滑。

我發現將px的數量從10增加到20會增加其平滑度，我想是因為它的距離更大，並且運行速度更快。 我對可能的結果已經沒有足夠的想法了。

elem.style.top = elem.offsetTop - 10 + "px";

上面的代碼是用於實現結果的代碼，這是因為所應用的“ left”屬性位於類中，而不是元素本身，因此需要使用“ offsetTop”。

編輯

使用transfom，我可以使其更加流暢：

elem.style.webkitTransform = 'translateY(-10px)';

但是問題仍然存在，我想知道如何在本機JavaScript中做到這一點。

的HTML

<div id='cloud' class='style'></div>

的CSS

#cloud{
    position: absolute;
    width: 50px;
    height: 50px;
    background: green;
    -webkit-transition: all 1s ease-in-out;
       -moz-transition: all 1s ease-in-out;
         -o-transition: all 1s ease-in-out;
        -ms-transition: all 1s ease-in-out;
}

.style{
    left: 150px;
    top: 50px;
}

JS

var bounce = true;
var cloud = document.getElementById('cloud');
var interval = setInterval(animate(cloud), 1000);

function animate(elem) {
    return function () {
        if (bounce) {
            elem.style.top = elem.offsetTop - 10 + "px";
            bounce = false;
        } else {
            elem.style.top = elem.offsetTop + 10 + "px";
            bounce = true;
        }
    }
}

Answer 1

您可以設置一個更大的數字作為偏移量的變化（從200代替10），為過渡設置更長的持續時間（從20s代替1s），並使用較短的setInterval間隔（400而不是1000）來中斷過渡。 您可以使用這三個值中的不同值來獲得最佳結果。

看到小提琴： http : //jsfiddle.net/Lfed8wbh/4/

#cloud {
    position: absolute;
    width: 50px;
    height: 50px;
    background: green;
    -webkit-transition: top 20s ease-out;
    -moz-transition: top 20s ease-out;
    -o-transition: top 20s ease-out;
    -ms-transition: top 20s ease-out;
}
.style {
    left: 150px;
    top: 50px;
}

。

var bounce = true;
var cloud = document.getElementById('cloud');
var top = cloud.offsetTop;
var interval = setInterval(animate(cloud), 400);

function animate(elem) {
    return function () {
        if (bounce) {
            elem.style.top = elem.offsetTop - 200 + "px";
            bounce = false;
        } else {
            elem.style.top = elem.offsetTop + 200 + "px";
            bounce = true;
        }
    }
}

還沒有完全測試，但是您可以嘗試一下。

Answer 2

發表我的評論作為解決方案可能會有所幫助：

片段：

 window.requestAnimFrame = (function() { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60); }; })(); var isGoingDown = true; var cloud = document.getElementById('cloud'); var max = 60; // max position you want to reach to (in px), has to be higher than min var min = 50; // min position you want to react to (in px), has to be lower than max var increment = 1; // speed, with 1 being normal, 2 being twice the speed, 0.5 being half and so on ... has to be within the range of (max - min) cloud.style.top = '50px'; // initially apply the style on the element so it is easily get later requestAnimFrame(loop); function loop() { requestAnimFrame(loop); if (parseFloat(cloud.style.top) >= max) { isGoingDown = false; } else if (parseFloat(cloud.style.top) <= min) { isGoingDown = true; } if (isGoingDown) { cloud.style.top = (parseFloat(cloud.style.top) + increment) + 'px'; } else { cloud.style.top = (parseFloat(cloud.style.top) - increment) + 'px'; } } 

 #cloud { position: absolute; width: 50px; height: 50px; background: green; } .style { left: 150px; top: 50px; } 

 <div id="cloud" class="style"></div> 

摘要本身包含的評論。 希望這可以幫助。