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

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

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

Про­дол­жи­тель­ность и ско­рость ани­ма­ции

Ко­гда эле­мен­ты ме­ня­ют свое со­сто­я­ние или по­ло­же­ние, про­дол­жи­тель­ность ани­ма­ции долж­на быть до­ста­точ­но мед­лен­ной, чтобы дать поль­зо­ва­те­лям воз­мож­ность за­ме­тить из­ме­не­ние, но в то же вре­мя до­ста­точ­но быст­рой, чтобы не вы­зы­вать ожи­да­ния.

Про­дол­жи­тель­ность и ско­рость ани­ма­ции Ис­поль­зуй­те пра­виль­ную про­дол­жи­тель­ность в ва­шей ани­ма­ции. Не де­лай­те это слиш­ком быст­ро и не остав­ляй­те поль­зо­ва­те­лю до­ста­точ­но вре­ме­ни, чтобы зе­вать

Мно­го­чис­лен­ные ис­сле­до­ва­ния по­ка­за­ли, что оп­ти­маль­ная ско­рость ани­ма­ции ин­тер­фей­са со­став­ля­ет от 200 до 500 мс. Эти циф­ры ос­но­ва­ны на кон­крет­ных ка­че­ствах че­ло­ве­че­ско­го моз­га. Лю­бая ани­ма­ция ко­ро­че 100 мс яв­ля­ет­ся мгно­вен­ной и не рас­по­зна­ет­ся во­об­ще. При­ни­мая во вни­ма­ние, что ани­ма­ция про­дол­жи­тель­но­стью бо­лее 1 се­кун­ды пе­ре­даст ощу­ще­ние за­держ­ки и, та­ким об­ра­зом, бу­дет скуч­ной для поль­зо­ва­те­ля.

Про­дол­жи­тель­ность и ско­рость ани­ма­ции Дли­тель­ность ани­ма­ции, ко­то­рую вы долж­ны иметь в сво­их ин­тер­фей­сах

На мо­биль­ных устрой­ствах, гай­длай­ны Materia Design так­же пред­ла­га­ют огра­ни­чить про­дол­жи­тель­ность ани­ма­ции до 200–300 мс. Что ка­са­ет­ся план­ше­тов, то про­дол­жи­тель­ность долж­на быть боль­ше на 30% — око­ло 400–450 мс. При­чи­на про­ста: раз­мер экра­на боль­ше, по­это­му объ­ек­ты пре­одоле­ва­ют бо­лее длин­ный путь при из­ме­не­нии по­ло­же­ния. На но­си­мых устрой­ствах (смарт-ча­сы)про­дол­жи­тель­ность долж­на быть со­от­вет­ствен­но на 30% ко­ро­че — око­ло 150–200 мс, по­то­му что на мень­шем экране рас­сто­я­ние для пе­ре­ме­ще­ния ко­ро­че.

Про­дол­жи­тельс­ноть ани­ма­ции в за­ви­си­мо­сти от мо­биль­но­го устрой­ства

В веб-ани­ма­ции немно­го по-дру­го­му. Так как мы при­вык­ли к по­чти мгно­вен­но­му от­кры­тию веб-стра­ниц в бра­у­зе­ре, мы ожи­да­ем так­же быст­ро­го пе­ре­хо­да меж­ду раз­лич­ны­ми со­сто­я­ни­я­ми. Та­ким об­ра­зом, про­дол­жи­тель­ность веб-пе­ре­хо­дов долж­на длить­ся при­мер­но в 2 ра­за ко­ро­че, чем на мо­биль­ных устрой­ствах — от 150 до 200 мс. Ина­че поль­зо­ва­тель неиз­беж­но бу­дет ду­мать, что ком­пью­тер за­ви­са­ет или име­ет про­бле­мы с под­клю­че­ни­ем к Ин­тер­не­ту.

