Реалистичная физика в дизайне интерфейсов. Вступление. Зачем нужна анимация в физике Теоретическая часть. Главные принципы анимации в uiдизайне
 Скачать 57.52 Kb.
|
|
Содержание Вступление. Зачем нужна анимация в физике…………………………………..3Теоретическая часть. Главные принципы анимации в UI-дизайне………...…..9Практическая часть. Физические законы в анимации интерфейсов…………..27Заключение. Выводы……………………………………………………………..30 Список литературы и информационных порталов и сайтов……………….......32 Введение. Зачем нужна физика в анимации Каждый предмет или персонаж обладает массой и движется, только когда на него воздействуют силы. Это первый закон движения Ньютона. Неподвижный предмет стремится оставаться в состоянии покоя до тех пор, пока определенная сила не приведет его в движение; но, начав двигаться, он стремится продолжать движение по прямой, пока другая сила не остановит его или не заставит изменить направление. Чем тяжелее объект, т.е. чем больше его масса, тем больше сил требуется, чтобы изменить его состояние. Тяжелый предмет обладает большей инерцией. Чтобы привести в движение такой предмет — например, пушечное ядро, — требуется очень мощный толчок. В момент выстрела сила заряда действует на ядро, только пока оно находится в стволе пушки. Сила взрыва достаточно велика, чтобы придать ядру значительную скорость. Меньшая сила, например, щелчок, не будет иметь никакого эффекта, разве что можно повредить себе палец. Но постоянное давление на ядро, даже не очень сильное, способно стронуть его с места и постепенно довести движение до большой скорости. Пущенное в движение ядро стремится сохранить полученную скорость и направление. Нужна новая сила, чтобы остановить его. Если в этот момент на его пути возникает препятствие, ядро может (при достаточной скорости) пробить его и лететь дальше. Если ядро катится по ребристой поверхности, оно остановится гораздо быстрее, чем двигаясь по ровной и гладкой поверхности. Поэтому, рассчитывая движение тяжелых предметов, режиссер должен иметь в виду время, необходимое для разгона и остановки этих предметов, тогда почувствуется их вес и масса. Легкие предметы нуждаются в гораздо меньших импульсах и реагируют совсем по-иному на внешние воздействия. Воздушному шарику довольно легкого щелчка, чтобы он отлетел в сторону. Инерция его движения настолько слаба, что сопротивление воздуха способно остановить шарик. Поведение предмета на экране, ощущение его массы обусловлено не самими рисунками, а расстоянием между ними. Как бы красиво ни было нарисовано ядро, оно не станет убедительным, если его изображения не будут правильно распределены в пространстве. Это относится и к любому другому объекту Вы бросаете предмет вверх по вертикали. Скорость его взлета постепенно убывает, доходит до нуля. Дальше предмет начинает падать, скорость возрастает— по тем же делениям, что и при взлете, но в обратном порядке. Если бросить предмет не вертикально, а под углом, его полет получит два направления: вертикальное и горизонтальное. Скорость подъема, как и в прошлом примере, постепенно угаснет, после чего наступит ускоряющееся движение вниз, а горизонтальное движение останется почти без изменений. Предмет пролетит по траектории. Резиновый мяч, упавший на твердую поверхность, может совершить серию прыжков в виде траекторий; при каждом следующем ударе энергия мяча убывает, следовательно, уменьшается и траектория полета. Фаза, идущая сразу после удара, должна частично перекрывать предыдущую; следующая фаза помещается уже с отрывом, учитывая полученную при отскоке скорость; ближе к зениту траектории фазы будут располагаться все плотнее, поскольку скорость уменьшается; дальше, с падением мяча, скорость вновь нарастает и расстояние между фазами увеличивается. При очень большой скорости, когда дистанция между фазами превышает диаметр самого мяча, рекомендуется вытягивать мяч по оси движения и добавлять сзади спидлайны. Это поможет глазу соединить разрозненные фазы в цельное движение. Вращение предметов Говоря о полете подброшенного мяча по траектории, мы имеем ввиду, что расчет движения ведется от центра тяжести данного предмета. Масса любого тела движется соответственно своему центру тяжести. Предметы несимметричной формы Если в воздухе летит предмет неправильной формы, каждая фаза его полета отмечается на траектории по точке, где сосредоточен центр тяжести. Это важно, поскольку большинство предметов в полете вращаются вокруг своей оси. Например, у тяжелого молота основной вес находится в металлической головке, следовательно, центр тяжести нужно искать в этой части. По такому принципу можно рассчитывать движение других объектов. При большой скорости перспективное сокращение вращающегося предмета малозаметно. Поэтому для различных фаз полета молота можно использовать один рисунок с отметкой центра тяжести. По этой точке рисунок совмещается с делением траектории, устанавливается под нужным углом и переводится на чистый лист. Заготовка сдвигается на следующее деление с соответствующим наклоном, перерисовывается, снова сдвигается и т.д. В объектах с изменяющейся формой — как, например, человеческих фигурах — меняется и центр тяжести. И все же, если человек падает или прыгает в воздухе, его полет нужно рассчитывать точно по делениям траектории, совмещая их с центром тяжести фигуры так же, как при вращении неодушевленных объектов. ТЕОРЕТИЧЕСКАЯ ЧАСТЬ 2. Главные принципы анимации в UI-дизайне Аниматоры продолжали поиск лучших методов соотношения рисунков между собой и нашли несколько способов, которые, казалось, приводили к предсказуемому результату. Они не могли рассчитывать на успех каждый раз, но использование этих методов рисования персонажа в движении давало некоторую стабильность. Каждый из процессов получил свое имя, был проанализирован, усовершенствован и обговорен, и когда новых художников принимали в штат, их обучали этим методам, как если бы это были правила ремесла. К всеобщему удивлению, они стали основными принципами мультипликации: Наиболее важным открытием стали так называемые «сквош» и «стрейч» (сжатие и растяжение). Когда твердое тело двигается на бумаге от одного рисунка к другому, движение подчеркивает явную жесткость предмета. В жизни такое случается лишь с наиболее твердыми формами, такими как стулья, блюдца или сковородки. Все, что состоит из плоти, независимо от её костлявости, будет иметь значительные сдвиги 1. Сжатие и растяжение (Squash and Stretch); 2. Подготовка (Anticipation); 3. Сценичность (Staging); 4.Анимация «прямо вперёд» или «кадр за кадром» (Straight Ahead Action) и ключевые компоновки (Pose to Pose); 5. Остаточное движение или доводка (Follow Through) и захлёст (Overlapping Action); 6. Ускорение и замедление (Slow In и Slow Out — «медленный вход» и «медленный выход»); 7. Дуги (Arcs); 8. Дополнительное действие (Secondary Action); 9. Расчет времени — тайминг (Timing); 10. Преувеличение (Exaggeration); 11. Отличный (профессиональный) рисунок (Solid Drawing); 12. Привлекательность (Appeal). Наиболее важным открытием стали так называемые «сквош» и «стрейч» (сжатие и растяжение). Когда твердое тело двигается на бумаге от одного рисунка к другому, движение подчеркивает явную жесткость предмета. В жизни такое случается лишь с наиболее твердыми формами, такими как стулья, блюдца или сковородки. Все, что состоит из плоти, независимо от её костлявости, будет иметь значительные сдвиги внутри формы во время действия. Хорошим примером служит согнутая рука, с бицепсом, напряженным так, что видны только длинные сухожилия. Согнутая фигура заметно сокращается в размере, в отличие от фигуры в экстремальном растяжении или прыжке. Жующая, улыбающаяся, говорящая или меняющая свое выражение физиономия будет выглядеть живой, пока происходит изменение формы щек, губ, глаз — ведь только восковые фигуры в музее остаются неизменными. Сжатая поза может продемонстрировать как форму, сплющенную под большим давлением, так и собранную в кучу и сдавленную вместе. Вытянутые позы всегда показывают ту же форму, но в растянутом состоянии. Переход от одного рисунка к другому стал самой сутью анимации. Улыбка больше не была просто линией на лице персонажа; теперь она определяла губы и их отношение к щекам. Ноги перестали быть изогнутыми трубками или резиновыми шлангами — они утолщались при сгибании и растягивались до длинных, подвижных форм. Аниматоры сразу же стали пытаться превзойти друг друга, придумывая варианты со всё большим и большим сжатием и растяжением, доводя эти принципы до крайностей в рисунке. Глаза щурили и широко раскрывали, втянутые щеки при вдохе стали разительно отличаться от надутых щек при выдувании. Жующий соломинку рот сначала рисовали гораздо ниже носа, потом прижимали к самому носу (который тоже изменял форму), показывая таким образом пережевывание. В середине тридцатых годов все делали по два рисунка для каждого задуманного действия, и, работая то с растяжением, то с сжатием, обнаружили, что могли бы сделать каждую позу сильнее и в движении, и в рисунке. Лучшим советом, чтобы растянутые рисунки не выглядели жирными или опухшими, а вытянутые позы — излишне тонкими или истощенными, было представить себе форму или объем наполовину заполненного мешка с мукой. Упав на пол, мешок сожмется всей формой, а если его кто-то поднимет, то растянется во всю длину; тем не менее, его объем никогда не изменится. Мы даже сделали рисунки мешка с мукой в разных позах — стоящим, скрученным, с преувеличенными эмоциями и действиями. Это заставило нас искать самый прямой путь, самую простую формулировку, поскольку, если мы добавляли какие-либо лишние линии, чтобы усилить выражение, это уже был не мешок муки. Мы обнаружили, что нет необходимости во множестве мелких внутренних линий: если сама форма задумана правильно, она покажет все, что нужно. Эти приемы были применены для тела и щек Микки, для ног и морды Плуто, и даже для головы Дональда. На спортивной странице ежедневной газеты мы нашли для себя никем не замеченную золотую жилу здесь были великолепные фотографии, показывающие эластичность человеческого тела в состояниях разного рода натяжения, напряжения и резкого движения. Наши принципы анимации были четко видны в контрасте между изгибами и округлостями тела — и прямыми, напряженными участками. Сочетание кривых и прямых иллюстрировало возможность фигуры человека передавать радость, разочарование, сосредоточенность и прочие сильные эмоции из мира спорта. Эти примеры открыли нам глаза и заставили замечать все по-новому. Стандартным анимационным тестом для начинающих художников было задание нарисовать прыгающий мячик. Его можно было быстро выполнить и легко изменить, и это было удивительно полезно с точки зрения возможностей обучения. Задание было всего лишь изобразить мяч в виде простого кружка, затем, на следующих рисунках, заставить его упасть, удариться о землю, и отскочить вверх так, чтобы снова повторить весь процесс. Мы либо изображали продвижение мяча вперед по бумаге, либо рисовали всё действие в одном месте, что позволяло нам с помощью цикла рисунков сделать мяч прыгающим постоянно. Выглядел такой тест проще некуда, но с его помощью мы изучали механику анимирования сцены, а также знакомились с таймингом, сжатием и растяжением. Нас увлекало изменять форму мяча в самых быстрых частях отскока, создавая вытянутый круг, который легче увидеть, затем быстро сплющивать его при ударе о землю, придавая убедительность соприкосновению, как если бы сплющенная форма была резиновым мячом в действии. Это изменение в нижнем положении давало ощущение толчка для отскока обратно в воздух, но если мы делали дополнительные один или два рисунка в этой точке, чтобы максимально усилить это действие, то мяч оставался на земле слишком долго, создавая странный эффект самостоятельного подпрыгивания вместо отскока. Если мы недооценивали значение расположения рисунков или расстояния между ними, то у нас получалось нечто, похожее на раненого кролика или злобную саранчу или, что чаще, сонную жабу. Однако многие круглые формы всё же скакали так, как если бы они были живыми. Начинающие художники были изобретательны, ими были испробованы всевозможные вариации, каждая из которых сообщала что-то о человеке, создавшем анимацию, и о том, что он считал наиболее важным в сцене. Некоторые добавляли разнообразия, начиная с большого отскока, впоследствии делая его все короче и короче, пока мяч постепенно не терял инерцию. Другие располагали действие в перспективе, чтобы показать, как хорошо они могут справиться со сложной задачей, или добавляли полоску на мяче, чтобы показать, насколько сильно он вращается во время действия. Таких людей сразу забирал отдел эффектов, специализировавшийся на технической анимации. Те же, кого больше интересовало яркое зрелище, предпочитали неожиданные концовки: мяч взрывался, касаясь земли, разбивался как яйцо на следующем отскоке или отращивал крылья и улетал. Подготовка (Anticipation) При просмотре анимационной сцены зрители не смогут понять события, происходящие на экране, если нет четкой последовательности действий, которая ясно ведет от одного события к другому. Они должны быть готовы к следующему движению и ожидать его прежде, чем оно на самом деле произойдет. Этого добиваются включением специального движения персонажа, предшествующего каждому основному действию и подготавливающего зрителя к восприятию того, что произойдет дальше. Такая подготовка может быть малой, как смена выражения лица, или же значительной, как размашистое физическое действие. Перед началом бега человек делает низкий старт, собираясь как сжатая пружина, или, наоборот, отклоняется назад, в противоположную сторону, поднимая плечи и одну ногу, тем самым готовя себя к следующему действию. Прежде чем Микки потянется, чтобы взять предмет, он сначала поднимает руки, пристально глядя на вещь и показывая тем самым, что сейчас он сделает что-то именно с этим объектом. Это старейший прием театра, без которого зрители начинают нервничать и беспокойно шептать: «Что он делает?» Предварительные движения не обязательно объясняют причину действия персонажа, но избавляют от вопроса, что именно он делает или что собирается сделать дальше. Предвидя то или иное действие, зрители могут теперь насладиться тем, как это сделано. Противоположность подготовки — «неожиданный гэг», который работает только в том случае, если зрители ожидают одного, а вдруг, без предупреждения, происходит что-то совершенно другое. Неожиданный гэг не сработает, если зрители не предвкушали другое действие. Так же любое действие на сцене без подготовки не может быть ничем, кроме как серией бессмысленных сюрпризов. Движения в ранней анимации были резкими и неожиданными; слишком часто зрители оказывались неподготовленными должным образом и пропускали гэг при его появлении. Это стало одной из первых вещей, которые Уолт начал исправлять. Свое средство он назвал «направленность действия» и показал, как просто действие или жест могут быть сделаны настолько ясными, что каждый бы заметил. Если счастливый кролик Освальд кладет руку в карман, чтобы достать бутерброд на обед, всё тело должно быть связано с этой рукой и карманом. Когда движение руки направлено, действие должно быть однозначным, чтобы любой мог увидеть это и предугадать, что будет дальше. Голова не может смотреть в другую сторону — самое важное действие то, как Освальд лезет в свой карман. Это не гэг, не шутка, но это необходимо увидеть. Ни у кого недолжно возникнуть вопроса: «Ну и где сейчас он взял этот бутерброд?» Когда Уолт продемонстрировал, как это может быть сделано, он преувеличил действие сделал его гораздо более интересным, чем аниматор был способен тогда уловить. Немногие движения в реальной жизни происходят без какой-либо подготовки. Для живых существ это похоже, естественный способ двигаться, и без нее в любом действии было бы мало силы. Для гольфиста это — замах назад, для подающего в бейсболе —закручивание мяча. Отбивающий готовит себя целой серией предварительных движений, но сильный удар дает последний поворот и шаг вперед в тот момент, когда мяч подлетает к бите. Без этого движения даже самый мощный мах будет не более чем толчком. Сценичность Сценичность — самый важный из принципов, потому что включает в себя множество аспектов и берет свои истоки в театре. Его значение, однако, очень точно: это презентация любой идеи таким образом, чтобы она была полностью и без ошибочно ясна. Действие ставят так, чтобы оно было понятным, характер делают узнаваемым, выражение заметным, а настроение таким, чтобы оно влияло на публику. Самым важным всегда является определение смысла происходящего. Решено, например, что определенная часть действия будет двигать историю; как же это поставить? Смешнее ли это на дальнем плане, где можно увидеть всё, или на крупном плане, показывающем индивидуальность? Лучше целиком снять на одном общем плане с наездом камеры или серией коротких планов разных объектов? Каждая сцена должна подходить под определенный план, и каждый кадр фильма должен помогать передать суть истории. Если требуется ощущение «жути», сцену наполняют символами пугающей ситуации. Старый дом, завывает ветер; листья и бумажки, шелестя, проносятся через двор; проплывают облака, закрывая луну; небо нависло над землей; может быть, голые ветви стучат или скребутся в окно, и мелькает тень, —всё это называется «жутью». Яркая цветочная клумба будет здесь не к месту. Если делаем постановку, необходимо удостовериться, что только одно действие заметно: оно недолжно быть спутано драпировкой, неудачным углом зрения, или отодвинуто на задний план чем-то, что может происходить в этот момент. Вы рисуете нетолько для того, чтобы изображение выглядело милым или смешным: главное выразить идею самым простым и убедительным способом — и только потом уже продолжать действие. «Прямо вперёд» или «кадр за кадром» и ключевые компоновки «от позы к позе» Это два основных подхода в анимации. Первый известен как Straight Ahead Action («прямо вперед» или «кадр за кадром»), потому что аниматор буквально работает по порядку от первого рисунка в сцене, кадр за кадром. Он легко начинает, делая рисунки один за другим, привнося новые идеи по мере продвижения, пока не достигнет концовки сцены. Он знает смысл происходящего в сцене и элементы игры, которые должны быть включены, но в самом начале он мало планирует, как это будет сделано. Все рисунки и движения свежие, немного потешные, поскольку аниматор подходит ко всему процессу творчески. Второй называется Pose to Pose («от позы к позе» или «ключевые компоновки»). Здесь аниматор планирует свои действия, понимает, какие рисунки нужны для анимации элементов игры, делает рисунки, связывает их между собой в размере и действии и отдает сцену ассистенту для рисования промежуточных. Подобная сцена всегда легка для понимания и хорошо работает, потому что связи тщательно продуманы прежде, чем аниматор уйдет слишком далеко в рисунках. Много времени тратится на совершенствование ключевых рисунков и осуществление большего контроля за движением. «Ключевые компоновки» — это чисто и эффективно. «Кадр за кадром» — спонтанно. Оба метода используются потому, что каждый дает определенные преимущества в разных типах действия. Обычно их комбинируют, удерживая способ «кадр за кадром» от выхода из-под контроля. Сцена планируется с разметкой траектории действия, а черновые компоновки отображают вероятное развитие персонажа; и хотя ничто из этого не будет использовано в самой анимации, они служат ориентирами в размере, расположении, позе и взаимодействии персонажа с фоном. Компоновки дают максимальный контроль, который только может понадобиться, хотя некоторые аниматоры чувствуют, что отсутствие контроля — элемент, привносящий спонтанность. Они говорят: «Аниматор, как никто другой, должен быть удивлен тем, что получилось». Самые дикие, борцовские сцены, вероятно, более эффективны с этим методом, чем с более тщательным предварительным планированием. «Кадр за кадром» не всегда будет работать с четкой перспективой в лэйауте или при необходимости согласовать движение с фоном. Один человек анимировал собаку, которая, пытаясь привлечь внимание, в волнении прыгала и бегала кругами. К тому времени, как он добился забавного и очень живого действия, оказалось, что это невозможно использовать из-за несогласованности анимации слэй-аутом. Не было никакого способа определить, как высоко прыгает пес, потому что он фактически не касался земли; в итоге вся проделанная работа была отброшена из-за того, что аниматор не принял во внимание перспективу. С плоским фоном и чистым полем во всех направлениях это не было бы проблемой. Как бы то ни было, многие элементы игры персонажей требуют другого подхода. Если Микки Маус удручен, он отворачивается, засовывает руки глубоко в карманы, оглядывается напоследок, пинает камень на своем пути и уходит. Это следует сделать с помощью ключевых компоновок (Pose to Pose), потому что каждое из положений должно быть сделано внимательно и с максимальной чистотой, привлекательностью и информативностью. Они должны быть тщательно проработаны, как вместе, таки по отдельности, пока результат не окажется максимально эффективным. Как только компоновки будут хорошо согласованы между собой, остается всего лишь расставить по времени промежуточные фазы и разбить действие на части. Другой элемент, который должен учитываться при выборе метода анимации — это «структура». Серии действий одинаковой интенсивности и количества движений быстро станут скучными и предсказуемыми. В них не будет напора. Но если в целом образец содержит акценты и сюрпризы, контрасты вялотекущих действий с короткими и резкими движениями и неожиданным таймингом, то все это будет радовать глаз. Очевидно, этого невозможно достичь с помощью приема «кадр за кадром». Используя ключевые компоновки, можно запланировать структуру в своих вариациях и разработать движение как часть цельного высказывания. Первые аниматоры, используя ключевые компоновки, были заинтересованы в ускоренном результате и не осознавали его блестящего будущего. Они были более озабочены географическим положением персонажей, чем потенциальным и возможностями расчета действий Остаточное движение (Follow Through) и захлёст (Overlapping Action) Когда персонаж в сцене доходил до момента, в котором начиналось его следующее действие, он часто внезапно и полностью замирал. Это выглядел о жестко и ненатурально, но никто не знал, что с этим делать. Уолт беспокоился: «Ничто не останавливается одновременно, парни; сначала одна часть, затем другая». В конечном итоге были найдены несколько разных способов исправить эти сложности; их назвали «остаточное движение» и «захлест», и на самом деле никто не знает, где заканчивается одно и начинается другое. Они представлены пятью основными категориями. 1. Если у персонажа есть выступающие свободные части, как-то длинные уши, или хвост, или широкое пальто, то они должны продолжать движение после того, как фигура остановилась. Это легко заметить в реальной жизни. Движение каждой части должно быть тщательно выверено по времени так, чтобы передать верное ощущение веса, и должно продолжать двигаться правдоподобно, независимо от степени его условности. 2.Все тело само по себе не движется одновременно, нет, — вместо этого оно растягивается, сбивается, скручивается, изгибается и контактирует с ближайшими формами. Когда одна часть останавливается, другие могут продолжать движение; рука или кисть могут продолжать действие, даже когда тело приняло свое положение. Для того, чтобы ясно отобразить позу, голова, тело и плечи могут остановиться вместе, так как это то, что зритель должен увидеть (часть, отображающая состояние персонажа). Затем, несколькими кадрами позже, остальные части окажутся в своем конечном положении, возможно, не все одновременно. Когда вся фигура останавливается в определенном положении, этот рисунок называют «контрольным». Некоторые аниматоры думали, что мы слишком перегружаем деталями, но это было только начало, ведь Уолт уже видел новые возможности в работе своих людей. 3. Мягкие ткани персонажа, такие как щеки или тело Дональда Дака, или почти весь Гуфи, будут двигаться медленнее, чем части, прикрепленные к скелету. Этот стелющийся за основным движением «хвост» иногда называют «отставанием», и оно добавляет расслабленности и цельности фигуре , что существенно для оживления. При хорошем исполнении эта техника практически незаметна в процессе создания фильма. В сущности, аниматор работает в четвертом измерении, изображая фигуру такой, какой она должна быть именно в этот момент. Рисунки бессмысленно смотреть по отдельности —только последовательно и на определенной скорости. Множество комических действий основывалось на этом принципе, как, например, жир на бегущем персонаже отстает все более и более назад, пока не дойдет до предела: скелет убегает, оставляя тело само по себе. Такой тип преувеличения рассмешит в коротком фильме, но главная ценность «остаточного движения» заключается в его более тонком использовании. 4. Способ, которым действие завершается, часто сообщает нам больше о персонаже, чем рисунки самого движения. Игрок в гольф делает сильный взмах, который занимает всего пару кадров, но то что произойдет с ним позже, может занять пять футов кинопленки, и будет более показательно, неважно, будут ли его остаточные быстрыми и элегантными, или он вдруг закрутит себя узлом. Очевидно, что концовка должна быть задумана как часть всего движения до того, как какие-то рисунки уже будут сделаны, но, поразительно, концовку едва ли продумывали в ранней анимации. Было вполне достаточно сделать вытягивание, бросок, удар, а мыслей о том, насколько более забавным могло быть действие само по себе и что оно могло рассказать о персонаже, не было. 5. И наконец, подвижная статика, которую используют части всех других элементов «остаточного движения» и «захлеста», позволяет достичь нового ощущения живости и ясности. Когда точный рисунок позы был сделан, он задерживался на экране на несколько кадров — по меньшей мере 8, а то и 16. Это давало зрителям время уловить позу. Она занимала меньше секунды, но этого было достаточно. Однако, когда рисунок задерживали надолго, нарушалась непрерывность движения, терялась иллюзия пространства, и рисунок становился плоским. Нужно было найти способ «держать» рисунок и оставлять его подвижным! Ответ был таков: создать два рисунка, один чуть более доведенный до предела, чем другой, но оба содержат все составляющие позы. Это объяснялось так: «Ты попадаешь в позу, затем медленно смещаешься дальше, в еще более усиленную позу, все двигается дальше: щеки идут вверх, уши подпрыгивают, руки поднимаются; он переходит на носочки, глаза открываются шире, но, в сущности, он остается в своем положении». Теперь мы могли использовать «остаточное движение» на мясистых частях для придания массивности и объема, мы могли медленно подтягивать части, чтобы придать ощущение веса и реалистичности, и мы могли усиливать наши позы для большей жизненности. Все это добавляло больше жизни в сцену. Начала появляться магия. Ускорение и замедление (Slow In и Slow Out — «медленный вход»и «медленный выход») Как только аниматор тщательно проработал позы и перерисовал их, доведя до совершенства, он, естественно, захотел показать их аудитории. Он рассчитал по времени так, чтобы быстрее перемещаться от одного ключевого рисунка к другому, — таким образом, основная часть видеоматериала находилась возле той или иной «крайней». Размещая промежуточные близко к каждой крайней и только один рисунок в середине, аниматор добился очень живого результата, с персонажем, проносящимся от одной позиции к другой. Этот прием был назван «медленный вход и медленный выход» (ускорение и замедление), так как именно таким образом промежуточные были расставлены по времени. Если с ними переборщить, то возникнет ощущение механического движения, лишающего сцену живости, которой добивались, но, тем не менее, это оставалось важным открытием, положившим основу для развития впоследствии тонкостей тайминга и сценичности. Дуги (Arcs) Лишь немногие живые существа способны на механически точное движение вправо и влево или вверх и вниз. Исключением могут быть действия дятла и некоторых представителей мира насекомых, ограниченных внешним скелетом, но движения большинства живых созданий будут следовать по слегка скругленной траектории. Голова редко просто выдвигается прямо вперед — а затем назад; она слабо приподнимается вверх —или опускается, если это обратное движение. Возможно, это связано с весом или, может быть, с внутренним строением всех высших форм жизни, но, какой бы ни была причина, большинство движений будут описывать какую-нибудь дугу. Это открытие существенно изменило тип движений, которые аниматоры разрабатывали для персонажей, покончив с бывшими прежде грубыми и жесткими действиями. В походке, где персонажи раньше поднимались и опускались, как поршень в двигателе, теперь они «шли по дуге» в верхней и нижней позиции шага. Удар или бросок хоть и двигались в основном по прямой, но начало действия происходило по дуге, и остаточные начинали закручиваться. Как только этот принцип был лучше усвоен, сцены начали планировать со схемами и пунктиром — также, как и в черновых рисунках — для определения, как высоко или низко персонаж начнет какое-нибудь действие. После того, как были спланированы ключевые действия, набрасывались дуги, чтобы направить рисунки между ними по данному изогнутому пути. После итоговой фазовки становится очевидным множество возможностей для развития персонажа в действии — особенно хорошо использовать сжатие, растяжение и захлест. Одна из основных проблем с промежуточными фазами в том, что их гораздо труднее изобразить по дуге, чем посередине между двумя другими рисунками. Даже когда их положение определено, или на крайних написано строгое предупреждение: «Следи за дугами!», есть большое искушение вернуться к более простой фазовке. Только когда ряд рисунков пролистают на штифтах, правильное положение рисунков станет очевидным. Дополнительное действие (Secondary Action) Часто идея, задуманная в сцене, может быть усилена вспомогательными движениями тела. Печальная фигура вытирает слезу, как только отворачивается. Оглушенный человек трясет головой, когда встает на ноги. Взволнованный надевает свои очки, будто бы они возвращают ему самообладание. Когда подобная второстепенная игра поддерживает основное действие, ее называют «дополнительным действием» и она всегда остается подчиненной главному. Если же дополнительное действие противоречит основному, становится более интересным или доминирующим в том или ином случае, оно либо неправильно выбрано, либо неудачно поставлено. Главная трудность заключается в сохранении целостности высказывания через рисунок и тайминг отдельных, но связанных частей. Если лицо печальной фигуры имеет определенное выражение, его должно быть видно, а движение руки, вытирающей слезу, — спланированно, чтобы поддержать это выражение. Широкий, подавляющий жест, закрывающий половину лица, едва ли допустим. Однако же, если движение руки слишком скромное, результат будет размазанным, ограниченным и незначительным, если слишком заметное — лица не будет видно. Если это дополнительное действие персонаж выполнил, основываясь на характерных чертах, — для того, чтобы на самом деле подчеркнуть состояние, — сцена станет выдающейся. Расчет времени — тайминг (Timing) Число рисунков, используемых для любого движения, определяет количество времени, которое это действие займет на экране. Если рисунки просты, ясны и выразительны, история может быстро произвести впечатление — это все, о чем думали аниматоры раннего периода, тайминг в тех мультфильмах был ограничен, в основном, движением от быстрого к медленному, с акцентами и резкими переходами, требовавшими особого мастерства. Но индивидуальность персонажей развивалась — и определялась скорее движениями, чем внешним видом, и меняющаяся скорость этих движений определяла, был ли персонаж вялым, возбужденным, нервным или спокойным. Ни поведение, ни отношение не могли быть изображены без пристального внимания к таймингу. Сложные взаимосвязи, пришедшие с использованием дополнительного действия и захлеста, требовали больших усовершенствований, но даже самые элементарные движения показывали важность тайминга и постоянную необходимость его более тщательного изучения. Всего лишь два рисунка головы: первый показывает наклон головы к правому плечу, а второй — к левому, со слегка приподнятым подбородком, могут потенциально передать множество идей, реализация которых полностью зависит от правильного использования тайминга. Каждая промежуточная фаза, добавленная между этим и двумя «крайними» придает новый смысл действию. кадра, было больше блеска и одухотворенности, чем в том же действии, но с промежуточными, которые, как правило, делали тайминг слишком размеренным и уничтожали энергичность действия. При панорамировании, когда видны ноги персонажа или точка его контакта с фоном, действие должно быть снято «по кадру», чтобы совпасть сдвижением фона, иначе получится специфическое проскальзывание. Точно так же, когда камера движется в любом направлении (что всегда делается «по кадру»): возникло бы странное подергивание, если действия персонажа не были бы также «по кадру». Когда требовались более тщательно проработанные действия, или более тонкие изменения должны были стать заметным и, аниматоры использовали съемку «по кадру» во всей сцене или же только в определенных местах. Драка или скоростной гэг, резкий акцент на чем-то или суматоха, получение желаемого после длительного предвкушения — везде требуется съемка «по кадру». Но выбор до тех пор оставался трудным, пока аниматор не проходил через период экспериментов, проб, ошибок, и новых проб. Только тогда он накапливал опыт, необходимый для принятия этих бесконечных решений. Преувеличение (Exaggeration) Аниматоры были в замешательстве, когда Уолт сначала попросил большего реализма, а затем раскритиковал результат, потому что было недостаточно преувеличено. Для Уолта никакой разницы, возможно, и не было. Он верил в то, что можно дойти до сути чего угодно и развить это. Если персонаж должен быть грустным, сделайте его еще печальнее; радостного сделайте живее; беспокойного — еще тревожнее; а дикого — более необузданным. Некоторые художники считали, что «преувеличение» означало искаженный рисунок или возмущающе жестокие действия. Впоследствии они поняли, что упустили суть. Когда Уолт просил реализма, он хотел видеть карикатуру на реализм. Один художник верно подметил: «Не думаю, что он имел в виду реализм. Мне кажется, он подразумевал что-то более убедительное, что дает большую связь с людьми, и он просто сказал «реализм», потому что «реальные» вещи делают это… Время от времени (в анимации) персонаж делал что-то неубедительно, или всего лишь демонстрировал, на что был способен аниматор, и это было ненастоящим, фальшивкой». Уолт никогда бы не принял того, что разрушало правдоподобность, но он редко просил аниматора сделать действие скучнее, если идея подходила для сцены. Дэйв Хэнд рассказал о тесте, который он сделал, с Микки, едущим в такси и насвистывающим, когда в машине все грохотало и подпрыгивало. Когда он входил в поворот, машину занесло и колесо спустило, в ту же секунду машина просела, номерной знак закрутился и приземлился с перевернутыми номерами, составившими фразу: «О, черт!» Дэйв был уверен, что это смешно, и он старательно поставил все так, чтобы не пропустить ни одной детали. По-видимому, он не рассматривал достаточно внимательно машину в целом, поскольку Уолт был недоволен нехваткой действиями и попросил переделать. Следующая попытка удостоилась той же реакции. «Это недостаточно раскованно и не смешно!» Дэйву пришлось шесть раз исправлять действие, стирая и перерисовывая почти до дыр, и Уолт все еще не чувствовал, что действие оживлено так, как он хотел. В конце концов Дэйву надоело: «Единственное, что я еще мог сделать, это что-то, чего он точно не примет, — представить все настолько чрезмерным, чтобы он сказал: «Я не имел в виду так сильно!» Поэтому я вернулся и сделал нечто совсем из ряда вон. Я был даже горд собой и не мог дождаться готовой пленки. Я поместил ее на монтажный стол. Уолт пришел, просмотрел ее несколько раз, затем встал и посмотрел на меня. Я думал, что он предложит мне уйти со студии, но он сказал: «Вот, Дэйв, это то, что я хотел!» «Это научило меня тому, как работать в студии Диснея, и с тех пор у меня не было никаких проблем с преувеличением. Когда я бы режиссером, я имел обыкновение говорить аниматорам: «Сделаете кое-что для меня? Преувеличьте так, чтобы я потерял голову!» Отличный (профессиональный) рисунок (Solid Drawing) Ветеранам было трудно поспевать за новыми требованиями в анимации. Лучшие художники студии советовали новичкам: «Прежде, чем начать анимировать, вы должны научиться рисовать так хорошо, как только возможно». Грим Нетвик, чья карьера аниматора началась в Нью-Йорке в 1924 году, отметил: «Чем лучше вы умеете рисовать, тем легче вам будет. Вам придется рисовать персонажа в любых позах и с любого ракурса. И если вы не можете этого сделать, вам придется размещать его под другим углом, это очень ограничивает и отнимает время». Марк Дэвис, несколькими годами позже, высказался более философски: «Рисование как представление: художник—актер, который неограничен собственным телом, но только своими возможностями и, может быть, опытом». Слишком многие, и старые, и молодые, были поглощены трюками и техниками, которые выглядели отлично в школе анимации, но никак не помогали им в работе на студии Диснея. Небольшие тени под носками ботинок, сглаженная линия, роскошное оживление реакции одежды на резкие воздействия — от всех этих приемов, впечатлявших нас в школе, теперь было мало пользы. Надписи были развешены на многих стенах, где молодые стажеры точно могли их увидеть, и лучше всего нам запомнилась следующая: «А в вашем рисунке есть вес, глубина и баланс?» — незатейливое напоминание основ хорошего, трехмерного рисунка. Люди проводили всю свою жизнь, добиваясь овладения в совершенстве этими неуловимыми принципами, и тут же висел плакат с вычурной фразой «Покупай сберегательные облигации» или указатель ближайшего выхода. Другой знак предостерегал нас следить за «двойниками» в рисунках. Это — неудачная ситуация, когда обе руки или обе ноги не только параллельны, но и делают в точности одно и то же. Никто не рисует так нарочно, и, как правило, художник даже не осознает, что он это сделал. Этим «болели» не только в тридцатых годах — и в семидесятых, вновь, молодой аниматор Рон Клементс был раздосадован, обнаружив «двойников» в своих рисунках, несмотря на то, что он очень старался их избежать. «Это был один из первых принципов работы, которые я услышал в студии. Если ты приступаешь к актерской игре, тебе и в голову не придет выразить где-то эмоцию через «двойников», но, почему-то, если не задумываешься, они прокрадываются в рисунок снова и снова». Наши основные поиски касались «анимабельности» формы: она должна иметь объем, но оставаться гибкой, быть сильной, но не жесткой, и давать возможность воплощать наши замыслы через движение. Нам нужная была живая форма, готовая к движению, — в отличие от статичной формы. Мы использовали термин «пластичность», и само этоопределение, казалось, передавало ощущение потенциальных возможностей рисунка «способность принимать форму, гибкость». Привлекательность (Appeal) Привлекательность всегда была очень важной составляющей. Это слово часто понимается неверно, внушая мысли о забавных зайчиках и ласковых котятах. Для нас же это означает всё, что человеку нравится видеть: очарование, приятный дизайн, простоту, вовлеченность и притягательность. Ваш взгляд цепляется за привлекательный образ, и в один миг вы оказываетесь в его власти — до тех пор, пока вам нравится то, что вы видите. Яркий героический персонаж привлекателен. У злодейки, при всей ее злобности и драматичности, тоже должна быть привлекательность, иначе вам не захочется смотреть, что она делает. Уродливый и омерзительный герой может завладеть вашим вниманием, но не будет ни становления характера, ни идентификации с ситуацией, что Молодые люди, вдохновленные большими успехами в линейном рисунке, всегда оказываются в растерянности, когда слышат, что такие едва уловимые тонкости невозможны в наших условиях. Они вспоминают сцены большой красоты и рисунки с сильными эмоциями, и не видят каких-либо проблем во взаимодействии со зрителем. Но проблема есть —каждый день, в каждой такой сцене. Чтобы раскрыть оттенки характера персонажа, в нашем деле недостаточно тонкой мимической игры на нюансах —мы должны сконцентрироваться на действии или структуре истории. Деликатные выражения лица персонажа могут быть интерпретированы неправильно и привести всех в замешательство, а попытка еще повысить их утонченность так запутает в восприятии рисунка, что взаимодействие со зрителем станет невозможным. Только простые и прямые отношения делают рисунки хорошими, без них мало что может привлечь. Сама идея попытки передать чувства одними лишь линиями порой и вовсе кажется нелепой. Всегда есть искушение показать ближе, чтобы зрители могли наглядно увидеть как персонаж реагирует, но именно крупный план представляет наибольшую проблему. В1938 году, когда Дэйва Хэнда спросили есть ли смысл использовать сверхкрупный план, он ответил: «Если вы слишком приблизите, лицо персонажа станет плоским. В данный момент мы стараемся преодолеть это, используя новый способ заливки, но пройдет достаточно времени, прежде чем все улучшится». Можно создать множество превосходных эффектов, но очень часто они стоят дороже, чем может себе позволить средний проект. Идет постоянная борьба за поиск таких деталей, которые будут наиболее выигрышно смотреться в данных условиях и, кроме того, представят идею в лучшем виде. Рисунок должен быть сделан линейно, продублирован на целлулоид, залит однородными цветами, затем его снимают поверх фона и проецируют на большой экран. Крошечные, деликатные линии на рисунке теперь больше фута в ширину, и очень, очень черные. В середине тридцатых мы мечтали о тенях, текстурах и местах без контура, но все это было непрактично. Мы должны были найти другие способы сообщить замысел в сцене, и это развило анимацию персонажей в коммуникативное искусство, поразившее мир. Но в то время не было ни славы, ни гордости в наших усилиях, только раздражающие ограничения. Проходя мимо по коридору, мы качали головами, словно говорили друг другу: «Эти примитивные средства». 3.ПРАКТИЧЕСКАЯ ЧАСТЬ. Физические законы в анимации интерфейсов Анимация – это метод, в котором отдельные изображения объединяются, чтобы выглядеть так, как будто это единое плавное движение. Каждый фрагмент анимации, который мы видим, состоит из нескольких изображений (или одного изображения в нескольких состояниях), слитых вместе, чтобы обмануть человеческий глаз. Количество кадров в течение одной секунды анимации называется частотой кадров (frame rate) или кадры в секунду (FPS). Человеческому глазу требуется не менее 24 кадров в секунду, чтобы воспринимать анимацию, как плавное движение. Например, в Интернете частота кадров CSS-анимаций во многом зависит от скорости браузера и компьютера. Вы можете увидеть дергание анимации или зависание, если ваш компьютер работает медленно, и это (часто) показатель того, что частота кадров упала ниже 24 FPS. Тайминг (Timing) — это количество кадров, необходимое для перемещения объекта из A в B. Если мячику потребуется 5 секунд, чтобы упасть на землю, его анимированное время будет равно 120 кадрам (5 x 24 FPS). Тайминг играет ключевую роль в создании реалистичных анимаций. Каждому реальному объекту требуется определенное количество времени для выполнения действия. Хотя нет необходимости рассчитывать количество кадров, необходимое для анимации кнопки в приложении. Это может быть полезным инструментом для определения продолжительности анимации этой кнопки. Темп (Pacing) задает скорость, с которой происходит движение. Если ваша анимация будет слишком медленная, вы можете утомить пользователей или вызвать разочарование. Если же анимация будет слишком быстрая, пользователь может не уследить за ней, и не понять, где находится или что произошло. Правильно подобранный транзишн (переход между экранами) помогает пользователям следить за изменениями интерфейса, не усложняя задачи. Главное, чтобы он был коротенький и не действовал на нервы. Размер и вес - эти величины влияют на центр тяжести, а он в свою очередь влияет на то, как объект движется и вращается. Элементы интерфейса тоже обладают размером и весом, который используется для определения, например, иерархии. Как и в реальном мире, нам хочется воспринимать центр элемента как его центр тяжести. Это одновременно функционально, и реалистично. Плюс возможен вариант смещение центра тяжести при изменении его размера. Гравитация — это сила притяжения объектов друг к другу. Она приковывает нас к планете, а также влияет на приливы. Удивительная сила притяжения. На наши устройства действуют две гравитационные силы. Во-первых, сверху вниз по оси Y, а во-вторых, в глубину интерфейса по оси Z. Google одним из первых осознал, что наши устройства обладают глубиной, и основал большую часть философии Material Design на том, что они называют elevation (высота). Такой подход вполне органично вписывается в нашу картину мира: в реальности мы не раз видели, как ведет себя предмет, когда его смахнули на ось Y. Выпадающие списки, поля выбора, аккордеоны — все эти элементы ведут себя вполне естественно. Сопротивление С ним мы сталкиваемся ежедневно, когда движемся в пространстве и времени. Сопротивление может быть следствием гравитации, поверхностей или напряжений. Сопротивление используется в UX дизайне довольно часто. Отличным примером является 3D Touch от Apple (RIP), где интерфейс практически «сопротивляется» действию, пока вы не нажмете достаточно сильно. Это сопротивление заметно благодаря анимации, при этом иконка подсвечивается сильнее или слабее в зависимости от давления, которое вы оказываете. «Потяните, чтобы обновить» (pull-to-refresh) — так делают, когда пользователь должен потянуть интерфейс, чтобы получить свежий контент, тоже годится как пример с отличной реализацией принципа сопротивления. Пользователь должен потянуть вниз с некоторым сопротивлением, пока не достигнет определенного предела, когда перезагружает страницу. Действие и реакция (противодействие) Всякое тело продолжает удерживаться в своём состоянии покоя или равномерного и прямолинейного движения, пока и поскольку оно не понуждается приложенными силами изменить это состояние. Законы Ньютона удивительным образом связаны с анимацией, в частности. Когда вы нажимаете кнопку, вы ожидаете реакцию. В некотором смысле, гравитация принуждает вас двигать мышью, и кнопка реагирует, показывая эффект наведения курсора. Действию всегда есть равное и противоположное противодействие. Третий закон Ньютона особенно важен для создания анимации интерфейсах. Интерфейсы по своей природе реактивны. Особенно, когда дело доходит до изменения данных, размера, цвета, фона и многого другого. Роль анимации здесь заключается в создании визуальных подсказок, необходимых для информирования пользователя о том, где он находится и что делает. Когда пользователь нажимает, чтобы загрузить изображение, он ожидает увидеть какие-либо признаки (индикаторы) прогресса, неудачи или успеха. 4. Заключение Если подвести итог всем вышеупомянутым правилам и принципам, анимация в интерфейсе должна отражать движения, которые мы знаем из физического мира — трение, ускорение и т.д. Имитируя поведение объектов из реального мира, мы можем создать последовательность, которая позволит пользователям понять, чего ожидать от интерфейса. Если анимация построена правильно, то она ненавязчива и не отвлекает пользователей от их целей. Если это так, вам нужно либо смягчить, либо удалить ее вообще. Это означает, что анимация не должна замедлять работу пользователя или препятствовать выполнению задачи. Анимация — это скорее искусство, чем наука, поэтому лучше экспериментировать и тестировать свои решения на пользователях. Список литературы и информационных порталов и сайтов Alan Cooper, Robert Reiman, Dave Cronin «The Essentials of interaction Design» - Wiley Publishing, Inc., 2007 – 688 pp. – ISBN 978-0-470-08411-3 Купер А., Рейман Р., Кронин Д «Об интерфейсе. Основы проектирования взаимодействия», Изд-во Символ, 2009 г. – 688 с- ISBN 978-5-93286—132-5 Frank Thomas, Ollie Johnston «The Illusion of Life Disney Animation», 1981 – 576 pp. - ISBN 0-89659-233-2 |