# Animerad logotyp: enkla sätt att väcka en logga till liv [Canonical HTML page](https://gradiently.design/sv/guide/animated-logo) En logoanimation ska kännas som att loggan drar ett andetag, inte som att den kör ett nummer. Här är de få teknikerna som fungerar, och reglerna som håller dem smakfulla. ## The short version - En animerad logotyp är ett varumärkes logga med en kort rörelse, till exempel en uppenbarelse, en linje som ritar sig själv, delar som sätts ihop eller en färg som skiftar. - De flesta logoanimationer för intron och outron fungerar bäst på ungefär en till tre sekunder och slutar på exakt den statiska loggan. - En idé per animation räcker, och rörelsen ska passa varumärkets personlighet på samma sätt som dess färger och typsnitt gör. - Webbplatser kan animera logotyper med SVG och CSS eller med Lottie-filer, medan video behöver MP4, e-post behöver GIF och redigering behöver ett format med transparens. - Varje animerad logotyp behöver en statisk version, för små storlekar, tryck och personer som föredrar minskad rörelse. En **animerad logotyp** är din logga med en enda kort, genomtänkt rörelse: den avslöjar sig själv, ritar sina egna linjer, sätts ihop av sina delar, skiftar färg eller andas mjukt i en loop. De bästa är korta, oftast en till tre sekunder för ett intro, och de slutar alltid på exakt den logga folk redan känner igen. Tänk på det som att loggan anländer, inte uppträder. ## Fem sätt att animera en logga Nästan varje bra logoanimation är en av fem tekniker, ibland två i kombination. Välj den som passar din loggas form och varumärkets karaktär. | Teknik | Vad som händer | Passar | | --- | --- | --- | | Uppenbarelse | Loggan tonar in, sveps fram eller avtäcks | Alla loggor, det tryggaste valet | | Ritas fram | Linjer ritar sig själva och fylls sedan | Linjebaserade märken, monogram, signaturer | | Sätts ihop | Delar glider eller skalas på plats | Loggor som består av tydliga former | | Skifte | Färg eller en gradient vandrar genom loggan | Gradientloggor och kraftfulla ordmärken | | Viloloop | Ett diskret, ändlöst andande eller skimmer | Laddningslägen, scenskärmar, livesändningar | Börja med en uppenbarelse. Gå nedåt i listan först när loggans form ger dig en anledning. ## Regler som håller en logoanimation smakfull En logoanimation upprepas många gånger: i början av varje video, vid varje sidladdning, vid varje event. Allt som är lite för fyndigt blir snabbt tröttsamt. Återhållsamheten gör att folk kan njuta av den för hundrade gången. [Principer för motion design](https://gradiently.design/sv/guide/motion-design-principles) går djupare in på resonemanget. ### Undvik - Animationer som är längre än budskapet de inleder - Att snurra, studsa eller spränga loggan - Att sluta på en pose som inte är den riktiga loggan - Rörelse som motsäger varumärkets karaktär - Bara en version, utan statisk reserv ### Gör så - En till tre sekunder för intron och outron - En idé, rent utförd - Sluta på exakt den statiska loggan och håll den kvar - Lugna varumärken rör sig långsamt, livliga kan röra sig raskt - Ha en statisk logga för små storlekar och tryck Anpassa rörelsen efter varumärket på samma sätt som du anpassar färger och typsnitt. En advokatbyrås logga kan tona in under en sekund med en mjuk acceleration. En musikfestivals kan snappa på plats med lite överskjut. [Varumärkets personlighet](https://gradiently.design/sv/guide/brand-personality) hjälper dig att sätta ord på karaktären först, och [easing](https://gradiently.design/sv/guide/easing) förvandlar den till kurvor. ## Så gör du en logoanimation som ritas fram i SVG Effekten där loggan ritas fram bygger på ett smart knep i SVG. Ett streck kan ritas som streckade segment, och om ett segment är lika långt som hela banan kan du glida in det i bild genom att animera dess förskjutning. Sätter du `pathLength="1"` på banan blir matematiken enkel: banan räknas som en enhet lång, oavsett hur lång den egentligen är. ```html ``` Ett N-monogram som en enda bana. Det tillgängliga namnet stannar kvar på SVG:n oavsett vad animationen gör. ```css .draw { stroke-dasharray: 1; stroke-dashoffset: 1; /* hidden: the dash starts one full length away */ animation: draw 1.2s cubic-bezier(0.65, 0, 0.35, 1) forwards; } @keyframes draw { to { stroke-dashoffset: 0; } /* drawn */ } @media (prefers-reduced-motion: reduce) { .draw { animation: none; stroke-dashoffset: 0; } } ``` Linjen ritar sig själv på 1,2 sekunder med en mjuk in- och utfart, och dyker bara upp för besökare som föredrar minskad rörelse. ## Att animera en gradientlogotyp Gradientloggor har en rörelse inbyggd: låt färgen vandra. Ett långsamt skifte av gradienten genom ett ordmärke eller en ikon upplevs som ljus som rör sig över ytan, och formen står helt stilla, vilket är skonsamt för läsbarheten. Knepet för en ren loop är en gradient som slutar på den färg den börjar med, så att upprepningen inte får någon söm. Violett, rosa, violett: `linear-gradient(90deg, #6d28d9 0%, #db2777 50%, #6d28d9 100%)` En symmetrisk gradient. Glider den i sidled exakt sin egen bredd passar den ihop med sig själv, så att skimret loopar i evighet utan hopp. ```css .wordmark { background: linear-gradient(90deg, #6d28d9 0%, #db2777 50%, #6d28d9 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 6s linear infinite; } @keyframes shimmer { to { background-position: 200% 0; } } @media (prefers-reduced-motion: reduce) { .wordmark { animation: none; } } ``` Färgen vandrar genom bokstäverna var sjätte sekund, i konstant fart så att loopen aldrig tvekar. Gradienttext har sina egna regler för läsbarhet, se [gradienttext i CSS](https://gradiently.design/sv/guide/css-gradient-text). Och se till att loggan också finns i en enda platt färg, som [gradientloggor](https://gradiently.design/sv/guide/gradient-logo) förklarar. ## Hur lång en animerad logotyp ska vara - **Videointron och outron:** ungefär en till tre sekunder, och håll sedan den färdiga loggan kvar en stund. - **Webbplatsens sidhuvud:** spela en gång, snabbt, vid första besöket, aldrig vid varje sidbyte. - **Laddningslägen:** ett långsamt viloloop som inte ser otåligt ut. - **Scenskärmar och sändningar:** en mycket långsam loop, eftersom det kan vara i bild i timmar. Ordmärket Northlight centrerat på en bred gradientbakgrund, som slutbild i ett logointro Sista bilden i ett intro ska vara loggan exakt som den ser ut överallt annars, på varumärkets vanliga bakgrund. ## Vilket format du exporterar en animerad logotyp i | Där den spelas | Format | Anmärkningar | | --- | --- | --- | | Webbplats eller app | SVG med CSS, eller en Lottie-fil | Skarp i alla storlekar, små filer, kan respektera minskad rörelse | | Video för sociala medier | MP4 | Placeras på en bakgrund, ingen transparens behövs | | Videoredigering | Ett format med transparens, till exempel ProRes 4444 | Så att redigerare kan lägga den över valfritt material | | E-postsignatur eller nyhetsbrev | GIF | Håll den kort och liten, och första bilden ska vara hela loggan | | Presentationer | MP4, eller verktygets egen animation | Testa på den dator som ska visa den | Lottie är ett JSON-baserat animationsformat, ofta exporterat från After Effects, som spelas upp i webb- och appspelare. Mer om loopar och filtyper finns i [GIF eller MP4](https://gradiently.design/sv/guide/gif-vs-mp4). Och vad du än exporterar, para ihop den med en bakgrund som passar: en animerad logotyp över ett stilla, lugnt fält syns bättre än över rörigt material. [Att lägga en logotyp på en gradient](https://gradiently.design/sv/guide/logo-on-gradient-background) tar upp kontrast och placering. ## FAQ ### Hur lång ska en animerad logotyp vara? För videointron och outron ungefär en till tre sekunder, med avslut på den statiska loggan som hålls kvar en kort stund. Viloloop för skärmar kan vara längre och långsammare. ### Vilket är det enklaste sättet att animera en logotyp? En enkel uppenbarelse: en toning, svepning eller mask som avtäcker loggan på ungefär en sekund. Den fungerar för alla loggor och är svår att göra fel. ### Vilket format ska en animerad logotyp ha? SVG med CSS eller Lottie för webbplatser och appar, MP4 för video i sociala medier, ett format med transparens som ProRes 4444 för redigering och GIF för e-post. ### Hur får jag en logga att rita sig själv? Sätt pathLength till 1 på banan i SVG, ge den ett stroke-dasharray på 1 och animera stroke-dashoffset från 1 till 0. ### Behöver jag fortfarande en statisk logotyp? Ja. Små storlekar, tryck, favicons och personer som föredrar minskad rörelse behöver alla den statiska versionen, och varje animation ska sluta på den.