Но! За­будь­те об этих пра­ви­лах, ес­ли вы со­зда­е­те де­ко­ра­тив­ную ани­ма­цию на сво­ем сай­те или пы­та­е­тесь при­влечь вни­ма­ние поль­зо­ва­те­ля к опре­де­лен­ным эле­мен­там. В этих слу­ча­ях ани­ма­ция мо­жет быть длин­нее.

Боль­шой экран ком­пью­те­ра = Мед­лен­ная ани­ма­ция? Ни за что!

Необ­хо­ди­мо пом­нить, что неза­ви­си­мо от плат­фор­мы про­дол­жи­тель­ность ани­ма­ции долж­на за­ви­сеть не толь­ко от прой­ден­но­го рас­сто­я­ния, но и от раз­ме­ра объ­ек­та. Мень­шие эле­мен­ты или ани­ма­ция с неболь­ши­ми из­ме­не­ни­я­ми долж­ны дви­гать­ся быст­рее. Со­от­вет­ствен­но, ани­ма­ция с боль­ши­ми и слож­ны­ми эле­мен­та­ми вы­гля­дит луч­ше, ко­гда она длит­ся немно­го доль­ше.

Сре­ди дви­жу­щих­ся объ­ек­тов оди­на­ко­во­го раз­ме­ра пер­вым оста­нав­ли­ва­ют­ся объ­ек­ты, про­шед­шие крат­чай­шее рас­сто­я­ние.

Ма­лень­кие объ­ек­ты по срав­не­нию с боль­ши­ми объ­ек­та­ми дви­жут­ся мед­лен­нее, по­сколь­ку они име­ют боль­шие сме­ще­ния.

Про­дол­жи­тель­ность ани­ма­ции раз­ли­ча­ет­ся в за­ви­си­мо­сти от раз­ме­ра объ­ек­та и прой­ден­но­го рас­сто­я­ния

Ко­гда объ­ек­ты стал­ки­ва­ют­ся, энер­гия столк­но­ве­ния долж­на быть рав­но­мер­но рас­пре­де­ле­на меж­ду ни­ми со­глас­но за­ко­нам физи­ки. Та­ким об­ра­зом, луч­ше ис­клю­чить bounce эф­фект. Ис­поль­зуй­те его толь­ко в ис­клю­чи­тель­ных слу­ча­ях, ко­гда это име­ет смысл.

Из­бе­гай­те ис­поль­зо­ва­ния bounce (под­пры­ги­ва­ю­ще­го) эф­фек­та, так как он от­вле­ка­ет вни­ма­ние

Дви­же­ние объ­ек­тов долж­но быть чет­ким и рез­ким, по­это­му не ис­поль­зуй­те раз­мы­тие в дви­же­нии (да, поль­зо­ва­те­ли After Effects, не в этот раз). Труд­но вос­про­из­ве­сти эф­фект да­же на совре­мен­ных мо­биль­ных устрой­ствах, и он во­об­ще не ис­поль­зу­ет­ся в ин­тер­фейс­ной ани­ма­ции.

Не ис­поль­зуй­те эф­фект раз­мы­тия в ва­шей ани­ма­ции

Эле­мен­ты спис­ка (но­вост­ные кар­точ­ки, спис­ки адре­сов элек­трон­ной по­чты и т. Д.) Долж­ны иметь очень ко­рот­кую за­держ­ку меж­ду их по­яв­ле­ни­ем. Каж­дое по­яв­ле­ние но­во­го эле­мен­та долж­но длить­ся от 20 до 25 мс. Бо­лее мед­лен­ное по­яв­ле­ние эле­мен­тов мо­жет раз­дра­жать поль­зо­ва­те­ля.

Ани­ма­ция для эле­мен­тов спис­ка долж­на длить­ся 20–25 мс

Плав­ность

