Задаволены
Анімацыя ў Інтэрнэце асабліва тонкая, бо нам даводзіцца карэктаваць працу з улікам прапускной здольнасці, сумяшчальнасці кода і дызайну прадукту. У гэтым артыкуле я растлумачу рэкамендацыю па наладзе па-сапраўднаму рэагуючай маштабуецца анімацыі. Я таксама разгледжу розныя спосабы працы з анімацыяй для дасягнення станоўчага карыстацкага досведу і парытэту ва ўсім свеце некалькіх прылад.
Я раскажу пра некалькі асноўных выпадкаў выкарыстання: даданне CSS-анімацыі да SVG-спрайтаў, праца з аўтаномнай графікай, якая патрабуе складаных рухаў, стварэнне адаптыўнага вопыту, які прыстасоўваецца да праглядальнай вобласці, і зрабіць анімацыю прасцей для мабільных прылад.
Я настойліва рэкамендую выкарыстоўваць SVG (Scalable Vector Graphics) для графікі з адаптыўнай анімацыяй. Яны не залежаць ад дазволу, таму вам не прыйдзецца загружаць дадатковыя HTTP-запыты альбо замарочваць сябе запытамі носьбітаў малюнкаў.
У якасці альтэрнатывы атрыбуту img элемент выявы выдатна спраўляецца з заменай малюнкаў, але пры працы з рухомымі выявамі рознага памеру становіцца больш грувасткім, каб падтрымліваць анімацыю паслядоўнай. SVG нашмат пераўзыходзіць гэта: мы можам пісаць код адзін раз і працягваць карэктаваць візуальную складанасць нашага малюнка.
SVG таксама забяспечвае навігацыйны DOM, таму становіцца проста ўвайсці ў складаную графіку і аніміраваць элементы паасобку. Як вынікае з назвы, SVG пабудаваны ў маштабе. Надзвычай проста і інтуітыўна наладзіць памер SVG.
Нават з гэтымі ключавымі асаблівасцямі адзінкі і нават тое, як мы ўспрымаем выявы, будуць змяняцца ад памеру экрана да памеру экрана. Не хвалюйцеся; Я вас пакрыў! Давайце разгледзім некалькі спосабаў працы з адаптыўнай анімацыяй.
Спрайты SVG і анімацыя CSS
Гэтая першая тэхніка асабліва добра працуе для рэагуючай аўтаномнай анімацыі - напрыклад, пры ілюстрацыі тэксту. Мы пачынаем з тыповага рэагуючага спрайта і адаптуем не толькі памер выявы, але і складанасць графікі. Гэта мае вялікі сэнс, калі задумацца пра тое, што мы можам візуальна інтэрпрэтаваць на меншым экране. Для таго каб графіка нашай анімацыі заставалася зразумелай, мы таксама павінны разгледзець экранную нерухомасць.
Зірніце на ілюстрацыю вышэй. Злева вы бачыце, што мы распрацавалі для настольных, планшэтных і мабільных рэалізацый. Справа мы зрабілі дзве рэчы, каб падрыхтавацца да экспарту.
Першае - прыбраць паўтор. Мы можам бачыць, што від на працоўны стол і планшэт настолькі падобныя, што мы можам альбо змяніць уласцівасці, альбо замяніць іх мультымедыйнымі запытамі CSS. Прыкладам такога змены можа быць рэгуляванне фону, каб ён быў зялёным, а не сінім. Для гор змяненне дызайну паміж рознымі памерамі прылад з'яўляецца дастаткова значным, каб нам трэба было прымяніць клас да элемента, каб схаваць ці раскрыць яго.
Самая важная частка гэтай тэхнікі заключаецца ў тым, як мы апрацоўваем атрыбут viewBox. Вы можаце думаць пра viewBox як пра маленькае акенца, у якім мы праглядаем SVG. Сам SVG можа выходзіць за межы viewBox, але будзе бачная толькі вобласць у ім. Астатняе будзе выразана.
Для настольных і планшэтных версій мы хочам, каб паказвалася толькі першая плітка, таму першапачаткова мы ўсталявалі viewBox убудаваным у SVG, каб ахопліваў толькі верхні раздзел спрайта: viewBox = "0 0 490 474". Затым мы пераносім бачную вобласць з дапамогай JavaScript на ’0 490 500 500’.
Складаны рух
Кожны раз, калі ў вас ёсць аўтаномная графіка з больш складаным рухам, я прапаную перайсці на анімацыйную платформу GreenSock (GSAP), а не выкарыстоўваць CSS. Хоць GSAP прапануе мноства цікавых рэчаў, галоўныя перавагі ў гэтым выпадку дваякія.
Першая - гэта стабільнасць у некалькіх браўзэрах.
Дзякуючы ўсім нашым аглядальнікам і сістэмам, распрацоўка інтэрфейсу азначае вялікую матрыцу тэсціравання. Калі мы ўключаем мабільны, ён становіцца ў геаметрычнай прагрэсіі больш складаным. Старыя браўзэры Safari на старых прыладах Apple могуць мець плямістую падтрымку перамяшчэння SVG-файлаў, а таксама шмат праблем на Android. GSAP прапануе сапраўды стабільнае перамяшчэнне, не шкодзячы хуткасці.
Другая перавага - гэта тэрміны. Гэта дазваляе класці падлеткаў і нават узроўневыя эфекты з аптымізаваным і інтуітыўна зразумелым кодам. Для астатніх прыкладаў у гэтым артыкуле я злучу GSAP і SVG.
Давайце спачатку ўсталюем, што анімацыя элементаў з дапамогай пераўтварэнняў і непразрыстасці з'яўляецца найбольш эфектыўным падыходам. Аптымізаваць браўзэр прасцей, таму што ён памяншае перамалёўкі, што самае важнае, каб сачыць за анімацыяй без заміна і заікання.
Акрамя таго, калі мы выкарыстоўваем атрыбуты ў SVG DOM, яны будуць маштабавацца ў тандэме з усёй SVG, таму што яны ўшаноўваюць прастору ў viewBox. Такім чынам, калі вы маштабуеце складаны SVG, выкарыстоўваючы працэнт, flexbox альбо іншыя метады, ваша анімацыя таксама будзе маштабавацца адпаведна. Гэта азначае, што вам не трэба нічога наладжваць; вы можаце засяродзіцца на правільным напісанні кода ўсяго адзін раз. І гэта даволі вялікая карысць.
Напрыклад, давайце разгледзім сапраўды складаную анімацыю, падобную паказанай на малюнку вышэй. Звычайна я спачатку распрацоўваю ўсе патрэбныя элементы і з цягам часу павольна раскрываю іх. Гэта дазваляе мне планаваць усё загадзя, што прыводзіць да больш чыстага і разборлівага кода.
Гатовая анімацыя цалкам маштабуецца - вы можаце хаатычна наладзіць кнопку, пакуль яна працуе, і прымусіць усё наладзіць новы працэнт (гл. Малюнак ніжэй).
Спагадны UX
Распрацоўка адаптыўнага вопыту, які падладжваецца пад агляд, абапіраецца на пэўнае планаванне на стадыі распрацоўкі. Вы можаце думаць пра гэта як пра маленькія блакаваныя блокі Lego: мы праходзім этапы праектавання, зборкі і распрацоўкі, разглядаючы кожную канкрэтную вобласць да сябе, але ў выніку карыстальнік атрымлівае поўны (але зусім іншы) выгляд у кожнай вобласці прагляду.
Мы выкарысталі гэты падыход для анімацыі Huggy Laser Panda. Паглядзіце на яго, наведаўшы netm.ag/demo3-278. Мы распрацавалі гэта старанна, улічваючы адзінкі, якія павінны былі пераключацца і складацца ў стэк.
На мабільным прыладзе, каб кавалкі правільна збліжаліся, мы рэгулюем становішча правага раздзела (для нагляднасці акрэслена пурпурным колерам) і перагортваем яго, каб можна было правільна скласці.
Мы гарантуем, што кожная частка, паказаная ў раздзелах, размешчаных у скрынках, экспартуецца ў асобныя SVG і правільна называецца, уключаючы меншыя адзінкі ці групы. Гэта азначае, што ў наладах экспарту (я выкарыстоўваю SVGOMG Джэйка Арчыбальда) мы не выдаляем непатрэбныя ідэнтыфікатары і групы.
Затым мы выкарыстоўваем некалькі функцый. Кожны раздзел маштабуецца незалежна, і ёсць адна паўторная функцыя для ўсіх анімацый, якія цыкл.
функцыя revolve () {var tl = new TimelineMax (); tl.to (gear, 4, {transformOrigin: "50% 50%", кручэнне: 360, паўтор: -1, лёгкасць: Linear.easeNone}, "пачаць"); ... вярнуць tl; }
Гэта значна лягчэй адбудоўваць дызайн і разважаць пра яго. Мы нават можам прыпыніць кожную анімацыю першапачаткова, так што гэта можа быць выклікана падзеяй кліка карыстальніка. Цяпер усё разлічана на неабходны раздзел, пачынаючы ад дызайну і заканчваючы гатовым вырабам, лёгка даведацца, куды звярнуцца для карэкціроўкі.
Мы выдзяляем гэтыя зборкі, і кожная легападобная частка рэгулюецца ў працэнтах, і яна выдатна маштабуецца. Акрамя таго, flexbox будзе працаваць аднолькава добра, у залежнасці ад узроўню падтрымкі.
Менш пізажу на мабільным тэлефоне
Пагодзімся, мабільныя сувязі (асабліва ў менш развітых краінах) могуць быць даволі павольнымі. Калі ў вас ёсць толькі некалькі ключавых анімацыйных узаемадзеянняў на вашым сайце альбо велізарны досвед WebGL, часам анімацыя, якая выглядае прыгожа на працоўным стале, не павінна маштабавацца да мабільнага.
У выпадку вялікай анімацыі на палатне ці нават сапраўды складанай SVG-анімацыі, якая не з'яўляецца крытычнай для карыстацкага досведу, часам самае лепшае, што вы можаце зрабіць, - гэта паменшыць ці выключыць для меншых прылад.
Сайт Active Theory выдатна спраўляецца з гэтым (гл. Малюнак ніжэй), паказваючы поўную анімацыю палатна часціц на працоўным стале, якая замяняецца простым фонам шматвугольніка на мабільным тэлефоне. Узаемадзеянне на мабільным тэлефоне па-ранейшаму вельмі актуальнае, і яно выдатна пераўзыходзіць нават тое, што мы чакаем ад роднай.
Каманда па-ранейшаму дэманструе свае навыкі ўзаемадзеяння ў тым, як вы кіруецеся сайтам, што, магчыма, больш уражвае на мабільных тэлефонах, чым аніміраваны фон. Дызайн дазваляе зэканоміць прапускную здольнасць.
Выснова
Калі вы распрацоўваеце дызайн для рэагавання ад пачатку да канца альбо проста адключыце анімацыю на мабільным тэлефоне, жыццёва важна мець канкрэтны план таго, што адчуваюць вашы гледачы. Гэта асабліва дакладна ў ландшафтах, дзе мабільныя - гэта цар. Змест, тып малюнка і прапускная здольнасць карыстальніка - усё гэта дапамагае выбраць анімацыю для адаптыўнага дызайну.
