Масштабируйте и перемещайте текст плавно с помощью JavaScript - PullRequest
Новая
       26

Масштабируйте и перемещайте текст плавно с помощью JavaScript

1 голос
/ 15 августа 2010

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

<!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 .

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

Штеффен

Ответы [ 3 ]

2 голосов
/ 15 августа 2010

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

0 голосов
/ 15 августа 2010

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

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

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

0 голосов
/ 15 августа 2010

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...