Плав­ность по­мо­га­ет сде­лать дви­же­ние объ­ек­та бо­лее есте­ствен­ным. Это один из ос­нов­ных прин­ци­пов ани­ма­ции, ко­то­рый по­дроб­но опи­сан в кни­ге «Ил­лю­зия жиз­ни: ани­ма­ция Дис­нея», на­пи­сан­ной дву­мя клю­че­вы­ми ани­ма­то­ра­ми Дис­нея — Ол­ли Джон­сто­ном и Фр­эн­ком То­ма­сом. (Непло­хие при­ме­ры ско­ро­сти ани­ма­ции мож­но по­смот­реть здесь)

Чтобы ани­ма­ция не вы­гля­де­ла ме­ха­ни­че­ской и ис­кус­ствен­ной, объ­ект дол­жен дви­гать­ся с неко­то­рым уско­ре­ни­ем или за­мед­ле­ни­ем — как все жи­вые объ­ек­ты в физи­че­ском ми­ре.

Ани­ма­ция с за­мед­ле­ни­ем вы­гля­дит бо­лее есте­ствен­ной по срав­не­нию с ли­ней­ной

Ли­ней­ное дви­же­ние

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

Все при­ло­же­ния для ани­ма­ции ис­поль­зу­ют ани­ма­ци­он­ные кри­вые. Я по­ста­ра­юсь объ­яс­нить, как их чи­тать и что они зна­чат. Кри­вая по­ка­зы­ва­ет, как по­зи­ция объ­ек­та (ось Y) из­ме­ня­ет­ся в те­че­ние тех же вре­мен­ных ин­тер­ва­лов (ось X). В те­ку­щем слу­чае дви­же­ние яв­ля­ет­ся ли­ней­ным, по­это­му объ­ект про­хо­дит од­но и то же рас­сто­я­ние в од­но и то же вре­мя.

Кри­вая ли­ней­но­го дви­же­ния

Ли­ней­ное дви­же­ние мож­но ис­поль­зо­вать, на­при­мер, толь­ко ко­гда объ­ект ме­ня­ет свой цвет или про­зрач­ность. Во­об­ще го­во­ря, мы мо­жем ис­поль­зо­вать его для со­сто­я­ний, ко­гда объ­ект не ме­ня­ет свою по­зи­цию.

Кри­вая за­мед­ле­ния или уско­ре­ния

На кри­вой вид­но, что в на­ча­ле по­ло­же­ние объ­ек­та мед­лен­но ме­ня­ет­ся, а ско­рость по­сте­пен­но уве­ли­чи­ва­ет­ся. Это озна­ча­ет, что объ­ект дви­жет­ся с опре­де­лен­ным уско­ре­ни­ем.

Кри­вая уско­ре­ния

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

Кри­вая уско­ре­ния вы­бро­са кар­ты за пре­де­лы экра­на

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

И, ко­неч­но же, из­ме­няя кри­вые, вы мо­же­те пе­ре­ме­щать объ­ект как мож­но бли­же к ре­аль­но­му ми­ру.

Кри­вая за­мед­ле­ния

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

Кри­вая за­мед­ле­ния

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

Кри­вая за­мед­ле­ния для при­ят­но­го по­яв­ле­ния

Кри­вая уско­ре­ния-за­мед­ле­ния (стан­дарт­ная)

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

Стан­дарт­ная кри­вая

Со­глас­но Ру­ко­вод­ству Material Design, луч­ше ис­поль­зо­вать асим­мет­рич­ную кри­вую, чтобы дви­же­ние вы­гля­де­ло бо­лее есте­ствен­ным и ре­а­ли­стич­ным. Ко­нец кри­вой дол­жен быть бо­лее под­черк­ну­тым, чем ее на­ча­ло, чтобы про­дол­жи­тель­ность уско­ре­ния бы­ла мень­ше, чем про­дол­жи­тель­ность за­мед­ле­ния. В этом слу­чае поль­зо­ва­тель бу­дет уде­лять боль­ше вни­ма­ния окон­ча­тель­но­му пе­ре­ме­ще­нию эле­мен­та и, сле­до­ва­тель­но, его но­во­му со­сто­я­нию.

