Как сделать эффект пишущей ручки
Добавил пользователь Валентин П. Обновлено: 04.10.2024
С помощью эффектов и анимации текста можно сделать занимательные веб-страницы, и в этом уроке мы рассмотрим один из таких эффектов, а именно, разберем, как сделать печатающийся текст с помощью JavaScript.
Что ж, эту сцену можно взять за основу нашего будущего текстового эффекта для веб-страницы. Таким образом, конечный результат будет выглядеть вот так.
Сценарий JavaScript печатающий текст
Далее, конечно же, понадобиться стилизовать печатающийся текст в соответствие сцене в кино, поэтому добавим для него некоторые стили.
Для блока с текстом назначим класс .screen и установим для него черный цвет фона background: black; . Это будет экран. Для текста установим цвет lime (светло-зеленый).
Затем надо написать несколько свойств для элемента span и добавить к нему пару классов. Когда приступим к разбору скрипта печатающего текст, вы поймете, зачем они нужны.
Для класса .cursor добавим цвет фона lime и применим к нему анимацию, ключи которой бесконечно (infinite) и поочередно меняют прозрачность элемента с данным классом. Как можно догадаться из названия класса, это будет мигающий курсор самонабирающегося текста.
Для анимации курсора (blinking) нужно установить функцию времени step-start, чтобы CSS-свойства ключей анимации применялись сразу, а не плавно.
Помимо всего прочего, я задал тексту свойство white-space: pre-wrap; , поскольку самонабирающийся текст должен выводиться построчно. Но это совершенно не обязательно, если форматирование не важно.
Теперь займемся самим эффектом печатающегося текста, а для этого воспользуемся возможностями JavaScript. Ниже представлен весь код, а еще ниже детально разберем его работу.
И так, давайте теперь разберемся, что и как работает.
JavaScript предлагает хорошие возможности для работы с текстом, предоставляя доступ к каждому символу строки, как к элементу массива. Этим мы и воспользуемся, но прежде всего, нужно получить элемент блока с текстом (textBox), взять из него текст (text) и провести кое-какую манипуляцию с ним, результат которой мы помести в переменную newHTML.
Следующей задачей является поочередное появление символов и для этого потребуется написать рекурсивную функцию, то есть функцию, которая будет вызывать саму себя, пока весь текст не появится.
Как вы помните, выше я упоминал о курсоре. Чтобы все было, как в голливудском кино, определенно, нужно добавить мигающий курсор. А чтобы все совсем было как по-настоящему, добавим "плавающую" задержку для курсора, то есть паузу между набором слов, что создаст впечатление, будто текст набирает человек.
И так, возьмем все элементы span, по которым затем пройдемся рекурсивно. Поставим счетчик этих элементов (символов в span-ах), чтобы знать, какой обрабатывается в той или иной итерации рекурсии. И просто объявим переменную timeout, в которую будет записываться задержка для конкретной итерации.
Теперь приступим к разбору самой функции, создающей эффект печатающегося текста function typing_text() <. >.
Каждый вызов этой функции визуализирует только один символ (а точнее, элемент span с заключенным в него символом) при помощи строки spans[count].classList.add('visible');
Эта строка добавляет элементу span CSS-класс visible.
Как мы решили выше, будем делать паузу между набором слов, и поэтому следующим условием, когда символ является пробелом, в переменную timeout будет записываться рандомное время задержки от 1 до 1000 миллисекунд. Если же содержимое span не является символом пробела, то присвоим задержку равную 50 миллисекундам, которая в целом задает скорость набора всего текста.
В дополнение к описанному выше, когда итерация функции обрабатывает символ пробела, мы должны отображать мигающий курсор, а для этого текущему span назначим CSS-класс cursor.
В самом условии заключен метод setTimeout(), который позволяет запланировать (отложить) выполнение кода, заключенный внутри его конструкции через указанный интервал времени, который мы записали в переменную timeout.
Здесь же нам нужно прибавить к нашему счетчику символов count единицу, поскольку еще один символ был уже обработан, а затем, вызвать новую итерацию функции typing_text(), которая обработает очередной элемент.
Вот и весь код, позволяющий создать эффект печатающегося текста. Но осталась маленькая деталь! Для того, чтобы функция начала работать и сама себя вызывать рекурсивно, продолжая обрабатывать текст посимвольно, ее нужно первый раз вызвать, добавив строчку typing_text();.
Эффекты текста при совместном использовании JavaScript и CSS-анимации
С помощью JavaScript возможно сделать много интересных эффектов с текстом, но CSS3 предоставляет хорошие возможности, при использовании которых совместно со сценариями JS, позволяет не просто упростить код последнего, но и сделать эффекты весьма замысловатыми и красивыми.
Да, в первом примере мы уже использовали CSS-анимацию для текста, но сейчас самое время немного развить нашу фантазию. Давайте взглянем на парочку примеров, где для печатающегося текста, реализованного с помощью разобранного сценария JavaScript, будет добавлена более красочная CSS-анимация.
Анимация печатающегося текста.
Анимация текста, печатающегося волнами.
Надеюсь, по разбору первого примера с печатающимся текстом вы догадываетесь, как это работает. Во всяком случае, вы всегда можете подглядеть в исходный код.
В данной статье будет рассмотрена анимация рукописного текста или шрифта в фотошопе. Такую анимацию можно сделать как из любого рукописного шрифта, так и просто из текста, написанного собственноручно, например можно заанимировать свою подпись и даже какой-нибудь не сложный рисунок или узор.
В одном из уроков я показывал, как делается анимация печатающегося текста в фотошопе, с помощью масок слоёв, в данном уроке для анимации мы будем использовать кальку.
Для работы я буду использовать рукописный шрифт, который вы можете скачать вместе с исходниками урока. Если хотите, вы сразу можете написать что-то собственноручно или взять какой-нибудь узор, принцип анимации будет один и тот же. В качестве фона я нагуглил мокап девушки в майке.
1. Подготавливаем текст
Первым делом печатаем или пишем текст, который мы будем анимировать. Создаём новый слой, печатаем текст, настраиваем нужный размер.
Преобразуем текст в смарт-объект и настроим нужное положение на майке. Кликаем по слою с текстом правой кнопкой мыши и выбираем "Преобразовать в смартобъект".
Теперь выбираем в верхнем меню "Редактирование" - "Трансформирование" - "Искажение" и настраиваем положение текста.
2. Рисуем линии (кривые)
Для того, чтобы сделать анимацию более привлекательной я сделаю вылетающие линии, которые будут образовывать сам текст, создавать иллюзию того, что они пишут этот текст. Одну линию а нарисую на вылете, она будет вылетать и писать текст, а второй я завершу анимацию, она будет вылетать в конце написания текста и превращаться в восклицательный знак.
Создаём новый слой, берём инструмент "Перо", выставляем настройки пера "Контур" и рисуем траекторию вылета линий на этом новом слое. Рисовать удобнее не от точки вылета, а не наоборот от точки её окончания, т.е. от этой части буквы.
Нарисовали пером траекторию полёта, теперь выбираем инструмент "Кисть", берём простую жёсткую кисть, убеждаемся, что у неё выставлены параметры "Непрозрачности", "Нажима" и "Жесткости" на 100% и настраиваем кегль данной кисти по толщине надписи.
Немного сплющим кисть, чтобы создать эффект нажима.
Теперь снова выбираем инструмент "Перо", кликаем правой кнопкой мыши по нашей траектории и выбираем "Выполнить обводку контура", далее выбираем кисть, параметр "Имитировать нажим" можно оставить включенным, можно отключить, он в данном случае роли не сыграет, нажимаем "Ок".
У нас получается одна линия, а точнее направляющая траектория, по которой будет вылетать линия. Кликаем еще раз правой кнопкой мыши по контуру и выбираем "Удалить контур".
Проделываем тоже самое со второй линией. Рисуем пером её траекторию полёта от конечной точки до начальной. Выполняем обводку контура. Наш шаблон, состоящий из текста и линий готов, переходим к анимации.
3. Анимируем по подготовленному шаблону
Переключаем рабочую среду на "Движение" и создаём "Шкалу времени для видео".
Теперь создаём пустой видеослой, для этого переходим в вернем меню в "Слои" - "Слои видео" - "Создать пустой видеослой".
Далее, в настройках шкалы времени включаем "Сочетание клавиш временной шкалы" и "Автоматическую группировку клипов", если данные параметры у вас не подключены.
В этих же настройках шкалы времени переходим к "Параметрам кальки". Здесь устанавливаем следующие значения: "Кадров до" и "Кадров после" - ставим "единичку", "Расстояние между кадрами" - тоже единицу, "Непрозрачность максимум" ставим 30%, "Непрозрачность минимум" - "троечка" и "Режим наложения" ставим - "Ручное". Нажимаем "Ок".
В первую очередь сделаем анимацию вылетающей линии, с которой и будет начинаться анимация текста. Для того, чтобы в шкале времени рисовать анимацию покадрово, необходимо переключиться в режим "Кальки". В настройках шкалы времени выбираем "Перейти в режим кальки" и увеличиваем временную шкалу на максимум, чтобы было удобно переключаться с кадра на кадр.
Вся анимация рисуется на видеослое, поэтому перед рисованием необходимо его выделить, кликнув один раз левой кнопкой мыши.
Рисовать начнём со второго кадра, переключаемся на него, выделяем линии, удерживая "Ctrl" и кликнув по слою с линиями левой кнопкой мыши и скрываем сам слой с линиями, кликнув по иконке глаза в панели слоёв. Теперь у нас выделена траектория и по ней мы будем покадрово отрисовывать вылетающую линию.
Выделяем "видеослой", еще раз напоминаю, рисуется всё именно на видеослое, будьте внимательны! Берём кисть, устанавливаем нужный цвет, в моём случае - белый, делаем побольше кегль и рисуем по выделению не большую линию в месте её вылета. Далее переходим на второй кадр и по этой же линии отрисовываем её продолжение, а точнее говоря смещение, смещаем её на небольшое расстояние.
Как мы видим, у нас при переключении кадра первая отрисованная линия стала прозрачнее и по ней удобно отрисовывать продолжение анимации - это как раз-таки работают выставленные нами настройки кальки. Рисуем линию по предыдущей с небольшим её смещением, переходим на следующий кадр и так далее, пока не дойдём до буквы и линия полностью не сольётся с ней.
Смещение линии нужно выставлять не большое, чтобы анимация смотрелась плавнее, чем меньше смещение в каждом кадре, тем анимация выглядеть будет привлекательнее, но процесс её рисования будет более продолжительным.
Теперь заанимируем сам текст, для этого выделяем его, как и в случае с линией, удерживая "Ctrl" кликаем по тексту левой кнопкой мыши и скрываем сам слой с текстом. Выделяем видеослой и отрисовываем по кадрам анимацию текста. Рисуется всё точно так же как и в случае с линией, но тут мы уже ничего не смещаем, а просто постепенно частями закрашиваем текст. Закрашиваем часть первой буквы, переходим на следующий кадр и закрашиваем букву дальше, при этом всё, что закрашивали в предыдущих кадрах нужно так же повторно обводить,чтобы уже отрисованные части текста в предыдущих кадрах были закрашены во всех последующих, иначе текст будет пропадать.
Видите, я перешёл уже на вторую букву, но в каждом кадре продолжаю закрашивать все предыдущие фрагменты, т.е. предыдущую букву. Таким образом кадр за кадром закрашиваем весь текст.
Теперь остаётся заанимировать вылет второй линии, делается это точно так же, как и с первой, только на последних кадрах мы еще добавим восклицательный знак, т.е. линия у нас пропадает, как и первая, а восклицательный знак появляется.
Анимация у нас готова, остаётся настроить слои шкалы времени по размеру анимации, подгоняем их мышкой, просто потянув за край. Выставляем слои на одном уровне на моменте окончании анимации.
4. Сохраняем анимацию
Если вы хотите сделать анимацию зацикленной, то вот здесь в настройках нужно поставить галочку "Цикл воспроизведения, тогда ваша анимация будет повторяться, а не останавливаться на последнем кадре.
Так же перед сохранением анимации в гифку или видеофайл можно еще настроить скорость её воспроизведения.
Теперь сохраняем анимацию в гифку, выбираем в верхнем меню "Файл" - "Экспортировать" - "Сохранить для веб" и здесь устанавливаем нужные значения: формат сохранения "ГИФ", цвета - 256 и параметры повторов однократно или постоянно.
Вот таким образом можно делать интересную анимацию не только текста, но и каких-то зарисовок, узоров и прочего, всё зависит уже от вашей фантазии.
В этом уроке мы эффектно анимируем рукописную надпись в программе After Effects при помощи плагина 3D Stroke.
По заданным фильтрам ничего не найдено
Попробуйте изменить критерий поиска, или сбросить фильтры.
Комментарии 46
Нашел выход из ситуации:)
Разрезал сложные буквы на составные части и по отдельности прорисовал их появление, скомпоновал, подогнал по времени, прекомпозил и вуаля! И всё это, чтоб не запутаться в масках)
Здравствуйте. Очень информативный урок, спасибо.
Но возникли вопросы.
Сгенерированный компьютером текст обычно имеет гладкий, ровный вид, совершенно не похожий на текст старой машинописной книги. Сделать первый вид похожим на последний в Photoshop - довольно сложный процесс, включающий несколько слоев, смарт-объекты, фильтры и маскировку.
Готовый текст. Кредит: Изображение предоставлено Adobe.
Установка текста color.credit: Изображение предоставлено Adobe.
Основной текст, напечатанный и позиционированный. Кредит: Изображение предоставлено Adobe.
Изменение режима смешивания для text.credit: Изображение предоставлено Adobe.
Дублирование текста layer.credit: Изображение предоставлено Adobe.
Преобразование слоя в смарт-объект. Кредит: Изображение предоставлено Adobe.
Добавление эффекта фильтра Ripple к новому слою. Кредит: Изображение предоставлено Adobe.
Конфигурирование фильтра Ripple settings.credit: Изображение любезно предоставлено Adobe.
Изменение порядка, режима наложения и непрозрачности layer.credit: Изображение предоставлено Adobe.
Добавление фильтра Noise в новый layer.credit: Изображение предоставлено Adobe.
Настройка фильтра шумов settings.credit: Изображение любезно предоставлено Adobe.
Добавление фильтра Motion Blur в layer.credit: Изображение предоставлено Adobe.
Настройка фильтра Motion Blur settings.credit: Изображение любезно предоставлено Adobe.
Изменение режима наложения и непрозрачности для layer.credit: Изображение предоставлено Adobe.
Группировка трех текстовых слоев. Кредит: Изображение предоставлено Adobe.
Добавление маски слоя в group.credit: Изображение предоставлено Adobe.
Выбор правильной кисти в окне выбора пресетов кисти. Кредит: Изображение предоставлено Adobe.
Готовый текст с проблемными областями, добавленными с помощью маскировки. Кредит: Изображение предоставлено Adobe.
Нарисуйте случайным образом кистью на маске слоя, сохраняя кончик кисти в исходном размере. Поскольку используемая кисть имеет узор и не является полностью непрозрачной, она лишь частично скрывает области, на которых вы рисуете. Это приводит к тому, что части текста, которые вы закрашиваете, выглядят неутешительно, как будто клавиши пишущей машинки не ударяют по бумаге, оставляя слабое или неполное впечатление.
Как сделать так, чтобы ваш день рождения появился на Facebook
Каждый, кто создает профиль в Facebook, должен указать на сайте полную и точную дату рождения, но вы можете скрыть эту дату в целях конфиденциальности. Если у вас есть ранее .
Как использовать коды qr, показанные в Windows 10 BSODS, чтобы узнать, что не так
Посмотрите, как ваш канал в Facebook выглядел много лет назад
Facebook, это было частью нашей жизни с тем, что кажется навсегда. Вот как можно совершить путешествие по переулку памяти и посмотреть, что ваш канал содержал много лет назад.
Читайте также: