Эффект печатного текста в After Effects с мигающим курсором как на компьютере +проект
Похожие темы
Ссылки, описания, дополнительная информация для моих уроков на YouTube
4 сообщения • Страница 1 из 1
Автор темы
Эффект печатного текста в After Effects с мигающим курсором как на компьютере +проект
Сообщение #1 aeplug » 26 фев 2021, 18:48
text terminal animation.gif (232.36 КБ) 18397 просмотров text terminal animation.gif (232.36 КБ) 18397 просмотров
Как сделать эффект печати текста для видео, словно он набирается на клавиатуре компьютера. Такая анимация текста имеет мигающий компьютерный курсор в конце, именно это отличает ее от известного стандартного эффекта печатающей машинки Typewriter. Вы можете бесплатно скачать мой проект с готовым пресетом текстовой анимации для After Effects и свободно использовать его по своему усмотрению.
Зачем опять печатают 5 и 10 рублевые купюры?
https://www.youtube.com/watch?v=9B1HiLkj4Ow
Скачать проект урока для After Effects CC 2020
AEplug 280 — Эффект набора текста в After Effects с мигающим курсором.zip (39.69 КБ) 2310 скачиваний
AEplug 280 — Эффект набора текста в After Effects с мигающим курсором.zip (39.69 КБ) 2310 скачиваний
00:32 Выражения для печатаемого текста
01:27 Создание композиции
01:49 Создание слайдера
02:25 Создание маркеров слоя
03:01 Анимация появления текста
03:26 Замена курсора
04:07 Работа с частотой мигания курсора
05:08 Отключение мигания на вводе текста
06:19 Замена процентов на номер буквы / индекс
Чтобы сделать такое появление текста в After Effects, я использовал JavaScript выражение, найденное на просторах интернета, с небольшими доработками. Благодаря этому полученный мигающий курсор позволяет настраивать свою частоту мигания и форму по вашему вкусу через переменные в коде. Такой печатный текст в After Effects хорошо подходит для графики в компьютерном стиле и прочих хакерских дизайнах, если вам хочется сделать компьютерный терминал, или нужна командная строка. Эффект набора текста можно заменить на обычный эффект печатной машинки, если использовать пустой курсор, в таком случае буквы будут появляться резко, без анимации прозрачности, как и при печати на бумаге в реальности.
ПЛЕЙЛИСТ Анимация текста в After Effects
Оригинальное выражение взято отсюда: Reveal text TypeOn + blinking cursor.
txt = value;
timeIn = thisLayer.inPoint; //seconds
txtSize = text.sourceText.length;
cursor=»|»;
cursorBlink = 1; //seconds
txtComplete = 100; //percents — add a slider ‘txtComplete’ on your layer to animate this value
animateText = true;
showCursor = true;
//check if required markers exists
КРУТАЯ ФИШКА для Whatsapp. Годный лайфхак рекомендует делать так 😊
try txtComplete = effect(«txtComplete»)(«Slider»);
>catch(e) AnimateText = false;
>
//check if required markers exists
try cursorStart = marker.key(‘cursorStart’).time;
cursorStop = marker.key(‘cursorStop’).time;
>catch(e) showCursor = false;
>
if (animateText) txtIdx = txtSize / 100 * txtComplete;
txt = substr(0,txtIdx)
>
if (showCursor) F = Math.round( (time + cursorStart) % cursorBlink );
if ( (time > cursorStart) (time < cursorStop) (F==1) ) txt += cursor;
>
>
txt;
Я решил кое-что поменять в оригинальном выражении, чтобы сделать эффект набора текста еще лучше. Для этого я заменил курсор на сплошной блок псевдографики «█», добавил возможность сделать скорость мигания курсора меньше единицы, и еще курсор теперь не будет исчезать/мигать в тот момент, когда текст набирается на экране. Мой вариант кода:
txt = value;
timeIn = thisLayer.inPoint; //seconds
txtSize = text.sourceText.length;
cursor=»█»;
cursorBlink = 0.75; //seconds
txtComplete = 100; //percents — add a slider ‘txtComplete’ on your layer to animate this value
animateText = true;
showCursor = true;
//check if required markers exists
try txtComplete = effect(«txtComplete»)(«Slider»);
>catch(e) AnimateText = false;
>
//check if required markers exists
try cursorStart = marker.key(‘cursorStart’).time;
cursorStop = marker.key(‘cursorStop’).time;
>catch(e) showCursor = false;
>
if (animateText) txt = substr(0,txtComplete)
>
if (showCursor) F = (time + cursorStart) % cursorBlink;
dif = txtComplete.valueAtTime(time)-txtComplete.valueAtTime(time-thisComp.frameDuration*2);
if ( (time > cursorStart) (time < cursorStop) (F>cursorBlink/2 || dif != 0)) txt += cursor;
>
>
txt;
Текст в рамке для After Effects
Голограмма в After Effects
Источник: aeplug.ru
Эффект печатающегося текста на сайте
Сегодня вы узнаете, как сделать на сайте анимацию печатающегося текста и реализуем мы этот симпатичный эффект с помощью jQuery плагина – typed.js.
Применяя эффект печатающегося текста, мы однозначно, хотим направить внимание пользователя на суть или смысл этой фразы. Это значит, что эта фраза не может быть не о чем, постарайтесь очень лаконично передать в ней самый главный посыл пользователю. Например, это может быть призыв к действию подписаться или перейти по ссылке.
Подключение плагина typed.js
Официальный сайт плагина typed.js
https://github.com/mattboldt/typed.js/
Здесь вы можете увидеть пример, что будет происходить с текстом. Сначала вслед за курсором текст автоматически набирается, а затем так же, стирается и снова набирается, столько раз, сколько у нас заготовлено фраз. В настройках плагина предусмотрено много разных опций.
Конструктор визиток онлайн
Рабочие шрифты:
Все шрифты:
К сожалению, шрифты не найдены.
Цвета элемента:
Популярные цвета:
Цвета макета:
Контрастность
Насыщенность
Градации серого
Цветовой тон
Все параметры
На передний план На задний план
Выравнивание
По верхнему краю По центру По нижнему краю По левому краю По центру По правому краю
Межбуквенный
интервал
Межстрочный
интервал
Прозрачность
Отразить по горизонтали Отразить по вертикали
Скопировать сторону линия безопасности Очистить сторону
Лицевая
сторона
Оборотная
сторона
Продолжить
Масштаб рабочей области
Параметры рабочей области
Перейти к настройкам макета
Показывать сетку
Показывать зону безопасности
Показывать область обрезки
Добро пожаловать в PRINTUT!
Создайте свой первый дизайн!
Попробуйте наше интерактивное обучение для того чтобы понять как работать с конструктором.
Начать обучение
Боковая панель в левой части экрана содержит шаблоны и элементы, которые можно добавить в макет.
Каждый элемент управления подписан в соответствии со своим назначением и разделен по вкладкам.
На панели меню размещены кнопки, с помощью которых можно отменить или вернуть изменения, сохранить макет
Панель инструментов позволяет работать с выбранным на данный момент (активным) элементом макета.
Для вызова дополнительных возможностей (параметров) работы над выбранным (активным) объектом, кликните на пиктограмму ПАРАМЕТРЫ в горизонтальной панели меню в верхней части рабочей области
Для изменения масштаба рабочей области , воспользуйтесь функционалом масштабирования , представленным в правом нижнем углу
Для перемещения объекта строго по вертикали или горизонтали, зажмите на клавиатуре клавишу Shift и переместите объект в необходимое место. Также, объекты можно перемещать с помощью стрелок клавиатуры .
Для пропорционального изменения размера объекта, зажмите клавишу Shift и измените размер
Для удалений объекта(-ов) можно воспользоватьcя кнопкой
удалить из вспомогательной панели инструментов, либо нажать клавишу Delete на клавиатуре.
Для копирования объекта с одного листа на другой, можно воспользоваться комбинацией клавиш ctrl+c (копирование) и ctrl+v (вставка).
Настроить параметры визитки,
её размер, ориентацию бумаги
Основа в левом нижнем углу панели инструментов
Для выделения группы объектов можно воспользоваться выделением с помощью мышки (зажатием левой кнопки мышки и выделение области), либо, зажать клавишу Shift и выделять объекты с помощью клика левой кнопкой мышки на них.
Для редактирования текста необходимо кликнуть один раз для активации текстового элемента и повторно кликнуть для начала редактирования. Все внесенные изменения сохраняются в элементах автоматически.
О конструкторе
Используйте наш онлайн-конструкор для создания макета визитки. Вам не потребуется установка специальных программ на компьютер и тем более услуги дизайнера. Все, что вы хотите, можете воплотить в жизнь с помощью простых инструментов. Вставляйте и редактируйте текст, меняйте шрифты, загружайте картинки и логотипы, используйте генератор QR кода и всю палитру цветов для своих идей.
Готовые шаблоны можете менять до неузнаваемости и затем скачивать макет для печати в формате PDF или офомлять заказ на печать визитных карточек не отходя от компьютера. На ваш выбор любая типография зарегистрированная на сайте.
Все категории 
Автомобили, автоуслуги 
Бизнес и услуги для бизнеса 
Бытовые услуги 
Государство и право 
Животные и ветеринария 
Информационные технологии, компьютеры, IT 
Кафе, бары, рестораны 
Красота и уход, салоны красоты 
Культура 
Маркетинг, реклама и PR 
Медицина и здоровье, врачи 
Недвижимость, риэлторы 
Образование, учителя, репетиторы, няни 
Праздники, развлечения и досуг 
Производство и промышленность 
Путешествия и туризм 
Религия 
Спорт, фитнес, йога 
Строительство, ремонт и отделка 
Торговля 
Транспорт и доставка 
Финансы и страхование 
Другие
Источник: printut.com