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