Рубрика «анимация» - 18

в 7:39, , рубрики: 3d графика, dji, анимация, Анимация и 3D графика, метки: , ,

Это наша 4-ая по счету работа, которая каким-то боком относится к проекту «Цыган». Делали мы ее
примерно полгода. Это приличный срок, и за это время у нас накопилось достаточно материала,
которым мы хотели бы поделиться.

Итак, с чего все начиналось?

Конечно, с идеи. Вообще, описывать процесс создания идеи довольно сложно, так что будем считать,
что она появилась сама по себе. И, вдохновившись, мы начали работу.

Весь этап работы над мультфильмом официально можно разделить на несколько этапов:

  1. Препродакшн
  2. Продакшн
  3. Постпродакшн

Начнем с препродакшна

Dji — Death fails. Приквел к мультфильму Цыган (Making off )

Читать полностью »

в 14:31, , рубрики: android, анимация, анимация фрагментов, метки: , ,

Всем доброго времени суток. Этот пост хочу посвятить теме фрагментов для Android. На Хабре есть уже переводы и некоторые статьи, которые упоминают о том, как начать работать с фрагментами под Android. Например, статья Fragments API в Android 3.0. В ней находится описание того, что такое фрагменты и в какой версии Android они доступны, поэтому те, кто ещё не добрался до неё могут при желании ознакомиться, я же не буду пересказывать этого в своём посте. Поэтому сразу перейду к делу.
Читать полностью »

в 11:30, , рубрики: css, keyframes, steps, анимация, спрайт, спрайты

[иллюстрация принципа]

Если вам не хочется использовать гифы на сайте, а предпочитаете PNG за их лучшую цветность, но всё же нужно анимировать их, тогда вот способ:

у анимаций CSS с ключевыми кадрами есть свойство под названием animation-timing-function. Одна из его возможностей — использовать функцию steps(), как в нижеследующем примере:

div {
    animation: play 1s steps(10) infinite;
}
@keyframes play { 
      0% { background-position:    0px 0; } 
    100% { background-position: -500px 0; }
}

Различие между нею и остальными анимационными функциями состоит в том, что вместо плавного движения от 0px к −500px происходят резкие прыжки с паузами между ними. Это идеально подходит для анимаций, использующих лист с покадровым изображением спрайта. В вышеприведённом примере шаг равен 50px, а пауза — 100 миллисекунд (всего 10 шагов).

Вот небольшое демо.

Читать полностью »

в 17:10, , рубрики: javascript, анимация, Веб-разработка, визуализация, Дизайн в IT, тригонометрия, метки: , ,

Примеры использования тригонометрических функций для анимации

Джастин Уиндл, программист и дизайнер из Google Creative Lab, опубликовал на Codepen.io интересное демо, показывающее примеры использования тригонометрических функций для задания динамики анимации (easing), которая выглядит естественно и правдоподобно. Демо написано с использованием легковесного анимационного фреймворка Sketch.js, написанного Уиндлом.

На сайте Джастина УиндлаЧитать полностью »

в 11:29, , рубрики: animation, python, анимация, Анимация и 3D графика, метки: , ,

Эта статья познакомит вас с основами создания анимации с использованием Python и Pyglet. Pyglet разработан для работы с 3D графикой, но в этой статье мы будем использовать его для создания очень простой 2D анимации. В частности, мы познакомимся с базовыми приемами использования Pyglet (разработка кода для создания и воспроизведения анимации) и создадим анимацию с помощью последовательности изображений.

Итак, приступим…

Анимация представляет собой последовательность кадров, быстро отображаемых один за другим. Это создает оптическую иллюзию движения объектов.

Читать полностью »

в 23:17, , рубрики: gif, paintcad, windows, анаглиф, анимация, Анимация и 3D графика, обработка изображений, метки: , , , ,

Здравствуй, читатель! Тебе расскажу я
Об анимации, в гифах лежащей,
И о трехмерных рисунках и фотках,
Их отрисовке ручной и машинной,

Об анаглифах и стереопарах,
О превращеньях двумерки в трехмерку

image

Белые точки сложи воедино,
Зенки расслабь и увидишь картину.

Читать полностью »

в 14:54, , рубрики: css, html, анимация, веб-дизайн, верстка, маркетинг, промо-сайт, метки: , , , ,

Может быть, вы уже и видели промо сайт Nissan Note, но на мой взгляд он стоит того, чтобы веб-дизайнеры обратили на него внимание.

Очень простой, но элегантный и оригинальный прием: огромная простыня с картинками превращается в анимированную презентацию при быстрой прокрутке страницы.

Не открывайте ссылку на мобильном интернете! Размер страницы больше 20Мб.
Промо-сайт Nissan Note

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

Немного технической статистики

По информации из Google Chrome:

  • общее число запросов: 289;
  • размер: 25.98Мб;
  • время загрузки на моём ноуте: 1,3 мин;
  • число «полезных» картинок: 46 (столько насчитал я);

Читать полностью »

в 11:36, , рубрики: android, animation, drawable, java, анимация, велосипед, видео, Работа с видео, Разработка под android, метки: , , , , , ,

После поста о подходе Apple к кодированию видео в JPEG, решил рассказать о своем подобном «велосипеде» под Android.
В своем мобильном проекте решили мы сделать превьюшки оружия не статической картинкой, а видео. Подразумевалось, что художники нарисуют красивые анимации, может даже в 3д, но что-то не сложилось и нам выдали простейшие зацикленные 1-1.5 секундные ролики в разрешении 256х256. В iOS версию они встроились замечательно, а вот в Android пришлось повоевать с MediaPlayer и SurfaceView, но все-равно получились некоторые «корявости» — содержимое SurfaceView не перемещалось вслед за родительским View, была заметная пауза при воспроизведении, и пр.
Разумным решением было бы разбить анимации на кадры и оформить в xml для AnimationDrawable, но для 15 видов оружия это значило бы мусорку из 5000+ кадров по 10-15 кб каждый. Потому была сделана своя реализация AnimationDrawable, работающая с sprite sheet и относительно быстрый метод конверсии видео в такой формат.

Читать полностью »

в 14:08, , рубрики: javascript, jquery, plugin, transitions, анимация, метки: , , ,

CSS3-транзишены — чертовски полезная штука. По сравнению с javascript-анимацией они:

  1. Обеспечивают более плавные переходы;
  2. Потребляют меньше ресурсов;
  3. Открывают новые возможности. Например, автоматическую обработку матричных преобразований (CSS-transforms);

Конечно, наш с вами любимый IE их не поддерживает даже в 9 версии.
Читать полностью »

в 9:42, , рубрики: animation, game development, intro, анимация, Анимация и 3D графика, Блог компании Nekki, видео, ролик, метки: , , , ,

Сегодня мы хотим рассказать вам о создании интро-ролика для нашей игры про паркур Vector — покажем раскадровку, аниматик и расскажем прочие подробности этого увлекательного процесса.

image
Читать полностью »

1...10...171819...20
Главная   |  Архив новостей  |   Android  |   Google  |   Apple  |   Microsoft  |   Информационная безопасность  |   Веб – разработка
Публикации RSS  |  Комментарии RSS
https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js