Смот­ри­те раз­ни­цу меж­ду сим­мет­рич­ной и асим­мет­рич­ной стан­дарт­ной кри­вой

Кри­вая уско­ре­ния-за­мед­ле­ния ис­поль­зу­ет­ся, ко­гда объ­ек­ты пе­ре­ме­ща­ют­ся из од­ной ча­сти экра­на в дру­гую. В та­ком слу­чае ани­ма­ция из­бе­га­ет эф­фект­но­го и дра­ма­ти­че­ско­го эф­фек­та.

Дви­же­ние кар­ты на экране и со­от­вет­ству­ю­щая асим­мет­рич­ная кри­вая

Тот же тип дви­же­ния дол­жен ис­поль­зо­вать­ся, ко­гда эле­мент ис­че­за­ет с экра­на, но поль­зо­ва­тель мо­жет в лю­бое вре­мя вер­нуть его на преж­нее ме­сто. Это ка­са­ет­ся на­при­мер на­ви­га­ци­он­но­го ме­ню.

Па­нель на­ви­га­ции скры­ва­ет­ся от экра­на со стан­дарт­ной кри­вой

Из этих при­ме­ров сле­ду­ет фун­да­мен­таль­ное пра­ви­ло, ко­то­рым пре­не­бре­га­ют мно­гие на­чи­на­ю­щие — на­чаль­ная ани­ма­ция не рав­на ко­неч­ной ани­ма­ции. Как и в слу­чае с на­ви­га­ци­он­ным drawer ме­ню — он отоб­ра­жа­ет­ся с кри­вой за­мед­ле­ния и ис­че­за­ет со стан­дарт­ной кри­вой. Кро­ме то­го, со­глас­но Google Material Design, вре­мя по­яв­ле­ния объ­ек­та долж­но быть боль­ше, чтобы при­влечь боль­ше вни­ма­ния.

По­яв­ле­ние и ис­чез­но­ве­ние бо­ко­во­го ме­ню вы­пол­ня­ет­ся с за­мед­ле­ни­ем и стан­дарт­ной кри­вой со­от­вет­ствен­но

Функ­ция cubic-bezier() ис­поль­зу­ет­ся для опи­са­ния кри­вых. Она на­зы­ва­ет­ся ку­би­че­ской, по­то­му что ос­но­ва­на на че­ты­рех точ­ках. Пер­вая точ­ка с ко­ор­ди­на­та­ми 0; 0 (вни­зу сле­ва), а по­след­няя с ко­ор­ди­на­та­ми 1; 1 (ввер­ху спра­ва) уже опре­де­ле­ны на гра­фи­ке.

Ис­хо­дя из это­го нам нуж­но опи­сать толь­ко две точ­ки на гра­фе, ко­то­рые за­да­ют­ся че­тырь­мя ар­гу­мен­та­ми функ­ции cubic-bezier(): пер­вые две — ко­ор­ди­на­ты x и y пер­вой точ­ки, вто­рые две — ко­ор­ди­на­ты x и у вто­рой точ­ки.

Для упро­ще­ния ра­бо­ты с кри­вы­ми я пред­ла­гаю ис­поль­зо­вать сай­ты easings.net и cubic-bezier.com. Пер­вая со­дер­жит спи­сок наи­бо­лее ча­сто ис­поль­зу­е­мых кри­вых, па­ра­мет­ры ко­то­рых вы мо­же­те ско­пи­ро­вать в ин­стру­мент со­зда­ния про­то­ти­пов. Вто­рой ис­точ­ник да­ет вам воз­мож­ность по­иг­рать с раз­лич­ны­ми па­ра­мет­ра­ми кри­вой и сра­зу уви­деть, как бу­дут дви­гать­ся объ­ек­ты.

Раз­лич­ные ти­пы кри­вых и их па­ра­мет­ры для функ­ции cubic-bezier()

