2

style.top 和 translateY() 似乎都四舍五入到全像素值。有没有办法让图像停留在子像素上？

举个例子，这里我将一个包含图像的 div 每 100 毫秒向下移动 0.1 个像素，正如你所看到的，它每秒只跳跃一个完整的像素。 https://jsfiddle.net/je391bfr/

var i= setInterval(function() {this.myTimer(); },100);
var y=0;
var div=document.getElementById('mytest');
function myTimer(){

  this.y+=.1;
  console.log(this.y); 
  //var tr="translateY("+this.y+"px)";
  var tr="translate(0,"+this.y+"px)";
  this.div.style.webkitTransform=tr;
  this.div.style.mozTransform=tr;
  this.div.style.msTransform=tr;
  this.div.style.oTransform=tr;
  this.div.style.transform=tr;
}

注意：如果我愿意，我想要一些可以在子像素上停止的东西，而不仅仅是在动画期间在子像素上。

4

1 回答 1

1

这可以使用 CSS3 转换属性来完成，您可以使用translate向其提供 y 轴坐标所需的子像素的方法来转换图像（以与您的示例类似的方式）。

如果不使用有助于更好地利用渲染引擎rotate(.0001deg)并简化子像素渲染的小旋转，则平移永远不会平滑。

以下是一个片段......

要停止动画，只需使用clearInerval(i)，它将在到达的任何子像素处停止。

var imgPos = 0.0;
var offset = .2;

function myTimer(){
    imgPos += offset
    $("#img").css('transform', 'translate(0,' + imgPos + 'px) rotate(.0001deg)');
}

var i= setInterval(function() {myTimer(); },100);
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body style="background-color:#ffffff; padding:0px; margin:0px;">


<div id="mytest" style="overflow: visible; display: inline-block; position: absolute; width: 152px; height: 56px; left: 0px; top: 0px; padding: 0px; margin: 0px; cursor: pointer; opacity: 1; "><img id="img" style="width: 100%; height: 100%; display: inline-block; position: absolute;" src="https://d138hkes00e90m.cloudfront.net/banner_images/Lazarus18_Large_Banner.jpg"></div>

</body>

于 2015-07-31T18:31:30.220 回答