Задаволены
- Пачатак
- Стварэнне асновы прайгравальніка
- Стварэнне ног
- Рука і галава
- Колеры і фактуры
- Аказанне і экспарт
- Аздабленне лагатыпа
- Аніміраванне лагатыпа
Ёсць некалькі спосабаў стварыць 3D-анімацыю ў Інтэрнэце, большасць з іх патрабуе добрага ведання JavaScript і WebGL, альбо выкарыстання такога ўбудовы, як Flash. Дзякуючы пераўтварэнням CSS 3D можна ствараць 3D, выкарыстоўваючы толькі HTML і CSS, але зрабіць гэта няпроста. Tridiv, маё бясплатнае онлайн-дадатак, спрашчае працэс, прапаноўваючы просты і інтуітыўна зразумелы інтэрфейс WYSIWYG, які дазваляе карыстальнікам ствараць 3D-аб'екты без напісання адзінага радка кода.
У гэтым уроку мы збіраемся стварыць і аніміраваць лагатып для "Tridiv Records", выдуманага лэйбла, выкарыстоўваючы толькі HTML і CSS. Асноўны візуальны эфект для лагатыпа будзе створаны ў 3D з выкарыстаннем Tridiv. Тады мы дадамо друкарскія элементы, выкарыстоўваючы звычайныя HTML і CSS.
Вы можаце ўбачыць канчатковую анімацыю і код, які яе стварае, тут.
Пачатак
Мы пачнем са стварэння прайгравальніка ў 3D з дапамогай Tridiv. Перайдзіце на сайт tridiv.com і запусціце прыкладанне. Вам трэба будзе выкарыстоўваць Chrome, Safari альбо Opera 15 (або больш позняй версіі).
Перш чым пачаць, важна зразумець інтэрфейс Tridiv. Асноўны раздзел рэдактара складаецца з чатырох відаў: уверсе злева знаходзіцца 3D-выгляд, які забяспечвае поўны выгляд сцэны. Астатнія тры віды паказваюць яго зверху, збоку і спераду. Выкарыстоўваючы гэтыя тры віды, вы можаце ствараць, рэдагаваць і перамяшчаць трохмерныя фігуры.
Гарызантальная панэль інструментаў падзелена на дзве часткі: у левай частцы адлюстроўваецца інфармацыя, якая тычыцца вашага дакумента; правая частка змяшчае інструменты для стварэння і рэдагавання фігур. Рухайцеся адбор і Рэдагаваць кнопкі выбару пераключаюцца паміж рознымі рэжымамі рэдагавання.
На панэлі ўласцівасцей (бакавая панэль) адлюстроўваюцца такія параметры дакумента, як маштабаванне і прывязка да сеткі, а таксама ўласцівасці абранай формы (памер, становішча, паварот, колер і гэтак далей). Адзінкай, якая выкарыстоўваецца для вымярэнняў і становішча, з'яўляецца ems; куты павароту ў градусах.
Каб пазбегнуць блытаніны ў наступным уроку, мы будзем выкарыстоўваць наступную стэнаграфію:
w = шырыня h = вышыня d = дыяметр глыбіні = дыяметр x град = паварот па восі x y deg = паварот па восі y z deg = паварот па восі z
Стварэнне асновы прайгравальніка
Пачніце з усталёўкі значэння маштабу на 200. Каб дапамагчы намаляваць фігуры, уключыце наладу прывязкі да сеткі ў Налады дакумента раздзел бакавой панэлі. Усталюйце значэнне прывязкі 0.125.
Аснова прайгравальніка складаецца з простага кубападобнага малюнка, таму націсніце Дадайце кубападобны на верхняй панэлі інструментаў. Вы павінны ўбачыць, як кубоід адлюстроўваецца ва ўсіх чатырох відах у рэдактары.
Перайменаваць форму ў падстава з выкарыстаннем поля імя на панэлі ўласцівасцей (пад Уласцівасці формы). Імя формы павінна быць сапраўдным імем класа CSS, таму што яно будзе выкарыстоўвацца ў кодзе, які ствараецца рэдактарам. Мы будзем выкарыстоўваць гэтыя назвы класаў пазней пры аніміраванні лагатыпа, таму пераканайцеся, што вы правільна называеце кожную новую фігуру.
Пасля таго, як кубоід названы, пераканайцеся, што ён абраны ў выглядзе зверху (ён павінен быць выдзелены сінім колерам, вакол яго кругавое кольца інструментаў), а затым націсніце Рэдагаваць кнопка ўверсе кальца, каб паказаць ручкі рэдагавання. Перацягніце ручкі кіравання па баках кубападобнага колеру, пакуль не дасягнуць шырыні і глыбіні ш = 10 і d = 8 у Уласцівасці формы.
Націсніце на форму ў бакавым выглядзе. Гэта пакажа ручкі рэдагавання ў гэтым выглядзе, што дазволіць нам змяніць яго вышыню. Рэгулюйце вышыню, пакуль яна не дасягне h = 2. Вы таксама можаце ўводзіць значэнні непасрэдна ў вобласць уласцівасцяў. Каб акруглець куты кубападобнай формы, зменіце значэнні кутоў на панэлі уласцівасцяў на 1.75, затым націсніце [Увод] ключ для прымянення змяненняў. У вас будзе нешта накшталт гэтага.
Стварэнне ног
Для ног вертушкі мы будзем выкарыстоўваць цыліндры. Дадайце цыліндр, а потым зменіце яго дыяметр на дыям = 1,75 і яго вышыня да h = 0,5. Націсніце на Рухайцеся кнопка выбару на верхняй панэлі інструментаў, каб паказаць вобласць, якую можна перацягнуць на фігуры. Падвядзіце цыліндр пад аснову, размясціўшы яго ў адным з кутоў. (Магчыма, вам спатрэбіцца перанесці яго ў выглядзе зверху, збоку і спераду.)
Дублюйце цыліндр (націсніце Дублікат на кругавым кольцы інструментаў альбо націсніце D ключ) і перамясціць новы цыліндр у іншы кут асновы. Паўтарайце працэс, пакуль усе чатыры ногі не будуць правільна размешчаны. Не забудзьцеся назваць цыліндры (напрыклад, ногі-злева-зверху, ногі-правы-верх, ногі-левы-ніжні, ногі-злева-зверху). Калі вы гэта зрабілі, вынік павінен выглядаць так.
Зараз мы разгледзім стварэнне пласціны, дыска, восі рукі і кнопкі. Працэс стварэння наступных фігур падобны на працэс для ног. Вось памеры, якія выкарыстоўваюцца для розных балонаў:
страва: дыям = 7; h = 0,5 дыска: дыяметр = 6,75; кнопка h = 0,25: дыяметр = 1,5; h = 0,25 аснова восі-асновы: дыяметр = 2,25; h = 0,25 вось рукі: дыяметр = 1,375; h = 1
Для ўдасканалення бакоў цыліндраў можна павялічыць колькасць граняў кожнага з іх, выкарыстоўваючы поле бакоў у панэлі ўласцівасцяў. Не дадавайце занадта шмат бакоў, бо гэта можа негатыўна паўплываць на глабальную прадукцыйнасць рэдактара і канчатковую анімацыю. У гэтым выпадку я б параіў вам не выкарыстоўваць больш за 32 бакоў для пласціны і дыска. У вас павінна быць нешта накшталт гэтага.
Рука і галава
Для рукі і галавы прайгравальніка мы будзем выкарыстоўваць кубоіды. Для рукі стварыце кубападобны (ш = 0,25; ч = 0,25; d = 4), затым ужывайце паварот на -33° на вось у. Для галавы стварыце кубападобны (ш = 0,5; ч = 0,5; d = 1), затым ужывайце паварот на -33° на вось у. Сумясціце абедзве фігуры з цыліндрам восі рычага. Вынік павінен выглядаць так.
Колеры і фактуры
Мы амаль скончылі з паваротнай платформай. Заключны этап - прызначэнне колераў і нанясенне фактуры на вініл (малюнак, які ўяўляе паверхню запісу). Каб прызначыць колеры, выберыце форму і націсніце на колеры поле на панэлі ўласцівасцяў. Tridiv дазваляе ўказваць індывідуальныя колеры для кожнай грані фігуры, але ў гэтым прыкладзе нам трэба выкарыстоўваць усё поле, каб змяніць колер усіх граняў. Для гэтага проста ўвядзіце ў поле шаснаццатковы каляровы код, пасля чаго пацвердзіце, націснуўшы Уваходзіць.
Вось колеры, якія выкарыстоўваюцца ў гэтым прыкладзе:
база: # 0099FF футы, кнопка, вось, рука і галава: # F2EEE5 дыск: # fa7f7a
Для фактуры вінілу працэс падобны на прысваенне колераў. Выберыце цыліндр дыска, а затым націсніце на выявы поле на панэлі ўласцівасцяў. У верхняе поле ўстаўце URL малюнка, які вы хочаце нанесці на вініл, і пацвердзіце, націснуўшы Уваходзіць. Вы можаце выкарыстоўваць уласную выяву альбо загрузіць выяву, выкарыстаную ў гэтым прыкладзе.
Цяпер у вас павінна быць нешта падобнае на гэта.
Аказанне і экспарт
Цяпер, калі паваротны стол скончаны, мы збіраемся папрацаваць над спосабам яго адлюстравання перад яго экспартам. Націсніце Папярэдні прагляд у верхняй частцы панэлі ўласцівасцей. Усталюйце значэнне маштабавання ў 200 каб павярнуць прайгравальнік. Каб выдаліць чорныя рамкі фігур, перайдзіце да Межы раздзел панэлі і ўсталюйце непразрыстасць 0. Вынік павінен выглядаць прыблізна так.
Мы хочам, каб вертушка была асветлена зверху. Для гэтага павярніце сцэну такім чынам, каб верхняя частка вертушкі была звернута да вас. Падстава павінна выглядаць ідэальна прамавугольным. Змена значэнняў святла і цемры ў раздзеле tridiv.com/d/4k6 на панэлі ўласцівасцей аднавіць цені ў сцэне. Зменіце значэнне святла на 0.
Паваротны стол цяпер гатовы да экспарту!
Аздабленне лагатыпа
Мы гатовыя дадаць тэкст у лагатып і стварыць анімацыю лагатыпа. Націсніце Рэдагаваць на кнопцы CodePen унізе злева Папярэдні прагляд праглядаць экспарт кода ў CodePen. Важна адзначыць, што ў CSS-кодзе, які ствараецца Tridiv, не выкарыстоўваюцца прэфіксы пастаўшчыкоў, таму вам спатрэбіцца выкарыстоўваць такія інструменты, як prefixr.com або leaverou.github.io/prefixfree, каб зрабіць код функцыянальным у кожным браўзэры. Пачніце з закрыцця панэлі JavaScript, бо мы не збіраемся яе выкарыстоўваць. На панэлі HTML выдаліце тэг стылю, прыменены да .сцэна дзів.
Разгарніце вобласць CSS і дадайце наступны код у канцы:
.scene {пераўтварэнне: translateY (-140px) rotateX (-55deg); }
Тут, translateY (-140px) перамяшчае прайгравальнік на 140 пікселяў уверх, пакідаючы месца для тэксту пад ім. Тады, rotateX (-55deg) задае вертыкальны нахіл паваротнай платформы.
Каб дадаць тэкст, трэба дадаць .загаловак div адразу пасля адкрыцця #tridiv div на панэлі HTML. Унутр дадайце два ахоплівае> (.асноўны загаловак і .загаловак), падзеленыя hr />:
div id = "tridiv"> div> span> TRIDIV / span> hr /> span> RECORDS / span> / div> ...
Затым трэба ўжыць правільныя шрыфты і стылі. На панэлі CSS імпартуйце шрыфт Open Sans, які выкарыстоўваецца ў лагатыпе, і дадайце асноўныя стылі для тэкставых элементаў.
@import url (http://fonts.googleapis.com/css?family=Open+Sans:300); / * Цэнтраванне тэкставага блока + асноўныя стылі шрыфтоў * / title {position: absolute; зверху: 50%; злева: 50%; запас: 0 0 0 -165px; шырыня: 330px; вышыня: 5em; сямейства шрыфтоў: 'Open Sans', sans-serif; шрыфт-вага: 300; памер шрыфта: 24px; выраўноўванне па тэксце: па цэнтры; інтэрвал паміж літарамі: 1,5эм; колер: # 0099FF; } загаловак hr {мяжа: 1px цвёрды # fa7f7a; маржа: .75em 0; } загаловак {адлюстраванне: блок; } .асноўны загаловак {памер шрыфта: 2.15em; } .падзагаловак {водступ тэксту: .25em; }
Вуаля! Ваш лагатып завершаны. Гэта павінна выглядаць прыблізна на малюнку ніжэй. Пасля таго, як ваша 3D-мадэль скончана, вы можаце выкарыстоўваць сілу CSS, каб зрабіць яе яшчэ лепшай, дадаўшы стылі, анімацыю ці падзеі мышы: проста звяртайцеся з 3D-мадэллю як з любым іншым элементам HTML.
Аніміраванне лагатыпа
Глядзіце анімацыю з выкарыстаннем лагатыпа тут. Па меры падзення частак прайгравальніка кожная з іх мае аднолькавую анімацыю ключавых кадраў з рознымі затрымкамі. Для фігур усталяваны верхні атрыбут 50%. Каб стварыць эфект падзення, мы аніміруем верхні атрыбут з -400px да 50%:
@keyframes падаюць на {0% {top: -400px; } / * Мы пачынаем анімацыю, размяшчаючы фігуру на вышыні 400px * / 100% {top: 50%; } / * тады мы заканчваем яго ў зыходным становішчы * /}
Вы можаце дадаць гэтую анімацыю да ўсіх фігур наступным чынам:
.shape {зверху: -400px; анімацыя: падзенне на 1 с лёгкасць на 0 с наперад; }
Усталюйце верхні атрыбут -400px і дадаць затрымку:
.platter {затрымка анімацыі: 1,05 с; } .disc {затрымка анімацыі: 1,35 с; } .button {затрымка анімацыі: 1,5 с; } ...
Стварыце канчатковы эфект "адскоку", выкарыстоўваючы rotateX атрыбут:
90% {пераўтварэнне: translateY (-5em) rotateX (780deg) rotateY (0deg); } 95% {пераўтварэнне: translateY (-4em) rotateX (620deg) rotateY (0deg); } 100% {пераўтварэнне: translateY (-4,5em) rotateX (660deg) rotateY (0deg); }
Вось як мы стварылі гэтую канкрэтную версію, але памятайце: ніякіх абмежаванняў няма!
Словы: Джуліян Гарнье
Гэты артыкул першапачаткова з'явіўся ў нумары 248 часопіса net.
