33 заметки с меткой анимация

Плавная бегущая строка с наклоном

Кажется, что на бегущей строке в поездах метро и МЦК используются наклонные буквы, примерно такие:

Буквы с плавным наклономБуквы с плавным наклоном

Но как такое возможно? Ведь сетка светодиодов квадратно-гнездовая квадратная.

Очевидно, что нельзя нарисовать наклонные буквы в такой сетке без ступенек:

Стрелки указывают на некрасивые изломы буквСтрелки указывают на некрасивые изломы букв

Но ступенек на буквах не было, или мой мозг их не замечал. Чтобы разобраться в этом обмане зрения, я сделал фото и видео двух панелей бегущей строки.

Панель без наклона

Для сравнения вот другая панель, которая расположена на станции.

Ровные буквы, стопкадрРовные буквы, стопкадр

На видео буквы остаются ровными. Движение строки скачкообразное: буквы перемещаются за 1 шаг на длину одного светодиода.

Панель с наклоном

А вот бегущая строка с псевдонаклонными буквами. Её не получилось заснять с первого раза из-за мерцания:

Мерцания на бегущей строкеМерцания на бегущей строке

Если увеличить выдержку при съёмке, видно, что буквы рисуются не сразу целиком, а построчно (имеется в виду строка светодиодов). Развёртка идёт сверху вниз группами строк, это хорошо заметно на видео.

Обратите внимание на букву С в начале нижней строки (это бегущая строка). Верхние цифры статичны, и поэтому они остаются ровными:

Наклонная С в начале бегущей строкиНаклонная С в начале бегущей строки

Измените скорость видео на значение 0.25, чтобы заметить, как загораются буквы:

Похоже, что параметры развёртки подобраны таким образом, чтобы мы ощущали плавное движение букв. Плавность создаётся за счёт того, что в один момент видна только верхняя часть строчки, а в другой момент — нижняя. Из двух (или более) таких кадров наш мозг складывает полную картину. Тем временем строчка движется дальше, и мозг не успевает отследить отдельные кадры. По аналогичному принципу быстро мигающая белая точка покажется нам 50%-серой. А наклон букв — побочный эффект. Без наклона пришлось бы двигать буквы строго по пикселям, и тогда не было бы плавности движения.

У меня не получилось наглядно заснять этот эффект на камеру. Чтобы увидеть его «как есть», прокатитесь в метро или по МЦК.

Схема проезда с переключением путей

Для компании по ремонту АКПП нарисовал схему проезда с переключателем путей. В данном случае пришлось так поступить, потому что подъезд к объекту сложный, и вариантов слишком много. Стрелочки на вкладках помогают быстрее сориентироваться.

  • Варшавское шоссе из центраВаршавское шоссе из центра

Схема проезда сделана на флеше с анимацией путей. Те, у кого нет флеша, видят статичные картинки, которые всё же можно переключать (реализовано по старинке, зато у всех работает: через html map rect). В ходе работы над схемой проезда мы совместно с заказчиком улучшили и саму страницу контактов.

Схема проезда для автосалона на шоссе Энтузиастов

Открывайте на весь экран:

Схема проезда для автосалонаСхема проезда для автосалона

Для этой схемы были нарисованы упрощённые машинки, которые хорошо смотрятся в микроразмере:

Машинки для схемыМашинки для схемы

Четыре направления — четыре машинки. Анимации на поворотах нет, машинка просто «переключается». Как в старинных компьютерных играх.

Анимация пути на схеме проезда

Если вы видели мои схемы проезда, то, наверное, обращали внимание на аккуратные маршруты с анимацией:

Нажмите для просмотра анимацииНажмите для просмотра анимации

В этой заметке я расскажу, как такое делается, но сначала небольшая предыстория.

Однажды меня попросили переделать схему проезда с анимированными путями. Внутри флешки обнаружилась куча полосатых слоёв, все они двигались в различных направлениях (и сильно грузили процессор), а линия пути использовалась как маска для этих слоёв:

Справа — как бы пунктирная линияСправа — как бы пунктирная линия

Что произойдёт на крутом повороте?

▼ Читать дальше

Баннер про семь чудес света

Встретился сегодня такой баннер:

Баннер EMSБаннер EMS

Однажды и я делал нечто похожее:

Деловой человек встречает 7 чудес света и при этом общается по телефону.

В этом флеш-ролике привлекают внимание 3 движения, в реальности не совместимых друг с другом: 3D-вращение шара, поворот чудес света и ходьба человека.

Чудеса света, кстати, векторные (использована автоматическая трассировка).

Баннеры для социальных сетей

У компании «Автодети» есть свои представительства в социальных сетях. Новости, видеоролики, информация об акциях и пр. — над этим ежедневно работают. Стандартные кнопочки соцсетей имеют невысокую кликабельность, поэтому главному сайту нужны баннеры.

В каждом баннере я постарался передать «дух» соцсети:

ТвиттерТвиттер
Канал на ЮтубеКанал на Ютубе
ВконтактеВконтакте
Яндекс.МаркетЯндекс.Маркет

По ссылкам — полезная информация для тех, кто заботится о детской безопасности на дорогах (заходите, подписывайтесь, читайте).

Заставка с 3D-логотипом

Трёхмерное вращение логотипа успешно выполнено — посмотреть — и теперь этот элемент используется в шапке сайта, а также в качестве заставки (screensaver) на офисных компьютерах:

Как создавалась схема проезда для spmet.ru

Путь до «Металл-ателье» не совсем прост, но нам удалось показать его доступно:

Нажмите для просмотра анимацииНажмите для просмотра анимации

Это прозрачная и контрастная схема — она в равной степени хорошо смотрится и на белом фоне (при распечатывании), и на сайте компании (там бежевый фон).

По желанию заказчика была подготовлена схема в PDF, её можно посылать по почте или печатать в высоком разрешении:

Векторная схема проезда в PDFВекторная схема проезда в PDF

Далее я расскажу и покажу, как создаётся схема.

▼ Читать дальше

Недорогие баннеры для сети mail.ru

Когда бюджет баннера скромный, можно сделать простой баннер в стиле сайта с появляющимся текстом:

▼ Читать дальше

3D-вращение во флеше

Сейчас я работаю в том числе над созданием 3D-анимации логотипа ЖБИП:

Наивно полагал, что в новом флеше (CS5) есть инструменты для создания полноценного 3D. Но это не так. По-прежнему сначала нужно создавать трёхмерную модель, например, в 3D-максе, потом сохранять несколько ключевых кадров и отрисовывать их заново во флеше. В этом тоже есть свои преимущества: меньше нагрузка на процессор плюс полный контроль над каждым кадром (будет именно так, как мы нарисуем, а не «как свет ляжет»).

▼ Читать дальше

Баннеры 468х60 GIF

В некоторых случаях полезно пойти на компромисс и свести анимацию в баннерах к минимуму (3-5 меняющихся кадров, можно с эффектом перехода). Для этих целей хватает возможностей формата GIF:

Баннер для акции от «Гудвила»Баннер для акции от «Гудвила»
Баннер для «Автодетей» на синий фонБаннер для «Автодетей» на синий фон

▼ Читать дальше

Баннер «Лето скидок»

Горизонтальный скидочный баннер для шапки сайта mosershop.ru:

▼ Читать дальше

Сайт грузоперевозок «МК-Лидер»

mk-lider.ru

Главная страницаГлавная страница

▼ Читать дальше

Баннер для олимпиады ФТК

Текст к баннеру придумала моя сестра, а исполнение — моё:

Размер баннера: 230 на 150 пикселей. Расположение — на исходном сайте в левой колонке. Ссылка передаётся через переменную.

