Мазмун
- Баштоо
- Платканын негизин түзүү
- Буттарды жаратуу
- Кол жана баш
- Түстөр жана текстуралар
- Көрсөтүү жана экспорттоо
- Логотипти бүтүрүү
- Логотипти жандандыруу
Интернетте 3D анимацияны жаратуунун бир нече жолдору бар, алардын көпчүлүгү JavaScript жана WebGLди жакшы билүүнү же Flash сыяктуу плагинди колдонууну талап кылат. CSS 3D өзгөрүүлөрүнүн аркасында 3D жана HTML жана CSS колдонуп 3D түзүүгө болот, бирок аны аткаруу оңой эмес. Менин акысыз онлайн колдонмо болгон Tridiv, процессти жөнөкөйлөтүп, колдонуучуларга бир сап код жазбай эле 3D объектилерин түзүүгө мүмкүнчүлүк берген жөнөкөй жана интуитивдүү WYSIWYG интерфейсин сунуш кылат.
Бул окуу куралында HTML жана CSS файлдарын гана колдонуп, ойдон чыгарылган "Tridiv Records" логотибин түзүп, анимациялаганы жатабыз. Логотип үчүн негизги визуалдык көрүнүш Tridiv аркылуу 3D форматында жасалат. Андан кийин кадимки HTML жана CSS колдонуп типографиялык элементтерди кошобуз.
Акыркы анимацияны жана аны жараткан кодду бул жерден көрө аласыз.
Баштоо
Tridiv колдонуп, айланма үстөлдү 3D форматында түзүүдөн баштайбыз. Tridiv.com сайтына баш багып, колдонмону ишке киргизиңиз. Chrome, Safari же Opera 15 (же андан кийинкилери) колдонушуңуз керек.
Баштоодон мурун Tridiv интерфейсин түшүнүү керек. Редактордун негизги бөлүмү төрт көрүнүштөн турат: жогорку сол жагында көрүнүштү толук чагылдырган 3D көрүнүш. Калган үч көрүнүш аны жогору жактан, капталдан жана маңдайдан көрсөтөт. Ушул үч көрүнүштү колдонуп, сиз 3D фигураларын түзүп, түзөтүп жана жылдыра аласыз.
Горизонталдык куралдар панели эки бөлүккө бөлүнөт: сол бөлүгүндө документке байланыштуу маалыматтар көрсөтүлөт; оң бөлүгүндө фигураларды түзүү жана түзөтүү куралдары бар. The Жылдыруу тандоо жана Түзөтүү тандоо баскычтары ар кандай түзөтүү режимдеринин ортосунда которулат.
Касиеттер панели (каптал тилкеси) документтин масштабын өзгөртүү жана торду кесүү, ошондой эле тандалган форманын касиеттерин (көлөмү, абалы, айлануусу, түсү ж.б.) чагылдырат. Өлчөмдөр жана позициялар үчүн колдонулган бирдик ems; айлануу бурчтары даражада.
Кийинчерээк окуу куралы башаламандыкка жол бербөө үчүн төмөнкү стенографияны колдонобуз:
w = туурасы h = бийиктиги d = тереңдик диаменти = диаметри x град = х огунда айлануу y дег = у огунда айлануу z дег = z огунда айлануу
Платканын негизин түзүү
Масштабды 200гө чейин коюңуз. Формаларды тартууга жардам берүү үчүн, ичиндеги сетка режимин жандырыңыз Документтин жөндөөлөрү каптал тилкесинин бөлүмү. Ыкчам маанисин деп койду 0.125.
Айланма табличканын негизи жөнөкөй кубоидден турат, андыктан чыкылдатыңыз Кубоидди кошуу жогорку куралдар тилкесиндеги баскыч. Кубоид редактордогу төрт көрүнүштө тең пайда болгонун көрүшүңүз керек.
Формасынын атын төмөнкүгө өзгөртүңүз негиз касиеттер панелинин ат талаасын колдонуу (астында Формалардын касиеттери). Форманын аталышы жарактуу CSS класс аты болушу керек, анткени ал редактор түзгөн коддо колдонулат. Логотипти жандандырганда ушул класстын аталыштарын кийинчерээк колдонобуз, андыктан ар бир жаңы формага туура ат койгонуңузга ынаныңыз.
Кубоид аталып бүткөндөн кийин, анын жогорку көрүнүшү боюнча тандалгандыгын текшерип алыңыз (ал көк түстө, тегерегинде куралдардын тегерек шакеги менен белгилениши керек), андан кийин Түзөтүү Түзөтүү туткаларын көрсөтүү үчүн шакектин жогору жагындагы баскыч. Кубоиддин капталдарындагы башкаруу туткаларын кеңдикке жана тереңдикке жеткенче сүйрөңүз w = 10 жана d = 8 ичинде Формалардын касиеттери.
Каптал көрүнүшүнүн ичиндеги форманы чыкылдатыңыз. Бул анын көрүнүшүн оңдоо туткаларын көрсөтүп, анын бийиктигин өзгөртүүгө мүмкүндүк берет. Бийиктикти жеткенге чейин жөндөңүз h = 2. Ошондой эле, баалуулуктарды түздөн-түз касиеттер панелине киргизсеңиз болот. Кубоиддин бурчтарын тегеректөө үчүн касиеттер панелиндеги бурчтардын маанилерин өзгөртүңүз 1.75, андан кийин [Кирүү] өзгөртүүлөрдү колдонуу үчүн ачкыч. Сизде ушундай нерсе болот.
Буттарды жаратуу
Бургулоочу тактайдын буттары үчүн биз цилиндрлерди колдонобуз. Цилиндрди кошуп, андан кийин анын диаметрин өзгөртүңүз diam = 1.75 жана анын бийиктиги h = 0.5. Чыкылдатуу Жылдыруу Формада сүйрөлө турган аянтты көрсөтүү үчүн үстүңкү куралдар тилкесиндеги тандоо баскычы. Цилиндрди бурчтардын бирине коюп, түбүнүн астына жылдырыңыз. (Сиз аны жогорку, каптал жана алдыңкы көрүнүштөргө жылдырышыңыз керек болушу мүмкүн.)
Цилиндрдин көчүрмөсүн көчүрүп алыңыз Көчүрүү шаймандардын тегерек шакекчесиндеги баскычты же баскычын басыңыз Д. ачкыч) жана жаңы цилиндрди базанын башка бурчуна жылдыруу үчүн. Төрт бут тең туура жайгаштырылганга чейин процессти кайталаңыз. Цилиндрлердин атын атоону унутпаңыз (мисалы, буттар сол-жогору, буттар оң-жогору, буттар сол-ылдый, буттар сол-жогору). Сиз ушуну жасап бүткөндөн кийин, натыйжа ушундай болушу керек.
Эми табак, диск, кол огу жана баскычты түзүүнү карап чыгабыз. Кийинки фигураларды жаратуу процесси бутка окшош. Бул жерде ар кандай цилиндрлер үчүн колдонулган өлчөмдөр келтирилген:
табак: diam = 7; h = 0,5 диск: diam = 6.75; h = 0,25 баскычы: diam = 1.5; h = 0,25 колу-огу-негизи: diam = 2.25; h = 0,25 кол огу: diam = 1.375; h = 1
Цилиндрлердин капталдарын тактоо үчүн касиеттер панелиндеги каптал талаасын колдонуп, ар биринин бетинин санын көбөйтсө болот. Өтө көп жактарды кошпогула, анткени бул редактордун глобалдык көрсөткүчүнө жана акыркы анимацияга терс таасирин тийгизиши мүмкүн. Мындай учурда, табак жана диск үчүн 32ден ашык каптал колдонбоого кеңеш берем. Сизде ушундай нерсе болушу керек.
Кол жана баш
Айналма столдун колу жана башы үчүн биз кубоиддерди колдонобуз. Кол үчүн кубоид түзүңүз (w = 0,25; h = 0,25; d = 4), андан кийин -33° үстүндө у огу. Баш үчүн кубоид түзүңүз (w = 0,5; h = 0,5; d = 1), андан кийин -33° үстүндө у огу. Эки форманы кол огу цилиндрине тегиздөө. Натыйжасы ушундай болуш керек.
Түстөр жана текстуралар
Платформаны бүтүрүп бүттүк. Акыркы кадам - түстөрдү дайындоо жана винилге текстураны колдонуу (жазуунун бетин чагылдырган сүрөт). Түстөрдү дайындоо үчүн, форманы тандап, баскычын чыкылдатыңыз түстөр касиеттер панелиндеги талаа. Tridiv фигуранын ар бир бетине өзүнчө түстөрдү көрсөтүүгө мүмкүндүк берет, бирок, ушул мисалда, биз бардык жүздөрдүн түсүн өзгөртүү үчүн бардык талааны колдонушубуз керек. Ал үчүн жөн гана талаага алты бурчтук түстүү кодду киргизиңиз, андан кийин басуу менен тастыктаңыз Кирүү.
Бул мисалда колдонулган түстөр:
негизи: # 0099FF буттары, баскычы, огу, колу жана башы: # F2EEE5 диск: # fa7f7a
Винилдин текстурасы үчүн процесс түстөрдү ыйгарууга окшош. Диск цилиндрин тандап, андан кийин сүрөттөр касиеттер панелиндеги талаа. Сүрөттүн URL дарегин жогорку талаадагы винилге чаптап, басуу менен ырастаңыз Кирүү. Сиз өзүңүздүн сүрөтүңүздү колдонсоңуз болот же ушул мисалда колдонулган сүрөттү жүктөп алсаңыз болот.
Сизде ушул сыяктуу бир нерсе болушу керек.
Көрсөтүү жана экспорттоо
Эми айланма үстөл бүткөндөн кийин, аны экспорттоодон мурун көрсөтүлгөн жол менен иштейбиз. Чыкылдатыңыз Алдын ала көрүү касиеттер панелинин жогору жагындагы баскыч. Масштабды чоңойтуу 200 айландыргычты чоңураак көрсөтүү. Формалардын кара чектерин алып салуу үчүн, өтүңүз Чектер панелдин бөлүмүн жана тунуктугун койду 0. Натыйжа ушул сыяктуу болушу керек.
Айланма үстөлдүн үстү жагылып турушун каалайбыз. Ал үчүн сценаны айланма үстөлдүн үстү сиз тарапка бурулуп тургандай кылып айландырыңыз. Негиз кемчиликсиз тик бурчтуу көрүнүшү керек. Tridiv.com/d/4k6section касиеттер панелиндеги ачык жана күңүрт маанилерди өзгөртүү көрүнүштүн ичиндеги көлөкөлөрдү калыбына келтирет. Жарык маанисин өзгөртүңүз 0.
Эми айланма стол экспортко даяр!
Логотипти бүтүрүү
Логотипке текстти кошуп, лого анимациясын түзүүгө даярбыз. Чыкылдатыңыз Түзөтүү ылдыйкы сол жагындагы CodePen баскычы Алдын ала көрүү кодду CodePenге экспорттоо үчүн көрүү. Tridiv тарабынан түзүлгөн CSS коду сатуучунун префикстери колдонулбай тургандыгын белгилей кетүү маанилүү, андыктан кодду ар бир браузерде иштеши үчүн prefixr.com же leaverou.github.io/prefixfree сыяктуу куралдарды колдонуу керек болот. JavaScript панелин жабуудан баштаңыз, анткени биз аны колдонбойбуз. HTML панелинен, карата колдонулган стиль тегин алып салыңыз .scene div
CSS панелин жайып, аягына төмөнкү кодду кошуңуз:
.scene {transform: translateY (-140px) rotateX (-55deg); }
Мына, translateY (-140px) бурулуучу үстөлдү 140px өйдө карай жылдырып, астындагы текстке орун калтырат. Андан кийин, rotateX (-55deg) айланма столдун вертикалдык жантайышын белгилейт.
Текстти кошуу үчүн, a кошуу керек .title div ачылгандан кийин #tridiv HTML панелиндеги div. Ичинде эки кошуңуз аралыгы> (.негизги аталыш жана .sub-title) менен бөлүнгөн 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 {абалы: абсолюттук; жогорку: 50%; сол жакта: 50%; маржа: 0 0 0 -165px; туурасы: 330px; бийиктиги: 5em; font-family: 'Ачык Sans', sans-serif; font-weight: 300; ариптин көлөмү: 24px; текстке тегиздөө: борбор; тамгалардын аралыгы: 1.5em; color: # 0099FF; } title hr {border: 1px solid # fa7f7a; margin: .75em 0; } аталышы аралыгы {дисплей: блок; } .негизги аталышы {font-size: 2.15em; } .sub-title {text-indent: .25em; }
Voilà! Сиздин логотип толугу менен. Ал төмөндөгү сүрөттө окшош болушу керек. Сиздин 3D үлгүңүз бүткөндөн кийин, CSSтин күчүн колдонуп, стилдерди, анимацияларды же чычкан окуяларын кошуп дагы да жакшырта аласыз: жөн гана 3D моделин башка HTML элементтери сыяктуу мамиле кылыңыз.
Логотипти жандандыруу
Логотипти колдонуп анимацияны бул жерден көрүңүз. Бургулоочу бөлүктүн бөлүктөрү түшүп жатканда, алардын ар бири ар кандай кечигүүлөр менен бир эле кадр кадрларын бирдей кыймылдашат. Формалардын жогорку касиети коюлган 50%. Жыгылып жаткан эффектти түзүү үчүн, жогорку атрибутун жандандырабыз -400px чейин 50%:
@keyframes арзандайт {0% {top: -400px; } / * Форманы 400px бийиктикке жайгаштырган анимацияны баштайбыз * / 100% {top: 50%; } / * анда аны баштапкы абалына келтиребиз * /}
Бул анимацияны бардык формаларга төмөнкүдөй кошсоңуз болот:
.shape {top: -400px; анимация: 1s кулап 0s алдыга; }
Жогорку атрибутун коюңуз -400px жана кечиктирүүнү кошуу:
.platter {анимация-кечигүү: 1.05s; } .disc {анимация-кечигүү: 1.35s; } .түймөсү {анимация-кечигүү: 1.5s; } ...
Колдонуп акыркы 'секирүү' эффектин түзүңүз rotateX атрибут:
90% {transform: translateY (-5em) rotateX (780deg) rotateY (0deg); } 95% {transform: translateY (-4em) rotateX (620deg) rotateY (0deg); } 100% {transform: translateY (-4.5em) rotateX (660deg) rotateY (0deg); }
Биз ушул өзгөчө версияны ушундайча түздүк, бирок эсиңизде болсун: чектөөлөр жок!
Сөздөр: Джулиан Гарниер
Бул макала алгач 248-журналдын торунда чыккан.
