Масштабируйте и переместите текст гладко с JavaScript
Мне масштабировали текст и перемещенный через JavaScript / jQuery. Я не могу использовать анимационный jQuerys (), потому что он должен постепенно появиться и и должен быть повторен и с большим количеством элементов (конечный результат: "полет" происхождения, перемещение в различные направления и постепенное исчезновение).
Моя проблема: это не работает гладко и вызывает вполне использование CPU. Вот является разделенный вниз версией:
JS Bin
Hello World
Рабочий пример на МУСОРНОМ ВЕДРЕ JS.
Какие-либо предложения? Премия: Как уменьшить загрузку ЦП?Большое спасибо!
Steffen
3 ответа
Ну, во-первых, категорически не используйте jQuery с таймером 50 мс. Если что-то вызывает высокую загрузку ЦП, так это именно оно. Вместо этого используйте что-то вроде этого
var hello = $('#hello')[0].style;
function doAnimation() {
//code...
hello.top = curentValueTop + 'px';
hello.left = currentValueLeft + 'px';
hello.fontSize = currentValueFontSize + 'px';
//rest of code...
}
. Однако с плавным и последовательным масштабированием шрифтов большинство браузеров плохо справляются. Поскольку в 99% случаев текст на веб-странице не летит вам в лицо, мы этого не замечаем. Возможно, вам больше повезет с изображением текста, отображаемого с максимальным размером шрифта, который вам нужен.
Кроме того, 50 мс ~ = 20 кадров в секунду, что не является особенно плавной частотой кадров для анимации, проходящей через половину экрана. Если не использование jQuery значительно снижает использование ЦП, вы можете попробовать меньший интервал. Конечно, большинство браузеров также не умеют обрабатывать анимацию с высокой частотой кадров.
Ага, современные веб-браузеры изо всех сил пытаются делать вещи, с которыми игровые консоли 20-летней давности не имели проблем, с четвертью частоты кадров.
РЕДАКТИРОВАТЬ Попробуйте это http://jsbin.com/oxode/4/edit
Я использовал блок em для fontSize , поскольку он принимает дробные числа и использовали таймер 15 мс (около 60 кадров в секунду, если браузер не отставал). Как видите, масштабирование более плавное, хотя вам придется немного изменить настройки анимации ...
Несколько лет назад я довольно успешно использовал эту библиотеку на мобильных телефонах, возможно, у нее мало накладных расходов, чтобы сделать ее достаточно быстрой для вы:
jQuery на самом деле не был разработан для длинных анимаций (поэтому «медленный» составляет менее 1 секунды), поэтому высокая загрузка процессора не исчезнет.
Вы могли бы использовать функцию анимации. http://api.jquery.com/animate/
Это уже делает многое из того, что вы там запрограммировали.