Добавил:
Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Веб-орієнтована розробка програмного забезпечення ЗПі-81-20210115T104851Z-001 / Лекція Теоритичні відомості Анімація в javaScript.docx
Скачиваний:
16
Добавлен:
15.01.2021
Размер:
58.57 Кб
Скачать

Анимация в JavaScript Строка состояния и эффект «бегущей» строки Строка «бежит» слева направо

Создать бегущую строку совсем не сложно. Ведь если мы будем дописывать слева от строки пробелы, то визуально строка начнёт сдвигаться вправо. Итак, создадим небольшую функцию и запустим её через небольшой интервал.

status = 'Текст строки состояния'; // Записываем текст в строку состояния.

function move2Left() { // Объявляем функцию.

status = ' ' + status; // Сдвигаем текст вправо.

}

setInterval(move2Left, 100); // Запускаем интервал.

Вы можете посмотреть, как же выполнится приведённый код.

Что, опять не видно строки состояния? Пожалуйста, открывайте уроки по ECMAScript в отдельном окне2.

Но что происходит? Наша строка «убегает» за пределы видимости! Не порядок!

Итак, нам нужно остановить перемещение строки когда её размер превосходит «допустимые нормы». Для этого сохраним наш интервал в переменной, и после отменим его методом «clearInteval(кодТаймера)».

А в функции будем проверять, не превышает ли длина строки (свойство «'строка'.length») 50 сим­волов («if (status.length > 50)»). Если условие выполнится, прервём интервал. Да, перед тем, как смотреть на выполнение последующего кода, обновите страницу.

status = 'Текст строки состояния'; // Записываем текст в строку состояния.

function move2Left() { // Объявляем функцию.

status = ' ' + status; // Сдвигаем текст вправо.

if (status.length > 50) // Проверяем длину строки.

clearInterval(statusBarTimer); // Отменяем интервал.

}

var statusBarTimer = setInterval(move2Left, 100); // Сохраняем интервал в переменной.

Вы можете посмотреть, как же выполнится приведённый код.

Итак, у нас появилась «бегущая» строка. Правда, бегает она на «привязи» в 50 символов.

Строка «бежит» справа налево

Ну что, для движения слева направо мы дописывали пробелы. Для движения в противо­положную сторону, естественно, следует их убирать. Это не на много сложнее.

Давайте посмотрим на «сдвинутую» строку. Она начинается с пробелов. Если мы один из них уберём, строка сдвинется влево.

Метод «'строка'.indexOf('подстрока')» позволяет узнать, с какой позиции искомая подстрока встречается в указанной строке. Он возвращает номер символа, с которого начинается первое вхождение, если оно есть, или -1, если подстрока не встречается ни разу. Да, как всегда, считаем от нуля.

Метод «'строка'.substring(позиция)» возвращает подстроку, начинающуюся с указанной позиции, и до конца строки. Другими словами, этот метод позволяет откинуть первые символы строки.

Сведя воедино предыдущие абзацы (вернее, мысли, высказанные в них), получим вот такой код:

status = ' Текст строки состояния'; // Записываем текст в строку состояния.

function move2Right() { // Объявляем функцию.

if (status.indexOf(' ') == 0) // Нулевой символ — пробел?.

status = status.substring(1); // Откидываем нулевой символ.

else

clearInterval(statusBarTimer); // Отменяем интервал.

}

var statusBarTimer = setInterval(move2Right, 100); // Сохраняем интервал в переменной.

Вы можете посмотреть, как же выполнится приведённый код.

Вот и всё. Мы реализовали движение справа налево.