Не съществува специална "чипове" в създаването на анимация в голям мащаб. Не, не е: трябва да прекарват много време на нейното оптимизиране и тестване. Така че след няколко години на експериментиране, постоянно натискане своите ограничения при изпълнението на браузъри, взехме серия от принципи и кодиране на дизайна, което ще позволи на всеки, който желае да се украсяват вашия проект ефективно и продуктивно анимация. Тяхното използване ще ви позволи да се получи гладка страници операция в настолни и мобилни браузъри. И най-важното - всичко е направено и е служил много просто.

Технология и изпълнение ще бъде малко по-различен за всеки отделен случай, но ние сме уверени, че нашите общи принципи ще бъдат полезни в почти всяка ситуация.

Какво е анимация?

Анимация съществували преди появата на Интернет. За да създадете най-доброто от тях могат да прекарат живота си на обучение. Въпреки това, в този случай, има закони, също. Ще обсъдим някои типични и не много проблеми, които са изправени пред дизайнерите при създаването на анимация за настаняване в VEB.

За плавна анимация от 60 кадъра в секунда, всеки кадър трябва да се обработват по-малко от 16 милисекунди! Това е една малка период от време, така че трябва да се намери много ефективен начин да се направи всеки кадър за анимация висока производителност.

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

Twitter наскоро използвани този прост подход за новия си анимация сърце, да превъртате в определена последователност от кадри 26.

Получената по този начин анимацията е твърде сложна за изпълнение и, всъщност, не е достатъчно гладка.

В много случаи е препоръчително да се използват CSS «преход» имот за автоматична анимация елемент, когато тя се променя. Тази техника е известна като «tweening» и включва създаването на анимация с автоматично изграждане на междинните изображения. Да кажем, че имаме две снимки на един и същ обект в различни позиции. CSS преходни ефекти ще ви помогнат да създадете анимация променя своето състояние. Използването им дава предимство в това, че е възможно по всяко време за губене, или изтеглете цялата логика на анимация. Той е идеален от категорията "настроен и забрави". Тя работи добре, например, с различни интро последователности или прости взаимодействия като активиране анимация, когато мишката.

Също така, анимация, построена през CSS за ключови кадри, може да служи като идеален фон за избраните области на страницата. Например, за колелцата на лого "жироскоп" постоянно въртящи се. Този подход е добър за използване Tween различни механизми.

Така че, с откриването заобля и се пристъпи към основната част на гредата. Нека да дадем няколко съвета, които ще помогнат значително увеличаване на производителността и качеството на анимацията. Надяваме се, че ще ти помогне.

# 1Не не променя нито една собственост с изключение на непрозрачност (непрозрачност) и конверсия (трансформиране)

Дори и ако мислите, че би било по-добре, не си струва да се налага!

След този основен принцип ще се повиши ефективността на 80%, дори и в мобилния сегмент. Разбира се, вие сте чували това и преди. Идеята не е оригинална, но това рядко се спазват. Това е уеб еквивалент на "яде здравословни храни и да се упражнява." Всеки е чувал, знам, че това е правилно, но малцина се съобразят.

Всъщност, доста лесно да свикне с използването на този принцип. От особена полза ще донесе на тези, които по-рано направи анимацията с CSS традиционните свойства.

Например, ако трябва да се направи един обект по-малък, можете да използвате трансформира имуществото на скалата, а не промяна на ширина / височина. Ако трябва да преместите елемент, не трябва да се забъркваш с около промяната на стойностите на отстъп, защото тази анимация ще изисква преструктуриране на оформлението на страницата за всеки кадър. По-добре е да се използват прости свойства на трансформацията за това: да се преобрази: translateX или трансформиране: translateY.

Защо става това?

За човек, който променя ширина, разстояние, както и други подобни параметри, за да се използват свойствата на трансформация не може да изглежда забележително идея. Визуално, резултатът е подобен, тъй като. Но цената на изчислителната мощност на компютъра, който ще всичко това съкращение, използването на трансформация изглежда много пъти по-добре.

Можете да отидете луд, чакащи за изтегляне на страницата всички ъгли са закръглени, изображението се използва за всички пуснати на сянка и изпълнен с щастие добавя размазване при движение елементи. Ако това се случи един път, а след това още няколко милисекунди, за да изчакат ролята няма да играе. Но веднага след като цялото съдържание ще се появи на екрана, вече няма да искате да чакате преизчисляване на всяка стойност за промяна на страницата.

# 2 Скриване на съдържанието се вижда.

Използвайте «показалеца-събития» в CSS: стойност «без» заедно с нула непрозрачност за скриване на елементи

Този метод не работи в по-стари браузъри, но ако сте проектиране за WebKit браузър или други съвременни двигатели, той ще направи живота ви много по-лесно.

