Мазмұны
- Бастау
- Айналмалы үстелдің негізін құру
- Аяқтарды құру
- Қол мен бас
- Түстер мен текстуралар
- Көрсету және экспорттау
- Логотипті аяқтау
- Логотипті тірілту
Интернетте 3D анимацияны құрудың бірнеше әдісі бар, олардың көпшілігі JavaScript және WebGL-ді жақсы білуді немесе Flash сияқты қосылатын модульді пайдалануды талап етеді. CSS 3D түрлендірулерінің арқасында 3D-ді тек HTML және CSS-ті қолдану арқылы жасауға болады, бірақ оны жасау оңай емес. Tridiv, менің ақысыз онлайн қосымшам, процедураны жеңілдетеді, қарапайым және интуитивті WYSIWYG интерфейсін ұсынады, бұл пайдаланушыларға бір код жолын жазбай 3D нысандарын жасауға мүмкіндік береді.
Бұл оқулықта біз тек HTML және CSS-ті қолданатын 'Tridiv Records' логотипі үшін ойдан шығарылған жазбалар логотипін құрып, анимацияламақпыз. Логотиптің негізгі көрнекілігі Tridiv көмегімен 3D форматында жасалады. Содан кейін типографиялық элементтерді кәдімгі HTML және CSS көмегімен қосамыз.
Сіз мұнда соңғы анимацияны және оны тудыратын кодты көре аласыз.
Бастау
Біз айналмалы үстелді Tridiv көмегімен 3D форматында құрудан бастаймыз. Tridiv.com сайтына өтіп, бағдарламаны іске қосыңыз. Сізге Chrome, Safari немесе Opera 15 (немесе одан кейінгі) нұсқаларын пайдалану қажет болады.
Бастамас бұрын Tridiv интерфейсін түсіну маңызды. Редактордың негізгі бөлімі төрт көріністен тұрады: жоғарғы сол жақта көріністің толық көрінісін қамтамасыз ететін 3D көрінісі орналасқан. Қалған үш көрініс оны жоғарыдан, бүйірден және алдыңғы жағынан көрсетеді. Осы үш көріністі қолдана отырып, сіз 3D фигураларын жасауға, өңдеуге және жылжытуға болады.
Көлденең құралдар тақтасы екі бөлікке бөлінеді: сол жақта сіздің құжатыңызға қатысты ақпарат көрсетіледі; оң жақ бөлігінде пішіндерді жасауға және өңдеуге арналған құралдар бар. The Жылжыту таңдау және Өңдеу таңдау батырмалары әр түрлі өңдеу режимдерінің арасында ауысады.
Сипаттар тақтасында (бүйірлік тақта) үлкейту және торды кесіп алу сияқты құжаттар параметрлері және таңдалған пішіннің қасиеттері (өлшемі, орны, айналуы, түсі және т.б.) көрсетіледі. Өлшемдер мен позициялар үшін қолданылатын қондырғы - эмс; айналу бұрыштары градусқа тең.
Кейінірек оқулықта қандай да бір шатасулар болмас үшін, біз келесі стенографияны қолданамыз:
w = ені h = биіктігі d = тереңдігі диам = диаметрі х град = х осіндегі айналу у deg = у осіндегі айналу z дег = z осіндегі айналуы
Айналмалы үстелдің негізін құру
Масштабтау мәнін 200-ге теңестіруден бастаңыз. Фигураларды салуға көмектесу үшін, тор ішіне кесу параметрін қосыңыз Құжат параметрлері бүйірлік тақтаның бөлімі. Жылдамдық мәнін орнатыңыз 0.125.
Айналмалы табанның негізі қарапайым кубоидтан тұрады, сондықтан нұқыңыз Кубоидты қосыңыз жоғарғы құралдар тақтасындағы батырма. Кубоидтың редактордағы барлық төрт көріністе пайда болғанын көруге болады.
Пішіннің атын өзгертіңіз негіз сипаттар тақтасының атау өрісін пайдалану (астында Пішін сипаттары). Пішіннің аты CSS жарамды сынып аты болуы керек, себебі ол редактор жасаған кодта қолданылады. Логотипті анимациялау кезінде біз осы сынып атауларын кейінірек қолданатын боламыз, сондықтан сіз өзіңіз жасаған әр жаңа пішінді дұрыс атағаныңызға көз жеткізіңіз.
Кубоид атауын алғаннан кейін, оның жоғарғы көріністе таңдалғанына көз жеткізіңіз (оны көк түспен, айналасында айналмалы құралдар сақинасымен белгілеу керек), содан кейін Өңдеу өңдеу тұтқаларын көрсету үшін сақинаның жоғарғы жағындағы батырма. Басқару тұтқаларын кубоидтың бүйірлеріне ені мен тереңдігі жеткенше сүйреңіз w = 10 және d = 8 ішінде Пішін сипаттары.
Бүйір көрінісінің ішіндегі пішінді басыңыз. Бұл оның биіктігін өзгертуге мүмкіндік беретін осы көріністегі өңдеу тұтқаларын көрсетеді. Биіктігін жеткенге дейін реттеңіз h = 2. Сондай-ақ, мәндерді тікелей сипаттар тақтасына енгізуге болады. Кубоидтың бұрыштарын дөңгелектеу үшін қасиеттер аймағындағы бұрыштардың мәндерін өзгертіңіз 1.75, содан кейін түймесін басыңыз [Енгізу] өзгертулерді қолдану кілті. Сізде осындай нәрсе болады.
Аяқтарды құру
Бұрылмалы табан үшін біз баллондарды қолданамыз. Цилиндрді қосыңыз, содан кейін оның диаметрін өзгертіңіз диам = 1,75 және оның биіктігі h = 0,5. Нұқыңыз Жылжыту фигурада сүйрелетін аймақты көрсету үшін жоғарғы құралдар тақтасындағы таңдау батырмасы. Цилиндрді бұрыштардың біріне қойып, негіздің астына жылжытыңыз. (Сізге оны жоғарғы, бүйір және алдыңғы көріністерде жылжыту қажет болуы мүмкін.)
Цилиндрдің көшірмесін жасаңыз (түймесін басыңыз Көшірме құралдың дөңгелек сақинасындағы батырмасын басыңыз немесе Д. кілт) және жаңа цилиндрді табанның басқа бұрышына жылжыту үшін. Төрт аяғы дұрыс орналастырылғанша процедураны қайталаңыз. Цилиндрлерді атауды ұмытпаңыз (мысалы, аяқтар солдан жоғарыға, аяқ-оң-жоғарғы, фут-солдан-төменге, аяқтар солдан жоғарыға). Мұны жасағаннан кейін нәтиже келесідей болуы керек.
Енді табақша, диск, білік және түйме жасауды қарастырамыз. Келесі пішіндерді жасау процесі аяққа ұқсас. Әр түрлі цилиндрлер үшін қолданылатын өлшемдер:
табақша: диам = 7; h = 0,5 диск: диам = 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 тақтасында, үшін қолданылған стиль тегін алып тастаңыз .көрініс див
CSS тақтасын кеңейтіп, соңына келесі кодты қосыңыз:
.scene {transform: translateY (-140px) rotateX (-55deg); }
Мұнда translateY (-140px) айналмалы үстелді жоғары қарай жылжытады, оның астындағы мәтінге орын қалдырады. Содан кейін rotateX (-55deg) айналмалы үстелдің тік көлбеуін орнатады.
Мәтінді қосу үшін а қосу керек .тақырып div ашылғаннан кейін #tridiv HTML тақтасындағы div. Ішінде, екі қосыңыз аралықтар> (.негізгі-тақырып және .sub-title), бөлінген сағ />:
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: ‘Open Sans’, sans-serif; қаріп салмағы: 300; қаріп өлшемі: 24px; мәтінмен туралау: орталық; әріптер аралығы: 1,5em; түс: # 0099FF; } тақырып hr {шекара: 1px қатты # fa7f7a; маржа: .75em 0; } тақырып аралығы {дисплей: блок; } .негізгі тақырып {қаріп өлшемі: 2.15em; } .sub-title {text-indent: .25em; }
Voilà! Сіздің логотипіңіз аяқталды. Ол төмендегі суретке ұқсас болуы керек. 3D моделіңіз аяқталғаннан кейін, сіз оны одан да жақсарту үшін CSS-тің күшін стильдер, анимациялар немесе тышқан оқиғаларын қосу арқылы пайдалана аласыз: 3D моделін кез келген басқа HTML элементтері сияқты ұстаңыз.
Логотипті тірілту
Логотипті пайдаланып анимацияны мына жерден қараңыз. Айналмалы үстелдің бөліктері құлап бара жатқанда, олардың әрқайсысы әр түрлі кідірістермен бірдей кадрлық анимацияны бөліседі. Фигуралардың жоғарғы төлсипаты орнатылған 50%. Түсетін эффект жасау үшін біз жоғарғы төлсипатты жандандырамыз -400 пиксель дейін 50%:
@keyframes құлайды {0% {top: -400px; } / * Біз пішінді 400px биіктікке орналастыратын анимацияны бастаймыз * / 100% {жоғарғы: 50%; } / * содан кейін оны бастапқы күйінде аяқтаймыз * /}
Сіз бұл анимацияны келесі формаларға қосуға болады:
.shape {top: -400px; анимация: 1s құлату 0s алға алға ұмтылу; }
Жоғарғы төлсипатты келесіге қойыңыз -400 пиксель және кідірісті қосыңыз:
.platter {анимация-кешігу: 1.05с; } .disc {анимация-кешігу: 1,35с; } .түймесі {анимация-кешігу: 1,5с; } ...
Көмегімен соңғы «серпіліс» эффектін жасаңыз айналдыруX атрибут:
90% {түрлендіру: translateY (-5em) rotateX (780deg) rotateY (0deg); } 95% {түрлендіру: translateY (-4em) rotateX (620deg) rotateY (0deg); } 100% {түрлендіру: translateY (-4,5em) rotateX (660deg) rotateY (0deg); }
Осылайша біз осы нақты нұсқаны жасадық, бірақ есіңізде болсын: шектеулер жоқ!
Сөздер: Джулиан Гарнье
Бұл мақала бастапқыда 248 санды журналда пайда болды.