Карта поставок из других стран

Для сайта Rainbowproduction Co. требовалось сделать красивую карту поставок продукции из других стран.

Карта тянется до любого размера, слайд-шоу увеличивается при наведении курсора:

Карта поставок: кликните для просмотра флеш-версииКарта поставок: кликните для просмотра флеш-версии

▼ Читать дальше

Анимация радуги на флеше

Для сайта Rainbowproduction Co. нужна заставка на главную страницу: радуга, появляющаяся слева направо и озаряющая всё вокруг. Может меняться фон под радугой, а размер должен подстраиваться под экран пользователя.

Анимация радуги: кликните для просмотра флеш-версииАнимация радуги: кликните для просмотра флеш-версии

Новогодняя шапка сайта

Сисечный баннер в шапку сайта «Никерманн» под Новый год:

Баннер «Экономьте!»

Простой баннер в два кадра:

Здесь использован знакомый всем эффект а-ля PowerPoint, но созданный собственноручно (потому что готовые эффекты сильно увеличивают вес баннера).

Волны в тексте (анимация)

Как оживить «шапку» сайта, не затронув основную фотографию и текст?

Эффект волн вполне соответствует «неординарному подходу» и «нестандартным решениям».

Логотип выходит из воды

В шапке сайта нужно было добавить логотипу какой-нибудь прикольный эффект.

(Повтор по наведению.)

Баннер для банка

Небольшой горизонтальный баннер 200×80 пикселей:

Минибаннеры для «Автодетей»

Для сайта «Автодетей» придумано и нарисовано около 50 небольших баннеров. Формат GIF уходит в прошлое, но мы всё ещё используем его:

Реклама игрыРеклама игры
Полезные аксессуарыПолезные аксессуары
Загадочная программа обслуживанияЗагадочная программа обслуживания

▼ Читать дальше

Баннер для «Гудвила»

Идея в том, что всякие отчётности и проверки сильно нарушают спокойствие. Почему бы не поручить эти «проблемы» профессионалам?

Баннеры химического магазина

Горизонтальный баннер (соотношение 10 к 1):

Квадратный баннер:

Баннер агентства недвижимости

Баннер никуда не ведёт, так как у фирмы не было своего сайта. Поэтому крупно показаны телефоны и адрес. Всё это имеет смысл, если баннер заведомо располагается на подходящем сайте (например, этот баннер находился в шапке сайта района Строгино).

Движение в баннере иногда как будто ставится на «паузу»: это привлекает дополнительное внимание.

Анимация логотипа «Диаклаба»

Рядом с логотипом придумали девиз, который надо было как-то обыграть:

(повтор по наведению)

Флеш-баннеры ОФГП

Выкладываю баннеры для ОФГ «Перспектива». Они динамичные и минималистичные, формат — 200×300 точек:

Первый баннер, только в формате 260×160 точек:

Если будет продолжение серии, выложу сюда же.

Краш-тест

Данная флешка показывает, что произойдёт с непристёгнутым ребёнком при аварии:

А вот и полноэкранная версия краш-теста.

Баннер ресторана «Часть суши»

Баннер магазина «La Guitarra»

Стиль и персонаж были взяты из шапки сайта:

Шапка сайта La GuitarraШапка сайта La Guitarra

Баннер фотомастерской

Отправка СМС

Попробовал перепрошить свой старенький C45, заменив некоторые картинки на свои. Вот такую сделал анимацию отправки SMS-ки:

Бежит ёжик с сообщением по полю :)Бежит ёжик с сообщением по полю :)

Один раз мне удалось увидеть эту анимацию. А потом телефон «умер». Хорошо, что я сделал бэкап перед прошивкой!

Баннер для «Yappi Club’а»

Купола — это наше всё :)Купола — это наше всё :)
Иван ТитовИван Титов
Фрилансер, музыкант, физтех по жизни, семьянин, философ.
© 2004...2017