Какой-нибудь способ получить div/ изображение для отдыха на субпикселе?

Кажется, что style.top и translateY() округляются до полных значений пикселей. Есть ли способ получить изображение на субпикселе?

Например, здесь я перемещаю div с изображением внутри на 0,1 пикселя каждые 100 мс, и, как вы можете видеть, он просто перепрыгивает полный пиксель каждую секунду. 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;
}

Примечание: я хочу что-то, что может ОСТАНОВИТЬСЯ на субпикселе, если я хочу, а не просто быть на субпикселе во время анимации.

Источник

1 ответ

Это можно сделать с помощью CSS3 transform свойство, где вы можете перевести изображение с помощью 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>

Источник
Другие вопросы по тегам