В древни времена, когато анимацията са обработени с помощта на JQuery живата (), основната трудност, когато се занимават с ефекта от избледняване е необходимостта от промяна на стойностите на имоти показва: няма да се активира ефекта прекратяване, в точното време. Твърде рано е, а анимацията е пълна, твърде късно, и ще получите един невидим елемент с нулева стойност на коефициента на непрозрачност, припокриващи страница. Обратен отговор, необходимо за почистване на екрана след завършване на анимацията.

CSS «показалеца-събития» Имоти (има много време, но по някакъв начин да я използват рядко) е да направим нещата по-нечувствителни към кликвания на мишката и други взаимодействия. Така че, ако изобщо има на страницата. Този имот може лесно да се включва / изключва от CSS. На работа, той не прекъсва анимацията и не засяга елементи рендиране / видимост.

Комбинирането на това нещо със стойността на непрозрачност на нула, ние да получите същия ефект, който дава «дисплей: няма», но без да повлияе на производителността при стартиране на нови анимационни оказване на цикъла. Ако искате да скриете елемент от погледа, аз обикновено проявяват нулева непрозрачност и изключване на показалеца-събития. След това, не мога да забравя за това, знаейки, че всичко, което е лесно да се върнете назад и нищо няма да попречи на изпълнението на страницата.

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

Също така, той ви дава много по-голяма свобода на действие, тъй като изборът на старт / стоп време анимацията в този случай не може да е много точна. Дори и да сте малко объркани времена, нищо страшно няма да се случи. Потребителят просто не може да направи нищо, за да прокара анимацията е завършена. Всичко ще отиде така, както е планирано.

# 3 Не искам да анимирате всичко в ред в същото време.

Или използвайте принципа на хореография.

Една анимация може да бъде плавно от само себе си, но ако в същото време е работил чрез множество ефекти, тя може да развали цялата картина и да намали производителността. Създаване на гладкото протичане демо е много проста, но осигуряване на приемливо ниво на производителност, като част от един сайт е много по-трудно. Ето защо е много важно да се планира появата на анимация правилно.

Вие искате да се изгради времена, така че всички анимации работят по различно време. Обикновено 2-3 анимация може да работи едновременно без забавяне, особено ако те започват с малък спред във времето. Повече от три едновременно (за окото, но по същество - минималната стъпка с течение на времето трябва да бъде) започва почти сигурно ще доведе до забавяне на екрана.

Ако страницата е повече от една анимация, вас е важно да се разбере концепцията за хореография. Тя ще изглежда, със срок на танц тук? Но неговото разбиране за същността в този контекст е много важно за един успешен анимация интерфейси: нещата трябва да се стигне до екрана в правилната посока и в правилните моменти. Въпреки факта, че всички те работят поотделно, за зрителя, те трябва да се появи като част от една добре проектирана механизъм.

Материал дизайн от Google има някои интересни развития по този въпрос. Това, разбира се, не е единственият правилен начин, но тя дава храна за размисъл и тестване.

# 4 Лекото увеличение на забавянето на прехода го прави лесно да се следват принципа на хореография

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

Люлеенето в същото време редица елементи, можете да просто се съберат тяхната хореография. Той е мощен подход, тъй като всички по едно и също време и изглежда добре и работи бързо, но не забравяйте, че само 2-3 на анимацията може да се управлява по едно и също време, и всичко ще бъде наред. Необходимо е да ги разпределя на страницата, така че всеки работи плавно и навреме. Задайте вашите анимации да се възприема зрителя като непрекъснат поток, а не верига от коренно различни елементи. Uniform гладка сцена.

Има няколко прости техники, които ще разтърсят елементи. Те са много удобни, особено ако сте с помощта на дълга верига от анимации. Ако веригата съдържа малко от 10 елемента, аз обикновено показва стойността на забавяне на CSS. Това е най-лесният начин да се приложи.

За по-дълги последователности или динамично променящата елементи времена може да се настрои динамично за всички елементи, като промените стойностите на променливите.

Като правило, използвани две променливи: своя база забавяне и час закъснение между всеки елемент. Този баланс е трудно да се намери, но ако ще бъдете пренасочени към правилния набор от числа, а след това всичко ще бъде наред.

# 5 Използване на общ фактор за развитието на vslow движение

И всичко това се ускори по-късно.

Дизайнът на нашата анимация времето е всичко. 20% от работата се състои в създаването на самите, а останалите 80% - анимации при намирането на правилните настройки и времената за производство на ясна и изглаждане синхронизирани сцени.

Това е особено вярно, когато се работи по хореография голямата елементи масив и се опитва да изтръгне максимална производителност. След забавянето анимации с тези сцени ще бъде много по-лесно да се работи.

Трябва да направите удобството на код дизайн, така че няма проблеми да тестват различните скорости и времена. Например, ако анимацията заеква дори при 1/10 скорост, вие сте най-вероятно прави нещо фундаментално погрешно. Ако тя върви гладко, когато се разтегне до 50 пъти, проблемът се свежда до намиране на максималната скорост, с която може да работи гладко. Доста трудно да се види проблеми на пълна скорост, но ако го намали, а след това те ще станат много очевидно.

