Indhold
- Kom godt i gang
- Oprettelse af bunden af pladespilleren
- Oprettelse af fødderne
- Arm og hoved
- Farver og teksturer
- Rendering og eksport
- Efterbehandling af logoet
- Animer logoet
Der er flere måder at oprette 3D-animation på nettet, hvoraf de fleste kræver et godt kendskab til JavaScript og WebGL eller brug af et plug-in som Flash. Takket være CSS 3D-transformationer er det muligt at oprette 3D ved kun at bruge HTML og CSS, men det er ikke let at gøre det. Tridiv, min gratis online-app, forenkler processen og tilbyder en enkel og intuitiv WYSIWYG-grænseflade, der giver brugerne mulighed for at oprette 3D-objekter uden at skrive en enkelt kodelinje.
I denne vejledning skal vi oprette og animere et logo til 'Tridiv Records', et fiktivt pladeselskab, der kun bruger HTML og CSS. Det vigtigste visual for logoet oprettes i 3D ved hjælp af Tridiv. Derefter tilføjer vi de typografiske elementer ved hjælp af almindelig HTML og CSS.
Du kan se den endelige animation og koden, der genererer den her.
Kom godt i gang
Vi begynder med at oprette pladespilleren i 3D ved hjælp af Tridiv. Gå til tridiv.com og start appen. Du skal bruge enten Chrome, Safari eller Opera 15 (eller nyere).
Før du starter, er det vigtigt at forstå Tridiv-grænsefladen. Hovedafsnittet i editoren er sammensat af fire visninger: øverst til venstre er 3D-visningen, der giver et komplet overblik over scenen. De andre tre visninger viser det fra toppen, siden og fronten. Ved hjælp af disse tre visninger kan du oprette, redigere og flytte 3D-figurer.
Den vandrette værktøjslinje er opdelt i to dele: den venstre del viser oplysninger om dit dokument; den højre del indeholder værktøjer til oprettelse og redigering af figurer. Det Bevæge sig valg og Redigere valgknapper skifter mellem de forskellige redigeringstilstande.
Egenskabsruden (sidebjælken) viser dokumentindstillinger såsom zoom og snap til gitter og egenskaberne for den valgte form (størrelse, position, rotation, farve osv.). Enheden, der bruges til dimensioner og placering, er ems; rotationsvinklerne er i grader.
For at undgå enhver forvirring senere i vejledningen skal vi bruge følgende stenografi:
w = bredde h = højde d = dybde diam = diameter x deg = rotation i x-aksen y deg = rotation i y-aksen z deg = rotation i z-aksen
Oprettelse af bunden af pladespilleren
Start med at indstille zoomværdien til 200. For at hjælpe med at tegne figurerne skal du aktivere snap to grid-indstillingen i Dokumentindstillinger sektion af sidebjælken. Indstil snapværdien til 0.125.
Bunden af pladespilleren er sammensat af en simpel kuboid, så klik på Tilsæt kuboid i øverste værktøjslinje. Du skal se cuboid vises i alle fire visninger i editoren.
Omdøb formen til grundlag ved hjælp af navnefeltet i egenskabsruden (under Formegenskaber). Navnet på formen skal være et gyldigt CSS-klassenavn, fordi det vil blive brugt i den kode, der genereres af editoren. Vi bruger disse klassenavne senere, når vi animerer logoet, så sørg for at navngive hver nye figur, du opretter korrekt.
Når cuboid er navngivet, skal du sørge for, at den er valgt i ovenfra (den skal fremhæves i blåt med en cirkulær ring af værktøjer omkring den), og klik derefter på Redigere knappen øverst på ringen for at vise redigeringshåndtagene. Træk kontrolhåndtagene på siderne af kuboidet, indtil bredden og dybden når w = 10 og d = 8 i Formegenskaber.
Klik på formen inde i sidevisningen. Dette viser redigeringshåndtagene i denne visning, så vi kan ændre højden. Juster højden, indtil den når h = 2. Du kan også skrive værdier direkte i egenskabsruden. For at afrunde hjørnerne af kuboidet skal du ændre hjørneværdierne i egenskabsruden til 1.75, og tryk derefter på [Gå ind] tast for at anvende ændringerne. Du får noget som dette.
Oprettelse af fødderne
Til fødderne på pladespilleren skal vi bruge cylindre. Tilføj en cylinder, og skift dens diameter til diam = 1,75 og dens højde til h = 0,5. Klik på Bevæge sig markeringsknap i øverste værktøjslinje for at vise det trækbare område på formen. Flyt cylinderen under bunden, og placer den i et af hjørnerne. (Det kan være nødvendigt at flytte den i top-, side- og forfra.)
Kopier cylinderen (tryk på Duplikere knappen i værktøjets cirkulære ring, eller tryk på D nøgle) og flytte den nye cylinder til et andet hjørne af basen. Gentag processen, indtil alle fire fødder er placeret korrekt. Glem ikke at navngive cylindrene (f.eks. fødder-venstre-top, fødder-højre-top, fødder-venstre-bund, fødder-venstre-top). Når du har gjort det, skal resultatet se sådan ud.
Vi ser nu på at oprette plade, disk, armakse og knap. Processen til oprettelse af de næste former ligner den for fødderne. Her er de dimensioner, der anvendes til de forskellige cylindre:
plade: diam = 7; h = 0,5 skive: diam = 6,75; h = 0,25 knap: diam = 1,5; h = 0,25 arm-akse-base: diam = 2,25; h = 0,25 armakse: diam = 1,375; h = 1
For at forfine siderne på cylindrene kan du øge antallet af ansigter i hver enkelt ved hjælp af sidefeltet i egenskabsruden. Tilføj ikke for mange sider, da dette kan påvirke redaktørens globale ydeevne og den endelige animation negativt. I dette tilfælde vil jeg råde dig til ikke at bruge mere end 32 sider til tallerkenen og disken. Du burde have noget som dette.
Arm og hoved
Til armen og hovedet på pladespilleren skal vi bruge cuboids. Opret en kuboid til armen (w = 0,25; h = 0,25; d = 4), og anvend derefter en rotation på -33° på den y-akse. Opret en kuboid til hovedet (w = 0,5; h = 0,5; d = 1), og anvend derefter en rotation på -33° på den y-akse. Ret begge former efter armaksecylinderen. Resultatet skal se sådan ud.
Farver og teksturer
Vi er næsten færdige med pladespilleren. Det sidste trin er at tildele farver og anvende en tekstur på vinylen (et billede, der repræsenterer pladens overflade). For at tildele farver skal du vælge en figur og klikke på farver i egenskabsruden. Tridiv giver dig mulighed for at specificere individuelle farver for hvert ansigt af en form, men i dette eksempel er vi nødt til at bruge feltet hele for at ændre farven på alle ansigterne. For at gøre dette skal du blot indtaste en hex-farvekode i feltet og derefter bekræfte ved at trykke på Gå ind.
Her er de farver, der bruges i dette eksempel:
base: # 0099FF fødder, knap, akse, arm og hoved: # F2EEE5 disk: # fa7f7a
For vinylens tekstur svarer processen til at tildele farver. Vælg skivecylinderen, og klik derefter på billeder i egenskabsruden. Indsæt URL'en til det billede, du vil anvende på vinylen, i det øverste felt, og bekræft ved at trykke på Gå ind. Du kan bruge et eget billede eller downloade det, der bruges i dette eksempel.
Du skal nu have noget, der ser sådan ud.
Rendering og eksport
Nu når pladespilleren er færdig, skal vi arbejde på den måde, den gengives på, før vi eksporterer den. Klik på Eksempel knappen øverst i egenskabsruden. Indstil zoomværdien til 200 for at vise pladespilleren større. For at fjerne de sorte kanter på figurerne skal du gå til Grænser sektion af ruden, og indstil opacitet til 0. Resultatet skal se sådan ud.
Vi ønsker, at pladespilleren lyser fra toppen. For at gøre dette skal du dreje scenen på en sådan måde, at toppen af pladespilleren vender mod dig. Basen skal se perfekt rektangulær ud. Ændring af lys og mørke værdier i tridiv.com/d/4k6 sektionen af egenskabsruden vil regenerere skyggerne inden for scenen. Skift lysværdien til 0.
Pladespilleren er nu klar til eksport!
Efterbehandling af logoet
Vi er klar til at føje teksten til logoet og oprette logo-animationen. Klik på Redigere på CodePen-knappen nederst til venstre på Eksempel visning for at eksportere koden til CodePen. Det er vigtigt at bemærke, at CSS-koden genereret af Tridiv ikke bruger leverandørpræfikser, så du bliver nødt til at bruge værktøjer som prefixr.com eller leaverou.github.io/prefixfree for at gøre koden funktionel i enhver browser. Start med at lukke JavaScript-ruden, da vi ikke vil bruge den. Fjern det stilkode, der er anvendt på HTML-ruden .scene div.
Udvid CSS-ruden, og tilføj følgende kode i slutningen:
.scene {transform: translateY (-140px) rotateX (-55deg); }
Her, den oversætY (-140px) bevæger pladespilleren 140 px opad og giver plads til teksten under den. Derefter rotateX (-55deg) indstiller pladespillerens lodrette hældning.
For at tilføje teksten skal du tilføje en .titel div lige efter åbningen #tridiv div i HTML-ruden. Indvendigt, tilføj to spænder> (.main-title og .sub-title), adskilt af hr />:
div id = "tridiv"> div> span> TRIDIV / span> hr /> span> RECORDS / span> / div>…
Du skal derefter anvende de korrekte skrifttyper og stilarter. Importér Open Sans-skrifttypen, der bruges i logoet i CSS-ruden, og tilføj de grundlæggende typografier til tekstelementerne.
@import url (http://fonts.googleapis.com/css?family=Open+Sans:300); / * Centrering af tekstblok + grundlæggende skrifttypestil * / titel {position: absolut; top: 50%; venstre: 50%; margen: 0 0 0 -165px; bredde: 330px; højde: 5 em; font-family: 'Open Sans', sans-serif; fontvægt: 300; skriftstørrelse: 24 pixel; tekstjustering: center; mellemrum mellem bogstaver: 1,5 em; farve: # 0099FF; } titel hr {border: 1px solid # fa7f7a; margen: .75em 0; } titel span {display: block; } .main-title {font-size: 2.15em; } .undertitel {tekstindryk: .25em; }
Voilà! Dit logo er komplet. Det skal se ud som billedet nedenfor. Når din 3D-model er færdig, kan du bruge kraften i CSS til at gøre det endnu bedre ved at tilføje stilarter, animationer eller musebegivenheder: behandl bare 3D-modellen som ethvert andet HTML-element.
Animer logoet
Se en animation ved hjælp af logoet her. Når delene af pladespilleren 'falder ind', deler hver af dem den samme keyframe-animation med forskellige forsinkelser. Formerne har den øverste attribut sat til 50%. For at skabe den faldende effekt animerer vi topattributten fra -400px til 50%:
@keyframes falder med {0% {top: -400px; } / * Vi starter animationen med at placere formen i en højde på 400px * / 100% {top: 50%; } / * så slutter vi det på dets oprindelige position * /}
Du kan tilføje denne animation til alle former som følger:
.form {top: -400px; animation: efterår 1s letter 0s fremad; }
Indstil topattributten til -400px og tilføj en forsinkelse:
.plade {animationsforsinkelse: 1.05s; } .disk {animationsforsinkelse: 1.35s; } .knap {animationsforsinkelse: 1,5 sek; } ...
Opret den endelige 'bounce'-effekt ved hjælp af rotereX attribut:
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); }
Sådan oprettede vi netop denne version, men husk: der er ingen grænser!
Ord: Julian Garnier
Denne artikel opstod oprindeligt i netmagasin nummer 248.