Хо­рео­гра­фия в ани­ма­ции ин­тер­фей­сов

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

Су­ще­ству­ет два ти­па хо­рео­гра­фии — рав­но­прав­ное и под­чи­нен­ное вза­и­мо­дей­ствие.

Рав­ное вза­и­мо­дей­ствие

Рав­ное вза­и­мо­дей­ствие озна­ча­ет, что внеш­ний вид всех объ­ек­тов под­чи­ня­ет­ся од­но­му кон­крет­но­му пра­ви­лу.

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

Вни­ма­ние поль­зо­ва­те­ля долж­но быть на­прав­ле­но в од­ном на­прав­ле­нии из­ме­не­ний

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

Диа­го­наль­ный вид для таб­лич­но­го ви­да карт

Под­чи­нен­ное вза­и­мо­дей­ствие

Под­чи­нен­ное вза­и­мо­дей­ствие озна­ча­ет, что у нас есть один цен­траль­ный объ­ект, ко­то­рый при­вле­ка­ет все вни­ма­ние поль­зо­ва­те­ля, а все осталь­ные эле­мен­ты под­чи­ня­ют­ся ему. Этот тип ани­ма­ции да­ет ощу­ще­ние по­ряд­ка и при­вле­ка­ет боль­ше вни­ма­ния к ос­нов­но­му со­дер­жа­нию.

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

Сто­ит ани­ми­ро­вать толь­ко один цен­траль­ный объ­ект, а все осталь­ные под­чи­ня­ют­ся ему. В про­тив­ном слу­чае поль­зо­ва­тель не бу­дет знать, за ка­ким объ­ек­том сле­до­вать.

Со­глас­но Material Design, ко­гда дви­жу­щи­е­ся объ­ек­ты из­ме­ня­ют свой раз­мер непро­пор­цио­наль­но, они долж­ны дви­гать­ся по ду­ге, а не по пря­мой ли­нии. Это по­мо­га­ет сде­лать дви­же­ние бо­лее есте­ствен­ным. Под «непро­пор­цио­наль­но» я под­ра­зу­ме­ваю, что из­ме­не­ние вы­со­ты и ши­ри­ны объ­ек­та пу­тем уве­ли­че­ния / умень­ше­ния вы­пол­ня­ет­ся асим­мет­рич­но, то есть с раз­ной ско­ро­стью (на­при­мер, квад­рат­ная кар­та пре­вра­ща­ет­ся в пря­мо­уголь­ник).

Дви­же­ние объ­ек­та, ко­то­рый непро­пор­цио­наль­но ме­ня­ет свой раз­мер, долж­но быть ор­га­ни­зо­ва­но вдоль ду­ги

Дви­же­ние по ли­нии ис­поль­зу­ет­ся, ко­гда объ­ект про­пор­цио­наль­но ме­ня­ет свой раз­мер. По­сколь­ку осу­ществ­ле­ние та­ко­го дви­же­ния на­мно­го про­ще, пра­ви­лом дис­про­пор­цио­наль­но­го дви­же­ния ду­ги ча­сто пре­не­бре­га­ют. Гля­дя на ре­аль­ные при­ме­ры при­ло­же­ний, вы уви­ди­те до­ми­ни­ро­ва­ние ли­ней­но­го дви­же­ния.

Про­пор­цио­наль­ное из­ме­не­ние раз­ме­ра вы­пол­ня­ет­ся по пря­мой

Дви­же­ние по кри­вой мо­жет быть до­стиг­ну­то дву­мя спо­со­ба­ми: пер­вый на­зы­ва­ет­ся вер­ти­каль­ным вы­хо­дом — объ­ект на­чи­на­ет дви­гать­ся го­ри­зон­таль­но и за­кан­чи­ва­ет­ся вер­ти­каль­ным дви­же­ни­ем; вто­рой — го­ри­зон­таль­ным вы­хо­дом — объ­ект на­чи­на­ет дви­гать­ся вер­ти­каль­но и за­кан­чи­ва­ет­ся го­ри­зон­таль­ным дви­же­ни­ем.