За да конфигурирате много сложни анимации или още при търсенето на затрудненията в процеса на мониторинг на изпълнението на забавен каданс ще бъде много полезен.

Идеята е да се опаковат много красиви детайли в сцена на забавен демонстрация, а след това се ускори всичко, така че анимациите изглежда перфектно. Това е много деликатна работа, но потребителите ще оценят детайли и плавността на това, което се случва на екрана.

Тази опция е част от текущия OS X: Когато се минимизира прозореца с програмата, можете да видите анимацията на забавен каданс.

# 7 Network дейност може да доведе до изоставане.

Трябва да се заредят предварително или блокови заявки bolshieHTTP

Не е необходимо да използвате мега-оптимизация, без ясна необходимост, въпреки тежката страница може да изисква инсталирането на много точна забавяне и анимация времена за безпроблемна работа. Като цяло, трябва да се започне да се изтегля като малко количество данни, доколкото е възможно, след това свържете анимацията, и след това да продължи да се изтегля останалата част от тежките на съдържанието на страницата.

На страници с много работа, за да се оптимизира данните може да отнеме известно време. Анимация работи добре с статично съдържание, може да започне много бавно и се разпада при зареждане с реални данни. Ако нещо изглежда като тя работи гладко, но в един момент започва да изостава неясна причина, проверка на дейността на мрежата. Може би, в тези моменти, вашият канал е зает с други файлове за изтегляне. Уверете се, че вашата мрежа не изпълнява множество едновременни големи файлове за изтегляне.

# 8 Не се наложи да промените стандартната свитъка.

Идеята за смяна на книгата може да изглежда готино, но това не е наистина.

Превъртане на анимацията е популярен в продължение на няколко години, особено ако тя е направена с използването на паралакс и други специални ефекти. Неговата полезност може да се спори за дълго време, но техническите методи за реализиране на тези идеи имат успешен и не.

По-лошото трик изглежда заместител на стандартната свитъка на т.нар scrolljacking (съдържание се променя във времето с превъртане, пример - Apple уебсайт). Не го прави. Успешно реализиране на този ефект е трудно, и не всички потребители ще го харесват.

Ако имате някакъв опит и желание за създаване на лентата за превъртане, направи лек прототип и тест на работа преди да прекарват времето за завършване на развитието.

# 9 Най-често изпробване на плановете на мобилни устройства.

Повечето уеб сайтове са създадени на компютъра. Най-често те са тествани на същата машина, на която те са се развили. По този начин, мобилната версия на сайта и изпълнението анимация отдалечавам на заден план. Някои технологии се създават анимации (например, платно) няма да работи правилно на мобилни платформи.

Въпреки това, ако се прави анимация и оптимизиран правилно, в резултат от използването й мобилно изживяване може да надмине десктоп качество. Mobile оптимизация използва, за да бъде една много сложна тема, но новият iPhone работи по-бързо, отколкото повечето лаптопи. Ако ще следвате указанията дадени по-горе, може да се постигне впечатляващо представяне на вашите анимации и мобилни устройства.

Продължаване на подобрения в дизайна, както и подобряване на производителността, а разликата в комфорта на използване на мобилни и настолни версии на сайта няма да изчезне напълно.

Ако себе си сила, за да използвате мобилния сайт за една седмица, то е вероятно, че в крайна сметка това се оптимизира дори по-добре от по-голямата версия. Борейки се с дразнене като тя се използва редовно, вие ще се чувствате напълно проблемите, които се очакват от потребителите си, и можете да ги премахнете, преди да напусне проекта на масите. Това ще спести много неприятности в бъдеще.

# 10 тестови проекти на различни устройства

Има много фактори, които могат значително да повлияят на производителността на сайта на персонални компютри и мобилни устройства: разделителната способност на екрана, броят на пикселите в прозорец, желязо, стара епоха, и т.н. ...

Въпреки факта, че Chrome и Safari са базирани на Webkit и имат почти същия синтаксис, като всеки от тях има свои особености. Всяка актуализация Chrome в същото време премахва старите грешки и носи ново, така че трябва постоянно да държи под око, както се казва.

Разбира се, не всеки иска да следват пътя на най-малкото съпротивление, което прави обектите по долното общ знаменател в размер на грешки, така че да не получите в беда, след като следващата актуализация на най-популярните браузъри. Търсене грамотни начини за добавяне на подобрения и отстраняване на някои от тях, за да поддържа нормалното функциониране на сайта могат да бъдат много полезни.

Аз редовно преминаване на работа между моя MacBook Air малък и голям IMAC. Всеки цикъл разкрива един малък проблем и посочва необходимите подобрения. Това се отнася не само производителността на анимацията, но дизайна на сайта като цяло, плътността на информация, яснотата, структурата и така нататък. Г.

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

Надявам се, че сте намерили Дадената технология полезни и да ги използва в следващия си проект. На добър час!