at appellere til din tegnefilm på nettet,,,,,, hvad du vil skabe,,, når vi taler om ved hjælp af informationstiltag, vi taler ofte om praktiske måder, hvorpå vi kan skabe overgange, tegnefilm osv.animation er en effektiv måde at få vores design stå ud, men snarere end at fokusere på, hvordan de enkelte animeringer arbejde, sådan som flere animeringer kombinere kan skabe noget endnu mere magtfulde.,, appel, de tolv grundlæggende principper for informationstiltag definerer "opfordring", som svarer til "udstråling i skuespiller."det er, hvordan den realisme, stil og substans animation, er at skabe en følelse af, at seere, finde en reel og interessant.,,,, en illusion af liv: disney animation, som de tolv grundlæggende principper for informationstiltag er fastlagt,,, det er en teknik, der anvendes til stor effekt på stribe.stribe, er betalinger processor, og stiller værktøjer til rådighed for indlejring betaling former i lokaliteter.disse formularer er kendt for at være smukt designet, navnlig deres anvendelse i en tegnefilm.i denne artikel, jeg vil drøfte, hvordan flere tegnefilm kan bruges til at skabe en virkning er mere end summen af delene, og viser, hvordan man kan anvende denne viden på en praktisk måde.,, sociale medier kort i dette eksempel, vi vil bruge animation at fremlægge en kort med oplysninger og links til websteder og andre sociale regnskaber.,,,,, når en trykke på knappen, vil det få en kort skal anføres med en vis, med muligheder.i stedet for at bruge en gammeldags modal vindue, vil vi bruge informationskampagne for at gøre det mere interessant,.,,, til at gøre det tiltrækkende, er der flere animeringer, der finder sted.de forskellige stykker levende og indføre hvert element i orden.dette hjælper med at forstå sammenhængen mellem, hvad de har presset og indholdet og rækkefølgen af tegnefilm, bidrager til at gøre øje til følge ikoner., om oprettelse:, til at begynde med, vi har brug for en knap til at presse og et kort til at vise.kortet skal være skjult, når indholdet er vist,.,, < knap klasse = "vis kort" > < img src = "http://avatars2.githubusercontent.com/u/853536?v = 3 & amp; s = 48 "> tryk her < /knap > < artikel klasse =" kort "> < afsnit klasse =" tæt på "> < perspektivgruppen version =" 1.1 "xmlns =" http://www.w3.org/2000/svg "xmlns - xlink =" http://www.w3.org/1999/xlink "bredde =" 14 "højde =" 14. "viewbox = 0 0 32" > < vej, d = "m31.708 25.708c-0-0-0-0-0-0l-9.708-9.708 9.708-9.708c0-0 0 - 0 0 - 0 0.105-0.105 0.18-0.227 0.229-0.357 0.133-0.356 0.057-0.771-0.229-1.057l-4.586-4.586c-0.286-0.286-0.702-0.361-1.057-0.229-0.13 0.048-0.252 0.124-0.357 0.228 0 0 - 0 0 - 0 0l-9.708 9.708-9.708-9.708c-0-0-0-0-0-0-0.105-0.104-0.227-0.18-0.357-0.228-0.356-0.133-0.771-0.057-1.057 0.229l-4.586 4.586c-0.286 0.286-0.361 0.702-0.229 1.057 0, 049 0,13 0.124 0.252 0.229 0357 0 0 0 0 0 0l9.708 9.708-9.708 9.708c-0 0 - 0 0 - 0 0-0.104 0.105-0.18 0.227-0.229 0.357-0.133 0.355-0.057 0.771 0.229 1.057l4.586 4.586c0.286 0.286 0.702 0.361 1.057 0.229 0.13-0.049 0.252-0.124 0.357-0.229 0 - 0 0 - 0 0-0l9.708-9.708 9.708 9.708c0 0 0 0 0 0 0 0.105 0.105 0.227 0357 0.229 0.356 0.133 0.771 0, 057 1.057-0.229l4.586-4.586c0.286-0.286 0.362-0.702 0.229-1.057-0.049-0.13-0.124-0.252-0.229-0.357z "fyld ="&#aaa "> < /vej > <. /perspektivgruppen > < /afsnit > < afsnit klasse =" oplysninger "> < h2 klasse =" navn "> donovan hutchinson < /h2 > < p - klassen =" beskrivelse "> donovan er dublin" med en lidenskab for baseret undtagen css, animation og gøre nettet sjovt. < /p > < /afsnit > < afsnit klasse = "headshot "> < img src =" http://avatars2.githubusercontent.com/u/853536?v=3&s=280"> </section> <section class="icon-bar"> <ul> <li> <a href="http://cssanimation.rocks"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32"> <path d="M32 19l-6-6v-9h-4v5l-6-6-16 16v1h4v10h10v-6h4v6h10v-10h4z" fill="#fff"></path> </svg> </a> </li> <li> <a href="http://twitter.com/cssanimation"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 - 32 "> < vej, d =" m32 6.076c-1.177 0.522-2.443 0.875-3.771 1.034 1.355-0.813 2.396-2.099 2.887-3.632-1.269 0.752-2.674 1.299-4.169 1.593-1.198-1.276-2.904-2.073-4.792-2.073-3.626 0-6.565 2.939-6.565 6.565 0 0.515 0.058 1. 016 0, 17 1.496-5.456-0.274-10.294-2.888-13.532-6.86-0.565 0.97-0.889 2.097-0.889 3.301 0 2.278 1.159 4.287 2.921 5.465-1.076-0.034-2.088-0.329-2.974-0.821-0.001 0.027-0.001 0.055-0.001 0, 083 0 3.181 2.263 5.834 5.266 6.437-0.551 0.15-1.131 0.23-1.73 0.23-0.423 0-0.834-0.041-1.235-0.118 0835 2.608 3.26 4.506 6.133 4.559-2.247 1.761-5.078 2.81-8.154 2.81-0.53 0-1.052-0.031-1.566-0.092 2.905 1.863 6.356 2,95 10.064 2,95 12.076 0 18.679-10.004 18.679-18.68 0-0.285-0.006-0.568-0.019-0.849 1.283-0.926 2.396-2. 082 3.276-3.398z "fyld ="&#fff "> < /vej > < /perspektivgruppen > < /a > < /li > < li > < en href =" http: //////////////github. kom /cssanimation "> < perspektivgruppen version =" 1.1 "xmlns =" http://www.w3.org/2000/svg "xmlns: xlink =" http://www.w3.org/1999/xlink "bredde = 32" højde = 32 "viewbox = 0 0 32" > < vej, d = "m0 17.388c0 1,45 0.136 2762 0.407 3.935s0.647 2.193 1.127 3.059 1.090 1.627 1.831 2.285c0.741 0.657 1.544 1.195 - 1.612s1.854 0.756 2.965 1.017c1.111 0, 261 0, 2.245 0.443 3.403 0.548s2.431 0.156 3.818 0.156c1.398 0 2.676-0.052 3.834-0.156s2.295-0.287 3.411-0.548 2.11-0.6 2.981-1.017c0.871-0.417 1.68-0.954 2.425-1.612s1.361-1.419 1.846-2.285 0.863-1.886 1.134-3.059c0.271-1.174 0.407-2.486 0.407-3.935 0-2.587-0.866-4.825-2.597-6.713 0.094-0.25 0.18-0.535 0.258-0.853s0.151-0.772 0.219-1.361c0.068-0.589 0.042-1.27-0.078-2.042s-0.342-1.56-0.665-2.363l-0.235-0.047c-0.167-0.031-0.441-0.023-0.822 0.024s-0.824 0.141-1.33 0.282c-0.506 0.141-1.158 0.412-1.956 0.814s-1.64 0.905-2.527 1.51c-1.523-0.417-3.615-0.626-6.275-0.626-2.65 0-4.736 0.209-6.259 0.626-0.887-0.605-1.734-1.108-2.543-1.51s-1.453-0.673-1.933-0.814c-0.48-0.141-0.928-0.232-1.346-0.274s-0.681-0.055-0.79-0.039-0.196 0.034-0.258 0.055c-0.323 0.803-0.545 1.591-0.665 2.363s-0.146 1.453-0.078 2.042 0.141 1.043 0219 1.361c0.078 0.318 0.164 0.602 0.258 0.853-1.732 1.888-2.598 4.126-2.598 6.713zm3.928 21.315c0-1.502 0.683-2.879 2.050-4.131 0.407-0.3760.881-0.66 1.424-0.853s1.155-0.302 1.839-0.329c0.683-0.026 1.338-0.021 1.964 0.016s1.398 0.086 2.316 0.149c0.918 063 1.711 0.094 2.379 0.094s1.46-0.031 2.378-0.094c0.918-0.063 1.69-0.112 2.316-0.149s1.28-0.042 1.964-0.016c0.683 0, 026 1.296 0.136 1.839 0.329s1.017 0.477 1.424 0.853c1.367. 1.231 2.050 2.608 2.050 4.131 0 0.897-0.112 1.693-0.337 2.386s-0.511 1.275-0.861 1.745-0.834 0.868-1.455 1.197c-0.621 0.329-1.226 0.582-1.815 0.759s-1.346 0.316-2.269 0.415c-0.923 0.099-1.747 0.159-2.472 0.18s-1.646 0.031-2.762 0.031-2.037-0.010-2.762-0.031c-0.725-0.021-1.549-0.081-2.472-0.18s-1.68-0.237-2.269-0.415c-0.589-0.177-1.194-0.43-1.815-0.759s-1.106-0.728-1.455-1.197c-0.349-0.469-0.636-1.051-0.861-1.745s-0.336-1.489-0.336-2.386zm20 21c0-1.657 0, 895-3 2-3s2 1.343 2 3c0 1.657-0.895 3 - 2 3s-2-1.343-2-3zm8 21c0-1.657 0.895-3 2-3s2 1.343 2 3c0 1.657-0.895 3 - 2 3s-2-1.343-2-3z "fyld ="&#fff "> < /vej > < /perspektivgruppen > < /a > < /li > < /afsnit > < /artikel >,, knappen er et billede og tekst.når presset, og det viser kortet.det består af fire dele; en knap, en nærmere i afsnit, foto og et ikon bar indeholder sociale ikoner.for eksempel, vi bruger i overensstemmelse perspektivgruppen ikoner taget fra entypo samling.,, klipning,, før jeg kommer til tegnefilm, lad os tilføje nogle stil til knap og kort. første, knap:,,. vis kort {baggrund:&#fff; grænseoverskridende radius: 4em; grænse: 0.25em fastfa756; farve:fa756; skriftstørrelsen: 18px; venstre: 50% overensstemmelse højde: 1.5; polstring: 1em 1em 1em 4em. position: absolut; top: 50% omdanne: omsætte (- 50% - 50%); udkast: ingen;}. vis kort img {grænse radius: 50% og venstre: 0.3em. position: absolutte, top. 0.25em; bredde: 3em;},,,,,,, har vi tilføjet en redegørelse: ingen;,,. vis kort, element, fordi nogle browsere tilføje en mærkelig glød til knapper fokus stater (hvilket vi ikkeikke):,,,,, så stil det kort og hvert af afsnittene i.,,. kort (nederst: calcium (50% - 8em) display: ingen. højde: 16em; tilbage: calcium (50% - 10em); position: absolut; overgangen: alle 0.4s bezier 0.4s., stk. 5, 2. 43,1.33); bredde: 20em;}. tæt (farve:&#aaa, markør: pointer, højde: 1em; uklarhed: 0; holdning: absolutte og ret: 0.5em; top: 0.5em; bredde: 1em; z-index: 10). nærmere oplysninger (holdning: absolut; nederst: 2.5em; baggrund:&#fff; grænseoverskridende radius: 0.25em. højde: 0; overløb: skjulte; tekst tilpasse: center; bredde: 20em;} navn (farve:ō og skrifttype vægt: dristige; margen: 3em 0 0; uklarhed: 0}. beskrivelse (farve:ʚ. font størrelse: 1em; skrifttype vægt: 200, linje højde: 1.5; margen: 0.75em 2em 2em; uklarhed: 0}. foto img {grænse radius: 50% grænse: 0.5em fast&#fff; display: blok. højde: 6em; margen: - 3em auto 0.5em; uklarhed: 0; bredde: 6em;}. ikon bar {baggrund:fa756; grænseoverskridende radius: 0.25em; tilbage: - 1em. position: absolut; ret: - 1em; top: 13em;}. ikon bar ul (display - flex, flex - kolonne, flex -: nowrap; polstring: 0}. ikon bar li {display: i overensstemmelse med blok; skriftstørrelsen: 2em; uklarhed: 0; polstring: 0 1em; bredde: 33%}. ikon bar en (farve:&#fff; tekst): ingen;}, bemærke, at vi sætter dette kort, display: intet, i første omgang.vi vil kontrollere dette efter javascript.,, grundlæggende vise og gemmer sig, i stedet for at dykke i at css, vil vi først etablere grundlæggende foranstaltninger for at vise og skjule kontaktoplysninger.This will make use of a little JavaScript (and in this case jQuery) to add and remove classes depending on what’s clicked:,,//Show the card on clicking the button $('.show-card').click(function(e) { $('.card').addClass('show').css('display', 'block'); $('.show-card').addClass('hide'); }); //Hide the card on clicking the "x" $('.card .close').click(function(e) { $('.card').css('display', 'none'); }); ,,We should now be able to show and hide the card using jQuery and the ,display, CSS property., ,See the basic show and hide example here:, , , ,Before Animating,,With the layout in place we need to add a few extra styles to hide the various elements so that we can animate them into view.,,.close, .name, .description,. foto img,. ikon bar li {uklarhed: 0} oplysninger (højde: 0}, disse elementer får en forsinkelse, før deres informationskampagne får virkning, så må være ude af syne i første omgang, grundlæggende animeringer, med den mekanisme, der skal vise og gem kortet kan vi begynde at lægge tegnefilm.det er en javascript ovenfor, viser, at kortet på vise, og vi kan knytte animeringer til denne klasse, der vil indføre de enkelte dele af det kort,.,, til at gøre det, vil vi bruge css, animation, ejendom og sæt, keyframes,.,, er det nyttigt at skabe generelle tegnefilm i css og genbruge dem.simpel animeringer, såsom svinder ind og ud, kan defineres og anvendes i mange forskellige steder.,, der viser, hvordan keyframes er defineret, lad os skabe blegne og fade ud animeringer.,, @ keyframes falme {0% {uklarhed: 0} 100% {uklarhed: 1}} @ keyframes fade ud (0% {uklarhed: 1} 100% {uklarhed: 0), keyframes er en række foranstaltninger, der defineres som procentsatser.de kan være en række skridt, men i vores eksempel vi kun fastsætte start (0%) og (100%) keyframes.i, i, begynder vi med nogen uklarhed (0) og i fuld opacitet (1).den falmer, animation har den modsatte virkning.,, vi kan bruge, animation, ejendomsret til at anvende disse fade animeringer til knap, når det er godtgjort, og skjult.,,. vis kort (animation: i 0.4s 1s fremad, lette;}. show-card.hide (animation: fade ud 0.4s fremad, lette;}, animation stenografi her siger kortet til at bruge det, forsvinder, animation, varig 0,4 sekunder med en 1 - sekunders forsinkelse.den informationskampagne vil spille en gang og stoppe ved udgangen (videre) og anvende, lette, timing funktion.,, når, skjule, klasse anvendes på knappen, forsvinde, animation får virkning., hoppe virkning timing funktion, den første del vil vi indføre ikon - bar.da dette er, hvor forbindelserne vil blive, vi ønsker, at det skal stå ud og være det første folk lægger mærke til, når gennemførelse af informationstiltag, vi kan skabe interessante virkninger ved hjælp af timingen funktion ejendom.i dette tilfælde skal vi bruge en,. bezier, timing funktion for at tilføje en "hop", når den ikon bar synes.,, først skal vi skabe nogle enkle keyframes har bar begynder i det små og vokse i højden, @ keyframes vise ikon bar (0% (højde: 0} 100% {højde: 4.5em;}}, kan vi nu anvende denne række keyframes til ikon, bar når, viser, at klasse er tilføjet til kort.,,. card.show. ikon bar (animation: vis ikon bar. 5s fremad. bezier (. 64,1.87, 64, 64)), den dansende virkning, der opstår ved brug af bezier, m3, timing funktion.timing funktioner beskriver de ændringer i hastighed ved hjælp af en informationskampagne, og kan være udformet således, at skyde den i begyndelsen eller slutningen af en informationskampagne.denne udvikling går lidt over, så retter, at skabe et hop.,, animation forsinkelse med ikonet bar indført, er vi nødt til at give næring til de afsnit, som indeholder de nærmere detaljer og cv.vi vil gerne have, at denne afdeling skal anføres efter ikon bar er blevet indført.for at opnå dette skal vi bruge, animation forsinkelse, ejendom,.,,. card.show. nærmere oplysninger (animation: vis detaljer beholder 0.7s 0.5s fremad. bezier (. 54 - 0, 38,. 34,1.42)}, animation, der anvendes til detaljer, afsnit, der vil få en varighed på 0, 7 sekunder og en forsinkelse på 0,5 sekunder.det betyder liv vil ikke begynde, før ikon bar er blevet indført. vi bruger også en kubisk bezier timing funktion her at give det en hoppe, næste vi definerer keyframes for beholderen er animation.,, @ keyframes viser detaljer container (0% (højde: 0} 100% {højde: 13.5em;}},,, vis detaljer container, animation keyframes begynder med beholderen usynlige med en højde på nul, og ansporer til fuld højde.den. bezier timing funktion, foretager derefter animation overskridelse lidt til at give det lidt pænt.,, der kombinerer flere animeringer, flere tegnefilm kan anvendes i en enkelt ejendom.så længe den tegnefilm ikke i modstrid med hinanden (ved at forsøge at give næring til den samme ejendom), de kan anvendes til at tilføje nuance i en tegnefilm.flere tegnefilm er defineret som fælles animeringer, men adskilt ved kommaer., i dette tilfælde vi vil forsvinde i det oplæg, navn og beskrivelse af indholdet, og samtidig ved hjælp af en far i funktion, at de ser ud til at komme fra en afstand,.,, hvis vi havde en fælles informationskampagne med slagvolumen bezier timing funktion, fade virkning synes at komme og se mærkeligt.i stedet får vi falmer brug en lineær timing funktion og zoom har kastet virkning.,, vi først definere, pop, pop keyframes.,, @ keyframes {0% {omdanne: skala (0,7)} 100% {omdanne: skala (1)), denne bruger, omfanget, omdanne for hvert element begynde mindre og omfang op til normal størrelse. lad os få fat i indholdet.hvert element har to animeringer, og hvert af de elementer, har en lidt længere animation forsinkelse til at forskyde deres udseende,.,,. card.show. foto img (animation: i 0.4s 1.2s fremad, pop i 0.6s 1.2s fremad. bezier (. 64,1.87, 64, 64)). card.show. navn (animation: i 0.3s 1.3s fremad, pop i 0.3s 1.3s fremad. bezier (. 64,1.87, 64, 64)). card.show. beskrivelse (animation: i 0.3s 1.4s fremad, pop i 0.3s 1.4s fremad. bezier (. 64,1.87, 64, 64)}, tæt ikon,,, luk ikon animation gør brug af, og i keyframes definerede vi tidligere.,,. card.show. luk (animation: i 0.3s 1.3s forwards}, opfordrer til handling, vi skal bare vise de billeder nu.ved fremlæggelsen af tegnefilm, det sidste animeret er seeren opmærksomhed vil ende.det betyder, at seerne øje vil følge informationstiltag og afslutte ser på billeder, vi vil gerne have dem til at vælge, vil vi igen anvende informationstiltagene forsinkelse ejendom for disse for at sikre, at de er indført.vi definerer keyframes af en informationskampagne for ikoner:,, @ keyframes vise ikon {0% {uklarhed: 0; omdanne: rotatez (- 40deg)} 100% {uklarhed: 1; omdanne: rotatez (0)}}, hver ikon vil dreje lidt som de blegner.nu kan vi tillægger denne informationskampagne til hver af de symboler, ved hjælp af en forsinkelse på hver til at fordele dem.,,. card.show. ikon bar li (animation: vis ikon 0.5s fremad. bezier (. 64,1.87, 64, 64)). card.show. ikon bar li: n - barn (1) (animation forsinkelse: 1.8s.}. card.show. ikon bar li: n - barn (2) (animation forsinkelse: 1.9s.}. card.show. ikon bar li: n - barn (3) (animation forsinkelse: 2s.}, tag dem alle sammen, og vi har nu et kort, der viser sig pænt, når dosisknappen er udvalgt. og en ting mere, før vi kan gøre, er vi nødt til at tilføje, at skjule, foranstaltninger til tæt på ret kort.først skal vi ajourføre javascript.om at trykke på ikon, javascript venter et øjeblik, før de fjerner de kort, display: ingen,.,, $(. vis kort). klik (funktion (e) ($(. kort). addclass ('show). css ('display ',' block '); $(. vis kort). addclass (gem)}); $(. kort. tæt på "). klik (funktion (e) ($(. kort). addclass (gem); settimeout (function() {$(. kort). css ('display", "ingen"). removeclass ('show'). removeclass (gem)}, 1000); $(. vis kort). removeclass (gem)}), det giver os en anden ret kort –, vi får det ned bunden.den keyframes at opnå dette, er som følger:,, @ keyframes fald kort {100% {nederst: - 100%; omdanne: rotatez (20deg); uklarhed: 0}}, vi så anvende dette som en informationskampagne til kort.,,. card.hide (animation: smid kortet er bezier fremad. (. 54 - 0, 38,. 34,1.42)}, demo, sætte det hele sammen, du kan se resultatet her.,,,, en bestemmelse om præfikser og browser forenelighed, tegnefilm, er støttet over browsere.afhængig af deres publikum, de skal arbejde i de fleste situationer.det er værd at sørge for, at de grundlæggende vise og skjule funktioner, arbejde og animation er tilføjet som en gradvis forbedring.,, smdrg., gennem anvendelse af flere animeringer, og især, animation forsinkelse, ejendom, vi har taget, hvad der kunne have været en meget enkel dims og gjort det mere tiltrækkende.informationstiltag guider seeren gennem hver af de elementer og retter dem mod de opfordringer til handling.,, animation, kan være en god måde at kommunikere i dit design.denne meddelelse hjælper besøgende forstår deres hensigter samt forbedre troværdighed og tillid til kvaliteten af deres arbejde.
