Question

因此，正如您在此JSFiddle中所看到的，我正在本机JavaScript中执行反弹动画，该动画旨在成为浮动云。

问题是我想让它仅以10px的速度上下跳动，但这样做会让它看起来像是低帧速率，我希望它更加流畅。

我发现将px数量从10增加到20增加了它的平滑度，我想因为它距离更远并且运行速度更快。我已经对它的内容充满了想法。

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

上面的代码是用于实现结果的代码，这是因为应用了＆＃34; left＆＃34;属性是一个类，而不是元素本身，因此使用＆＃39; offsetTop＆＃39;需要。

修改

使用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），设置较长的转换持续时间（20秒而不是1秒），并使用较短的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>

代码段中包含的评论。希望这会有所帮助。

JS和CSS动画的帧速率低

2 个答案: