Масштабирование и перемещение текста гладко с помощью javascript

У меня есть текст, масштабированный и перемещенный с помощью JavaScript/jQuery. Я не могу использовать jQuerys animate(), потому что он должен исчезать и исчезать и должен повторяться и с большим количеством элементов (конечный результат: «летать» со фона, перемещаться в разные стороны и исчезать).Масштабирование и перемещение текста гладко с помощью javascript

Моя проблема: он не работает плавно и вызывает довольно частое использование процессора. Вот урезанная версия:

<!DOCTYPE html> 
<html> 
<head> 
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<meta charset=utf-8 /> 
<title>JS Bin</title> 
<!--[if IE]> 
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]--> 
<script type="text/javascript"> 

    var steps = 300; // steps from start to finish 

    // the final css values 
    var endValueTop = 300; 
    var endValueLeft = 300; 
    var endValueFontSize = 100; 

    // the current css values (get encreased in doAnimation()) 
    var currentValueTop = 100; 
    var currentValueLeft = 100; 
    var currentValueFontSize = 0; 

    // the added values in each step 
    var stepsTop = (endValueTop - currentValueTop)/steps; 
    var stepsLeft = (endValueLeft - currentValueLeft)/steps; 
    var stepsFontSize = (endValueFontSize - currentValueFontSize)/steps; 

    function doAnimation() { 

     // increase current values 
     currentValueTop += stepsTop; 
     currentValueLeft += stepsLeft; 
     currentValueFontSize += stepsFontSize; 

     // apply them 
     $("#hello").css({ 
      top: currentValueTop, 
      left: currentValueLeft, 
      fontSize: currentValueFontSize 
     }); 

     // restart if there are steps left 
     if (steps--) { 
      window.setTimeout(function(){ 
       doAnimation(); 
      }, 50); 

     } 

    } 

    // start the first time 
    doAnimation(); 

</script> 

<style> 
    article, aside, figure, footer, header, hgroup, 
    menu, nav, section { display: block; } 
    body { position: relative; } 
    p#hello { position: absolute; top: 100px; left: 100px; font-size: 0px; } 
</style> 
</head> 
<body> 
    <p id="hello">Hello World</p> 
</body> 
</html>

Запуск примера на JS BIN.

Любые предложения? Бонус: как уменьшить нагрузку на процессор? Большое спасибо!

Штеффен

источник

2010-08-15 Steffen Wenzel

Что случилось с использованием '.animate()'? Ниже приведена демонстрация - http://jsbin.com/oxode/2. Вы можете угаснуть и выдохнуть без проблем, используя 'animate' слишком –

@ Russ Cam: увеличение и уменьшение непрозрачности за один проход (и другие вещи) не дай мне. Хотелось бы, чтобы я мог ... –

Как насчет того, если он был разделен на несколько вызовов 'animate', которые заставляли текст расти непрерывно, а его положение на странице сдвигалось вправо и вправо, но также позволяло вам делать вызовы для изменения непрозрачности исчезают и исчезают? –

Ну, во-первых, абсолютно не используйте 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, это значительно снижает загрузку процессора, вы можете попробовать меньший интервал. Конечно, большинство браузеров не очень хорошо справляются с анимацией с высокой частотой кадров.

Yup, современные веб-браузеры, изо всех сил пытающиеся сделать то, что с 20-летней консолью для видеоигр не возникало проблем, с четвертью частоты кадров.

EDIT Попробуйте http://jsbin.com/oxode/4/edit

Я использовал em устройство для fontSize, как он принимает дробные числа, и используется 15мс таймер (около 60fps, если браузер может держать вверх). Как вы можете видеть, он масштабируется более плавно, хотя вам придется немного настроить настройки анимации ...

источник

2010-08-15 19:16:24 MooGoo

Я вижу, что это должно работать намного лучше (не мог видеть эффект, хотя, вероятно, не тестировался правильно). Спасибо, я кое-что узнал. Но не решает текстовые прыжки. –

также в вызове 'setTimeout', посмотрите на использование' window.setTimeout (doAnimation, 15); 'или' window.setTimeout (arguments.callee, 15); 'для удаления ненужной анонимной функции, завершающей вызов функции –

@ Штеффен Вензель, текстовый прыжок сильно зависит от браузера. Это казалось мне самым плавным в Firefox. Также рассмотрите использование 'setInterval' вместо' setTimeout' (http://jsbin.com/oxode/5/edit), что может привести к более плавной анимации. Но, в конце концов, вы, вероятно, получите какой-то текст, несмотря ни на что, поэтому я предложил использовать изображение, если это практично. – MooGoo

Я использовал эту библиотеку несколько лет назад довольно успешно на мобильных телефонах, может быть, он имеет достаточно небольшие накладные расходы, чтобы сделать это достаточно быстро для вас:

http://dev.opera.com/libraries/animation/

источник

2010-08-15 19:06:13 nicomen

Должны иметь те же недостатки, что и jQuerys aimate(). –

JQuery не было действительно предназначен для длинных анимаций (поэтому «медленный» составляет менее 1 секунды), поэтому высокая загрузка процессора на самом деле не исчезнет.

Одна вещь, которую вы могли бы сделать, это использовать функцию анимации http://api.jquery.com/animate/

Это уже делает много того, что вы запрограммировали там.

источник

2010-08-15 19:09:12 maletor

Да, это бы сбил этот код до трех строк. Но мне также приходится иметь дело с увеличением и уменьшением непрозрачности в одной анимации. И использование одного интервала для пяти или около того элементов, которые я перемещаю параллельно, кажется мне более быстрым. –

Масштабирование и перемещение текста гладко с помощью javascript

ответ

Смежные вопросы