Ответы пользователя по тегу Программирование
  • Из чего сделан сайт Sony(http://www.sony.com/be-moved/)?

    @mr-molodoy
    Если говорить непосредственно про реализацию на этом сайте, то здесь можно увидеть анимацию canvas элемент растянутый на размер окна в котором прокручиваются кадры из анимации привязанные к scroll и управляемые через javascript.

    Если разбить весь процесс по этапам, то получим следующее:
    1. Продумать концепт.
    2. Создать наброски отдельных элементов.
    3. Смоделировать отдельные элементы по эскизам в любом 3D редакторе.
    4. Скомпоновать сцену, проработать освещение.
    5. Создать анимацию.
    6. Экспортировать в видео и разбить по кадрам либо экспортировать сцену сразу набором изображений.
    7. Оптимизировать изображения (скорее всего изображения будут обрезаться с сохранением только части изображения которое анимируется при этом статические элементы (которые на протяжении определенного времени не изменяются будут подложены как отдельное изображение на заднем)). Т.е в конечном итоге у нас получится на выходе независимых 3-4 слоя с изображениями, которые размещены на холсте друг под другом и с идеально подобранными позициями, что бы в целом картинка смотрелась целостно. Самый сложный, на мой взгляд, этап, которым можно пренебречь в прототипах и случаях когда анимация не очень долгая.
    8. На javascript пишется специальный "движек" для позиционирования слоев, подготовленных на пред. этапе и размещения на холсте (элемент canvas на странице).
    9. Пишется обработчик для события scroll в браузере, отслеживающий положение view порта относительно высоты страницы.
    10. Пишется контроллер инициализирующий обработчик события и передающий параметры прокрутки в "движек" для рендеринга нужного кадра на холсте основываясь на положение viewport'а (скролла).
    11. Помимо этого так же подготавливается css анимация для появления некоторых элементов на странице, таких как текст.
    12. кадры из CSS анимации подгоняют под кадры основной анимации внутри canvas, что бы она проходила синхронно и так же управление воспроизведением css анимацией включается в контроллер обрабатывающий анимацию в canvas.
    13. СSS анимация подключается к страницы поверх Canvas элеменета.
    14. Утверждаем работу с заказчиком.
    15. Получаем деньги и незабываем выдать зарплату всем трудящимся.
    Ответ написан
    1 комментарий