Тра­ек­то­рия дви­же­ния объ­ек­та по кри­вой долж­на сов­па­дать с глав­ной осью ин­тер­фей­са про­крут­ки. На­при­мер, на сле­ду­ю­щем изоб­ра­же­нии мы мо­жем про­кру­тить ин­тер­фейс вверх и вниз, и, со­от­вет­ствен­но, кар­та раз­во­ра­чи­ва­ет­ся вер­ти­каль­но, сна­ча­ла впра­во, а за­тем вниз. Об­рат­ное дви­же­ние вы­пол­ня­ет­ся про­ти­во­по­лож­ным об­ра­зом — кар­та сна­ча­ла под­ни­ма­ет­ся вер­ти­каль­но, а за­кан­чи­ва­ет­ся го­ри­зон­таль­но.

На­прав­ле­ние рас­кла­ды­ва­ния / скла­ды­ва­ния кар­ты долж­но сов­па­дать с осью ин­тер­фей­са

Ес­ли пу­ти дви­жу­щих­ся объ­ек­тов пе­ре­се­ка­ют­ся друг с дру­гом, они не мо­гут дви­гать­ся друг через дру­га. Объ­ек­ты долж­ны остав­лять до­ста­точ­но ме­ста для дви­же­ния дру­го­го объ­ек­та, за­мед­ляя или уско­ряя соб­ствен­ную ско­рость. Дру­гой ва­ри­ант — они про­сто от­тал­ки­ва­ют дру­гие объ­ек­ты. По­че­му так? По­сколь­ку мы пред­по­ла­га­ем, что все объ­ек­ты в ин­тер­фей­се ле­жат в од­ной плос­ко­сти.

Во вре­мя дви­же­ния объ­ек­ты не долж­ны про­хо­дить друг через дру­га, но долж­ны остав­лять ме­сто для дви­же­ния дру­го­го объ­ек­та

В дру­гом слу­чае дви­жу­щий­ся объ­ект мо­жет под­ни­мать­ся над дру­ги­ми объ­ек­та­ми. Но опять-та­ки нет рас­тво­ре­ния или дви­же­ния через дру­гие объ­ек­ты. По­че­му? По­сколь­ку мы счи­та­ем, что эле­мен­ты ин­тер­фей­са ве­дут се­бя в со­от­вет­ствии с за­ко­на­ми физи­ки, и ни­ка­кие твер­дые объ­ек­ты в ре­аль­ном ми­ре не спо­соб­ны на это.

Объ­ек­ты мо­гут под­ни­мать­ся над дру­ги­ми объ­ек­та­ми, а за­тем дви­гать­ся

Вы­во­ды

Итак, ес­ли мы сум­ми­ру­ем все вы­ше­упо­мя­ну­тые пра­ви­ла и прин­ци­пы, ани­ма­ция в ин­тер­фей­се долж­на от­ра­жать дви­же­ния, ко­то­рые мы зна­ем из физи­че­ско­го ми­ра — тре­ние, уско­ре­ние и т. Д. Ими­ти­руя по­ве­де­ние объ­ек­тов из ре­аль­но­го ми­ра, мы мо­жем со­здать по­сле­до­ва­тель­ность, ко­то­рая поз­во­лит поль­зо­ва­те­лям по­нять, че­го ожи­дать от ин­тер­фей­са.

Ес­ли ани­ма­ция по­стро­е­на пра­виль­но, то она нена­вяз­чи­ва и не от­вле­ка­ет поль­зо­ва­те­лей от их це­лей.

Но не за­бы­вай­те, что ани­ма­ция — это боль­ше ис­кус­ство, чем на­у­ка, по­это­му луч­ше экс­пе­ри­мен­ти­ро­вать и про­ве­рять свои ре­ше­ния на поль­зо­ва­те­лях.

Ис­точ­ник