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

Нельзя забывать: бизнес успешен только тогда, когда его продукт вызывает в покупателях эмоциональный отклик. Но как рассказать о своих услугах максимальному количеству людей за ограниченный промежуток времени? Есть ли способ заставить покупателя «выслушать» вас до конца?

Почему видеоролики так популярны

Рисованный видеоролик Spotify позволил новому музыкальному сервису обойти iTunes за 5 месяцев после запуска и принести Universal Music рекордную прибыль — более 30 млрд долларов.

Количество пользователей файлового хостинга DropBox за 1 месяц распространения ознакомительного видеоролика увеличилось на 10%. За первые 5 лет после запуска число пользователей сервиса выросло с 0 до 300 млн, а его стоимость возросла до 400 млрд долларов благодаря короткому эксплейнеру, который понравился всем.

СИБУР, крупнейшая нефтехимическая компания России, активно использует анимационную видеорекламу для привлечения новых клиентов. Сложные производственные процессы становятся понятны после просмотра рекламного ролика. И это поднимает объёмы продаж.
Читать полностью »

Когда-то давно я получил высшее образование по физике. Позже еще самостоятельно выучился на веб-программиста. С тех пор я преимущественно работаю программистом, но продолжаю уделять время и физике, и технике (что-нибудь рассчитываю или конструирую), и науке в целом. Подобное «раздвоение» приносит интересные результаты. Оказалось, что некоторые факты в физике можно хорошо объяснить с помощью программирования.

Откуда вообще возник такой вопрос? У старшего ребенка в школе было занятие про планеты Солнечной системы. В целом, он их знает, и на вечернем небе мы видели некоторые (Юпитер, Марс, Сатурн). Но многие интересные факты остаются за пределами понимания. Не хватает наглядности, движения, может быть, интерактивности. Вот именно этот пробел в подаче материала я и захотел заполнить с помощью веб-программирования, следуя известной мудрости «лучше один раз увидеть, чем сто раз услышать».

Как вы уже догадались, в статье речь пойдет о фактах, касающихся Солнечной системы (не только о планетах). Давайте посмотрим, что есть такого любопытного в нашем галактическом уголке.
Читать полностью »

Мы не можем представить нашу жизнь без трёхмерной анимации. С утра до глубокой ночи нам показывают всевозможные рекламные ролики, эксплейнеры, презентации продуктов и фильмы. Тысячи digital агентств и фрилансеров конкурируют друг с другом, стремясь создать наиболее привлекательный 3D-контент для своих клиентов, а те в свою очередь, пытаются продавать свои продукты миллионам потребителей.

Вот пример качественно сделанной трёхмерной анимации. Как все могли догадаться, это презентация нового iPhone XS.

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

Интерактивный дизайн не обязательно должен быть сложным - 1

Интерактивность помогает сделать пользовательские интерфейсы выразительными и простыми в использовании. Несмотря на большой потенциал, интерактивность, пожалуй, наименее понятно из всех дисциплин дизайна. Это может быть связано с тем, что интерактивность является одним из новых членов семейства пользовательских интерфейсов. Визуальный дизайн и дизайн взаимодействия восходят к ранним графическим интерфейсам, но интерактивный дизайн должен был дождаться более современного оборудования для плавного рендера анимации. Наслаивание интерактивности пользовательского интерфейса на традиционную анимацию вносит свою лепту недопонимания. Целую жизнь можно потратить на освоение 12 основных принципов Диснея, означает ли это, что интерактивность пользовательского интерфейса также сложно? Люди часто говорят мне, что проектировать интерактивность сложно или что выбор правильных значений неоднозначен. Я утверждаю, что в областях, наиболее важных для пользовательского интерфейса, интерактивный дизайн может и должен быть простым.
Читать полностью »

Предлагаю вашему вниманию перевод очень крутой статьи по анимации интерфейса.
The ultimate guide to proper use of animation in UX автора Taras Skytskyi.

Полное руководство по правильному использованию анимации в UX - 1

В настоящее время трудно впечатлить или даже удивить анимацией интерфейса. Она показывает взаимодействие между экранами, объясняет, как использовать приложение или просто направляет внимание пользователя. Изучая статьи об анимации, я узнал, что почти все они описывают только конкретные варианты использования или общие факты об анимации, но я не сталкивался с какой-либо статьей, где все правила, касающиеся анимации интерфейсов, были бы четко и практически описаны. Но, в этой статье я не буду писать ничего нового, я просто хочу собрать все основные принципы и правила в одном месте, так что другим дизайнерам, которые хотят запускать анимированные интерфейсы, не нужно было искать дополнительную информацию.
Читать полностью »

Тренды дизайна в 2018: прогноз и реальность - 1

Примечание переводчика: эту замечательную статью не перевели для Хабра ни в начале года, ни позднее. При том что она действительно полезная и заслуживает внимания. Поэтому, несмотря на то, что почти ⅔ 18-го года уже прожиты, я всё-таки решилась на перевод. Заодно сравнила прогнозы с реальностью, о чём оставила комментарии по тексту.

Внимание: под катом много тяжёлых гифок и красоты!
Читать полностью »

Анимации в Android на базе Kotlin и RxJava - 1

Привет! В прошлом году на MBLT DEV выступал Ivan Škorić из PSPDFKit c докладом о создании анимаций в Android на базе Kotlin и библиотеки RxJava.

Приёмы из доклада я сейчас использую в работе над своим проектом, они здорово помогают. Под катом — расшифровка доклада и видеозапись, теперь этими приёмами можете воспользоваться и вы.Читать полностью »

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

Дисней представила собственную систему анимации волос HairControl - 1
Фото: Disney Research

Компания Дисней (с учетом ее имперских амбиций на рынке) с таким подходом мириться не хотела, поэтому несколько дней назад публике был представлен новый метод трекинга и управления поведением волос анимационных персонажей. При этом разработка применима как и для рынка анимационных фильмов, так и для рынка геймдева. Основное отличие новой системы от устоявшихся практик: отказ от создания сетки «локонов» и переход к динамической системе с «якорями». В своем релизе специалисты Дисней рассказывают о новой системе генерации волос, которая базируется на принципе взаимодействия с центром масс и опорных точек внутри локонов.
Читать полностью »

Анимированные переходы в мобильных приложениях - 1
Изображение: Ramotion

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

В этой статье мы рассмотрим несколько типичных случаев, когда функциональная анимация дополняет визуальный дизайн и поддерживает взаимодействие пользователя с интерфейсом.
Читать полностью »

Автор материала, перевод которого мы сегодня публикуем, Нэш Вэйл, говорит, что недавно он занимался исследованием лендинг-страниц. В ходе работы он наткнулся на один сайт. Это был отличный, полезный ресурс. Однако, в ходе работы с ним, Нэш заметил, нечто неприятное.

Применение правил тригонометрии для создания качественной анимации - 1

Неестественная анимация
Читать полностью »