Хабр Курсы для всех
РЕКЛАМА
Большая витрина: от крупнейших школ до частных авторов. Сравнивайте по цене, длительности, формату и выбирайте самый подходящий курс!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 103
всё гениальное — просто! :)
спасибо
самое простое это выводить эту машину через флеш, который работает с субпикселями. и не генерировать пустой трафик.
Классно, но на мой взгляд непрактично… поскольку кроме внешнего контроля спрайта ещё потребутеся предварительная работа (и временами не маленькая) с изображением. С другой стороны можно конечно такой процесс автомитизировать.
прекрасное решение, я считаю. Весьма изящно!
Отлично! Только через стекла всегда небо проглядывает)
я сначала подумал, что как-то Canvas / VML использовали…
Очень круто. Вещь из разряда «забыть про завтрак и разобраться как это работает». Скажите, а жопку у машинки специально обрезали, чтобы не цеплялась, или случайно вышло?
а субпиксельное вращение колёс? ,)
Того же можно добиться используя canvas,
и колёcа тоже в нём крутить :)
и колёcа тоже в нём крутить :)
Если уж очень хочется смотреть с увеличением, можно сделать больше спрайтов
я полагаю, что есть некоторые проблемы с тем, как работают браузеры при увеличении контента. ну и вся эта точность — увеличивая картинку, вы сводите на нет шаги по её уменьшению и она начинает дёргаться как обычный спрайт без АА.
досадно!
будем считать, что это proof of concept и в реальности в этих скриптах нужно что-то доточить — на первая версия этого примера мы потратили всего пять минут после идеи, а потом ещё 15 минут — на переделку для хабра и на пример с машинкой.
будем считать, что это proof of concept и в реальности в этих скриптах нужно что-то доточить — на первая версия этого примера мы потратили всего пять минут после идеи, а потом ещё 15 минут — на переделку для хабра и на пример с машинкой.
Попробуйте в другом браузере с более быстрым js. Или перезапустите, если у вас Fx и открыто много вкладок. В моем Fx 3.5 тоже дергалось пока не перезапустил.
я думаю, что чем больше и плотнее будет страница, тем более заметным будет каждое конкретное подёргивание. но если рассматривать ускорение js и браузеров как самый стабильный нынешний тренд, то все эти проблемы будут решены за нас.
Могу посоветовать переделать с горизонтального спрайте на вертикальный, при масштабе ≠ 100% будет лучше.
а какая будет разница?
Масштаб не кратен 100%. Это значит, что некоторые пиксели изображения браузер рисует больше, некоторые меньше. Эти неровности равномерны, в виде паттерна. Вы смещаете изображение туда-сюда, и при некратности ширины этого паттерна ширине вашего изображения, вы получаете картинку, начинающуюся с разных мест паттерна, соответственно первыми оказываются то увеличенные пиксели, то уменьшенные, картинка скачет туда-сюда. Если сделать вертикально, смещение по Х всегда будет одним и тем-же, картинка будет начинаться с одного паттерна.
По поводу масштаба и дергания вы были правы, а вот вертикальным или горизонтальным будет спрайт — ничего не изменится, так как в примере смещение по X всегда целочисленное, а уже внутри этого div'а с картинкой background сдвигается на определённый кадр.
Но всё равно — спасибо.
Но всё равно — спасибо.
Проверил сам. В Опере без изменений, а в фаерфоксе еще и вверх-вниз начало скакать, такое впечатление, что машина по кочкам едит, забавно :)
А еще я вижу, что у вас какие-то проблемы с библиотекой prototype, она генерирует такой код в DOM:
style=«position:absolute;background:url(all-moved3.gif);repeat:none;width:150px;height:60px;;left:0px;;background-position:-150px 0px;;left:0px;;background-position:-300px 0px;;left:0px;;background-position:-450px 0px;;left:1px;;background-position:0px 0px;;left:1px;;background-position:-150px 0px;;left:1px;;background-position:-300px 0px;;left:1px;И так далее.
я думаю что это ваш браузер так отрабатывает историю изменения css свойств. я проверил dom вывод из скрипта и там такого нет.
У вас масштаб страницы в фф не кратен 100%. Вид — Масштаб — Сбросить. Или Ctrl+0.
машина не дерегается, просто в какой-то момент скрипт замирает и продолжает заново… движется она достаточно плавно, если бы на javascript который затухает от раза к разу.
это у тебя глазищи от зависти дергаются:)
Что-то у машинки с одним цилиндром, потраивает чуток.
Спасибо за статью, полезно!
Такой подход хорош когда объект движется медленно и постоянно, но если бы движение было однократное или более быстрое, то лично я бы не стал заморачиваться с АА. ИМХО.
Такой подход хорош когда объект движется медленно и постоянно, но если бы движение было однократное или более быстрое, то лично я бы не стал заморачиваться с АА. ИМХО.
У js анимации с easing всегда есть некий последний или первый момент, когда объект двигается ещё слишком медленно. Обычно это решают за счёт уменьшения общего времени действия эффекта, а с таким методом можно делать практически произвольное время и субпиксельность будет задействована только в тот момент, когда она нужна.
Изящно. Только не думаю, что на клавогонках это сильно полезно — машинки преодолевают большее расстояние и достаточно быстро. А вот стрелка спидометра сделана уже через canvas, поэтому вращается плавно.
Да, и спасибо за пиарчик :) Хотя на Хабре вроде уже и так все про клавогонки знают.
Да, и спасибо за пиарчик :) Хотя на Хабре вроде уже и так все про клавогонки знают.
Ради таких статей я читаю Хабр.
впечатляюще
думаю можно воспользоваться этой идеей можно и при анимировании обычных html элементов
думаю можно воспользоваться этой идеей можно и при анимировании обычных html элементов
Вопрос — необходимость в четырёх спрайтах — это получено опытным путём или как? Может быть хватило бы двух или трёх?
Я уже было обрадовался, но когда дошел до сути метода… мда, в моем случае это к сожалению не пройдет :)
А вообще — зачет за саму идею!
Я вот тоже стараюсь везде где это можно, обходиться javascript'ом. Хотя вопрос: «Может стоило сделать это на флеше»? Остается для меня открытым.
Спасибо за статью.
А вообще — зачет за саму идею!
Я вот тоже стараюсь везде где это можно, обходиться javascript'ом. Хотя вопрос: «Может стоило сделать это на флеше»? Остается для меня открытым.
Спасибо за статью.
подойдёт, почему нет?
Потому что
а) В некоторых браузерах движение шапки моего сайта и так немного подтормаживает (и загружает во всю процессор) даже на достаточно мощных машинах, а работать с картинками в 3-4 раза больше, подозреваю, будет еще хуже.
б) вот эта картинка и так весит 136 кб (975х429 px), куда уж больше.
Для таких больших картинок, лучше все-таки использовать флеш, если плавности движения не хватает (имхо).
Так что в моем случае можно конечно попробовать так сделать, но я считаю, что игра не стоит свеч, а то, что есть — вполне приемлемо.
а) В некоторых браузерах движение шапки моего сайта и так немного подтормаживает (и загружает во всю процессор) даже на достаточно мощных машинах, а работать с картинками в 3-4 раза больше, подозреваю, будет еще хуже.
б) вот эта картинка и так весит 136 кб (975х429 px), куда уж больше.
Для таких больших картинок, лучше все-таки использовать флеш, если плавности движения не хватает (имхо).
Так что в моем случае можно конечно попробовать так сделать, но я считаю, что игра не стоит свеч, а то, что есть — вполне приемлемо.
вот пример на вашу тему.
только мне нужно было облако зациклить чуть более тщательно, у меня при уменьшении по краю картинки пошла белая полоска.
kittyhug.ru/subpixel/index2.php
только мне нужно было облако зациклить чуть более тщательно, у меня при уменьшении по краю картинки пошла белая полоска.
kittyhug.ru/subpixel/index2.php
Спасибо за пример, было очень полезно посмотреть на производительность этого на практике.
В IE8 безбожно глючит (Core 2 Duo 1.8 Ghz) и жрет больше половины процессорного времени. Удивительно, но IE6,7 (через IETester) показывают нормальную производительность.
Opera, Chrome, FF — все нормально.
Вот видите — я бы может и сделал так(кстати, моя картинка по площади почти в три раза больше), но Microsoft со своим новым детищем мне не дает.
Правильно говорили, что избавляться нужно не только от IE6, а от всего семейства :(
В IE8 безбожно глючит (Core 2 Duo 1.8 Ghz) и жрет больше половины процессорного времени. Удивительно, но IE6,7 (через IETester) показывают нормальную производительность.
Opera, Chrome, FF — все нормально.
Вот видите — я бы может и сделал так(кстати, моя картинка по площади почти в три раза больше), но Microsoft со своим новым детищем мне не дает.
Правильно говорили, что избавляться нужно не только от IE6, а от всего семейства :(
Отличный пример! Гораздо более интересный, чем с машинкой ))
Предлагаю добавить пример в текст поста (если ещё что-нибудь будет, тоже было бы неплохо).
Предлагаю добавить пример в текст поста (если ещё что-нибудь будет, тоже было бы неплохо).
Кстати, даже «дёргания» при изменении масштаба смотрятся симпатично))))
полоса видимо из-за бикубического метода интерполяции в фотошопе. Нужно использовать билинейный.
в класс «about» добавьте «position:absolute;z-index:1» чтоб было совсем круто
Оффтоп — сделайте облака слоями, отдельными png, движущимися с разной скоростью (с параллаксом). Симпатичней смотреться будет. У меня нечто подобное на клавогонках в шапке тоже.
Снимите галочку и увидите тормозной путь :)
ха. прикольно…
все у кого дергается идут лесом. речь шла о картинке которая не попикселям бегает.
все у кого дергается идут лесом. речь шла о картинке которая не попикселям бегает.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Сверхплавное передвижение объектов