Animate

Animate lager og redigerer SVG-animasjoner med grupper av former og redigerbare baner. Bruk det til et bevegelig diagram eller en illustrasjon der du vil endre geometri og tidsinnstillinger. Det lagrer animasjonen i Organizer og kan laste ned SVG-, PNG- eller MP4-filer.

Åpne en animasjon

En ny animasjon har en tom Scene Root-gruppe på et lerret på 1280 × 720. Bruk AI Create til å legge til grafikk, og rediger deretter baner og tidsinnstillinger.

1. Åpne hurtigmenyen for Organizer eller målmappen, og velg Create → Animate.
2. Velg SVG Root for å åpne lerretsinnstillingene.
3. Utvid SVG Root for å se Scene Root og eventuelle grupper eller baner i en eksisterende animasjon.
4. Velg en gruppe eller bane for å undersøke den. Et sekvensspor vises under lerretet når elementet har en animasjon.

Lerret og editorkontroller

Velg SVG Root før du endrer lerretet. Dimensjonene beskriver det lagrede bildet. Zoom endrer bare hvor stort det vises i editoren.

SVG Root

Lerretet starter med Aspect Ratio → 16:9, Dimension → 1280x720 (HD) og Lock Aspect Ratio på. Bruk forhåndsvalgene nedenfor til en kvadratisk eller bred plassering.

• Aspect Ratio - 21:9, 16:9, 3:2, 4:3 eller 1:1. Forholdet justerer én dimensjon til den andre. Velg 1:1 for et kvadratisk kort.
• Dimension - En størrelse for valgt forhold. 21:9 tilbyr 640x272, 1024x435, 2560x1080 (Ultrawide HD), 3440x1440 (Ultrawide QHD), 5120x2160 (Ultrawide 5K). 16:9 tilbyr 640x360, 1280x720 (HD), 1920x1080 (Full HD), 2560x1440 (QHD), 3840x2160 (4K UHD). 3:2 tilbyr 720x480, 1080x720, 1440x960, 2160x1440, 3000x2000. 4:3 tilbyr 800x600, 1024x768, 1280x960, 1600x1200, 2048x1536. 1:1 tilbyr 500x500, 800x800, 1000x1000, 1500x1500, 2000x2000.
• Lock Aspect Ratio - Låsing av proporsjoner mens du skriver dimensjoner, er ikke tilgjengelig ennå. Slå av for å angi Width og Height uavhengig, eller bruk forhåndsvalgene Aspect Ratio og Dimension.
• Width, Height - Starter på 1280 og 720. Kontrollene viser 0–5000 med skyvetrinn på 10. Behold begge positive, slik at lerretet har et synlig område.

Naviger i editoren

Sidepanelknappen viser eller skjuler Elements. Utvid en gruppe for å se banene. Valg av et annet element fjerner forrige sekvens- eller nøkkelbildevalg.

Zoom starter på 100 %. Bruk minus eller pluss for å endre med 10 prosentpoeng, eller velg prosenttallet for å åpne Zoom. Bruk 10 % eller mer. Zoom endrer editorvisningen og beholder de lagrede lerretsdimensjonene. Play og innsetting av elementer fra tremenyen er ikke tilgjengelig ennå. Animasjoner kjører i forhåndsvisningen mens du redigerer.

Rediger grupper og baner

Grupper holder beslektede former samlet. En bane beskriver en form med SVG-kommandoer som Move To, Line To og Cubic Bezier Curve To. Velg gruppen for å flytte flere former sammen, eller banen for å endre omrisset.

Gruppeinnstillinger

Nye grupper har Use SVG Transform Attribute og Use CSS Transform av. Slå på representasjonen du trenger for å vise Scale X, Scale Y, Translate X og Translate Y. Eksisterende grafikk viser sine lagrede verdier.

Scale 1 beholder opprinnelig størrelse, og 2 dobler den. Translate flytter gruppen. Translate X 20 flytter den for eksempel 20 enheter vannrett. Link Scale starter av og endrer den andre skalaen proporsjonalt når det er på. Link Translate starter også av. Bruk translasjonsverdier som ikke er null før du kobler dem, og kontroller begge akser etter en endring. Når du slår av en transformasjonsrepresentasjon, fjernes verdiene dens.

Når en gruppe har underformer med posisjonskoordinater, flytter X og Y disse koordinatene sammen. De starter på gruppens gjeldende posisjon. Sammenlign forhåndsvisningen etter hver endring.

Baneinnstillinger

Raw Path viser den valgte banens lagrede kommandoer. Rediger den direkte eller bruk Path Commands til å endre tallparameterne for hver kommando. Kopieringsikonet ved Path Data (d attribute) kopierer baneteksten.

Convert to Absolute Path erstatter relative koordinater med absolutte og er deaktivert når banen allerede er absolutt. Shift Start Point bruker venstre/høyre-kontroller til å flytte startkommandoen rundt en lukket bane og er deaktivert for åpne baner. Shift Path Coordinates starter med x og y på 0. Angi en vannrett eller loddrett forskyvning, og velg Apply Shift for å flytte banens koordinater.

Linjalikonet åpner en egen baneforhåndsvisning. Copy Path kopierer gjeldende omriss, Clear Selection fjerner valg av kommandokort, og Done lukker den. Valg av kommandokort og kontrollene Apply X, Apply Y, justering og Straighten Curves er ikke tilgjengelige ennå i mindre editorvinduer. Bruk tallfeltene under Path Commands i hovedinspektøren til å redigere enkeltkoordinater.

Sekvens- og nøkkelbildeinnstillinger

En sekvens inneholder tidsinnstillingene og verdiene som endrer seg i en animasjon. Flere elementer kan bruke samme sekvens. Nye tomme dokumenter har ingen. Velg et eksisterende spor for å undersøke de lagrede verdiene.

Velg en nøkkelbildeprikk for å redigere Time i millisekunder fra sekvensstart. Verdien holdes mellom 0 og Duration. Opacity endrer synligheten: 0 er gjennomsiktig, og 1 er helt synlig. Tøm feltet når bildet ikke skal sette gjennomsiktighet. Transform godtar en transformasjonsstreng som translate(20px, 0px). Raw Path vises når nøkkelbildet endrer baneomrisset. Baneverktøyene der redigerer nøkkelbildets omriss, mens valg av baneelementet redigerer grunnomrisset. Andre nøkkelbilder beholder sine egne verdier.

• Name - Skrivebeskyttet sekvensnavn. Bruk det til å identifisere bevegelsen du redigerer.
• Duration - Lengde i millisekunder. 1000 er ett sekund, og 2000 er to sekunder. Økning beholder nøkkelbildenes tidspunkter. Flytt også siste nøkkelbilde når du forlenger en bevegelse. Forkorting begrenser senere bildetidspunkter til den nye slutten.
• Delay - Ventetid før bevegelsen i millisekunder. Et tomt felt betyr ingen forsinkelse. Bruk 500 for et halvt sekund.
• Iteration Count - Antall gjentakelser, for eksempel 2, eller Infinity for kontinuerlig gjentakelse i forhåndsvisningen.
• Timing Function - Tidskurve, for eksempel linear eller ease-in-out. Endre den for å styre hvordan bevegelsen akselererer.
• Relation Summary - Skrivebeskyttet tekst som viser hvor sekvensen brukes. Kontroller den før du endrer en sekvens som flere elementer deler.

Opprett eller endre med AI

AI Create bygger én SVG-scene med grupper og baner. AI Edit kan bruke valgt element, sekvens eller nøkkelbilde til å avgrense en endring. Den lagrede scenen endres når du bruker forslaget.

Pågående endringer lagres før forespørselen starter. Hold forespørselen til én scene med grupper, baner og animasjonstider. Synlig tekst, gradienter, filtre, masker, utklippsbaner, flere scener og produktgrensesnittskisser er utenfor det nåværende AI-omfanget. Du kan be om navngitte grupper så de blir enklere å velge senere. Navnene beholdes i treet.

1. Velg AI Create i et tomt dokument eller AI Edit i eksisterende grafikk.
2. For en endring velger du først elementet, sekvensen eller nøkkelbildet som skal endres.
3. Beskriv scenen eller endringen, og velg AI Create eller AI Edit i dialogen.
4. Les fremdriften og sammendraget av forslaget.
5. Velg Apply for å bruke forslaget, eller Discard for å beholde gjeldende dokument.

Lagre og last ned

Endringer lagres automatisk. Vent på Saved før du lukker dokumentet. Saving... betyr at lagring pågår. Save error betyr at siste endringer ikke er lagret. Behold dokumentet åpent mens du undersøker meldingen, særlig hvis en annen fane redigerte det.

Åpne menyen med pluss og nedoverpil for Download SVG, Download PNG eller Download MP4. SVG beholder vektorgrafikken. PNG er ett bilde. Størrelsesvelgeren endrer MP4-størrelse og starter på lerretets gjeldende forhåndsvalg. MP4 bruker største Delay + Duration blant alle sekvensene som klipplengde. Gjentakelser multipliserer ikke den eksporterte lengden. Kontroller klippet før du bruker det. Save as SVG er ikke tilgjengelig ennå.

Eksempler

Start med et lerretsforhåndsvalg, lag deretter en redigerbar formanimasjon og endre tidsinnstillingene. AI-resultater kan variere. Kontroller forslagets faktiske navn og verdier før du redigerer dem.

Forbered en kvadratisk illustrasjon

Bruk et kvadratisk lerret til en kortillustrasjon.

1. Opprett et Animate-element og velg SVG Root.
2. Velg Aspect Ratio → 1:1 og Dimension → 1000x1000.
3. Kontroller at Width og Height begge viser 1000, og vent på Saved.
4. Åpne dokumentet igjen for å kontrollere lagrede dimensjoner før du legger til grafikk.

Lag en formovergang og forleng den

En formovergang endrer ett baneomriss til et annet over tid. Bruk sekvensen og siste nøkkelbilde sammen for å styre hvor lang tid overgangen tar.

1. Velg AI Create i et tomt Animate-element og skriv Create a delayed circle morphing into a square.
2. Velg AI Create i dialogen og les sammendraget av forslaget. Velg Apply og kontroller deretter grafikken på lerretet.
3. Utvid gruppene og velg den animerte banen og deretter sekvenssporet.
4. Sett Duration til 2000. Velg siste nøkkelbilde og sett også Time til 2000.
5. Kontroller overgangen, se etter delt bruk i Relation Summary og vent på Saved.

I det syntetiske eksemplet hadde foreslått Morph Shape Path en sekvens på 1200 millisekunder. Endring av begge verdiene til 2000 forlenget overgangen til to sekunder.

Flytt en bane 20 enheter til høyre

Forskyv et statisk omriss uten å skrive om hver koordinat. For animerte omriss velger du nøkkelbildet som skal endres, fremfor å endre bare grunnbanen.

1. Velg banen. Hvis et nøkkelbilde fortsatt er valgt, velger du et annet element og går tilbake til banen.
2. Under Shift Path Coordinates skriver du x 20 og y 0.
3. Velg Apply Shift og kontroller Raw Path. Et startpunkt M 60 120 blir M 80 120.
4. Kontroller enkeltkoordinatene under Path Commands i hovedinspektøren. Åpne linjalforhåndsvisningen ved behov og velg deretter Done for å lukke.

Begrensninger og vanlige feil

• Kontroller Time og Duration når du endrer animasjonslengde. Begge bruker millisekunder.
• En delt sekvens endrer alle elementene som bruker den. Les Relation Summary før du redigerer.
• Banenøkkelbilder kan overstyre grunnomrisset. Rediger nøkkelbildet når det er den synlige formen du vil endre.
• Bruk forhåndsvalg for et presist lerretsforhold. Numerisk proporsjonslåsing er ikke tilgjengelig ennå.
• Zoom, åpne dialoger og valg i den separate baneeditoren varer i gjeldende økt. Når du åpner dokumentet igjen, gjenopprettes lagret grafikk og tidsinnstillinger.
• Kontroller MP4-lengden og det nedlastede resultatet når animasjonen har forsinkelser eller gjentatte sekvenser.

Relaterte artikler

• Image - generer bildefiler fra en ledetekst.
• Video - se status for planlagt videogenerering.
• Component - bygg en gjenbrukbar grensesnittdel.

Animate

Animate lager og redigerer SVG-animasjoner med grupper av former og redigerbare baner. Bruk det til et bevegelig diagram eller en illustrasjon der du vil endre geometri og tidsinnstillinger. Det lagrer animasjonen i Organizer og kan laste ned SVG-, PNG- eller MP4-filer.

Åpne en animasjon

En ny animasjon har en tom Scene Root-gruppe på et lerret på 1280 × 720. Bruk AI Create til å legge til grafikk, og rediger deretter baner og tidsinnstillinger.

1. Åpne hurtigmenyen for Organizer eller målmappen, og velg Create → Animate.
2. Velg SVG Root for å åpne lerretsinnstillingene.
3. Utvid SVG Root for å se Scene Root og eventuelle grupper eller baner i en eksisterende animasjon.
4. Velg en gruppe eller bane for å undersøke den. Et sekvensspor vises under lerretet når elementet har en animasjon.

Lerret og editorkontroller

Velg SVG Root før du endrer lerretet. Dimensjonene beskriver det lagrede bildet. Zoom endrer bare hvor stort det vises i editoren.

SVG Root

Lerretet starter med Aspect Ratio → 16:9, Dimension → 1280x720 (HD) og Lock Aspect Ratio på. Bruk forhåndsvalgene nedenfor til en kvadratisk eller bred plassering.

• Aspect Ratio - 21:9, 16:9, 3:2, 4:3 eller 1:1. Forholdet justerer én dimensjon til den andre. Velg 1:1 for et kvadratisk kort.
• Dimension - En størrelse for valgt forhold. 21:9 tilbyr 640x272, 1024x435, 2560x1080 (Ultrawide HD), 3440x1440 (Ultrawide QHD), 5120x2160 (Ultrawide 5K). 16:9 tilbyr 640x360, 1280x720 (HD), 1920x1080 (Full HD), 2560x1440 (QHD), 3840x2160 (4K UHD). 3:2 tilbyr 720x480, 1080x720, 1440x960, 2160x1440, 3000x2000. 4:3 tilbyr 800x600, 1024x768, 1280x960, 1600x1200, 2048x1536. 1:1 tilbyr 500x500, 800x800, 1000x1000, 1500x1500, 2000x2000.
• Lock Aspect Ratio - Låsing av proporsjoner mens du skriver dimensjoner, er ikke tilgjengelig ennå. Slå av for å angi Width og Height uavhengig, eller bruk forhåndsvalgene Aspect Ratio og Dimension.
• Width, Height - Starter på 1280 og 720. Kontrollene viser 0–5000 med skyvetrinn på 10. Behold begge positive, slik at lerretet har et synlig område.

Naviger i editoren

Sidepanelknappen viser eller skjuler Elements. Utvid en gruppe for å se banene. Valg av et annet element fjerner forrige sekvens- eller nøkkelbildevalg.

Zoom starter på 100 %. Bruk minus eller pluss for å endre med 10 prosentpoeng, eller velg prosenttallet for å åpne Zoom. Bruk 10 % eller mer. Zoom endrer editorvisningen og beholder de lagrede lerretsdimensjonene. Play og innsetting av elementer fra tremenyen er ikke tilgjengelig ennå. Animasjoner kjører i forhåndsvisningen mens du redigerer.

Rediger grupper og baner

Grupper holder beslektede former samlet. En bane beskriver en form med SVG-kommandoer som Move To, Line To og Cubic Bezier Curve To. Velg gruppen for å flytte flere former sammen, eller banen for å endre omrisset.

Gruppeinnstillinger

Nye grupper har Use SVG Transform Attribute og Use CSS Transform av. Slå på representasjonen du trenger for å vise Scale X, Scale Y, Translate X og Translate Y. Eksisterende grafikk viser sine lagrede verdier.

Scale 1 beholder opprinnelig størrelse, og 2 dobler den. Translate flytter gruppen. Translate X 20 flytter den for eksempel 20 enheter vannrett. Link Scale starter av og endrer den andre skalaen proporsjonalt når det er på. Link Translate starter også av. Bruk translasjonsverdier som ikke er null før du kobler dem, og kontroller begge akser etter en endring. Når du slår av en transformasjonsrepresentasjon, fjernes verdiene dens.

Når en gruppe har underformer med posisjonskoordinater, flytter X og Y disse koordinatene sammen. De starter på gruppens gjeldende posisjon. Sammenlign forhåndsvisningen etter hver endring.

Baneinnstillinger

Raw Path viser den valgte banens lagrede kommandoer. Rediger den direkte eller bruk Path Commands til å endre tallparameterne for hver kommando. Kopieringsikonet ved Path Data (d attribute) kopierer baneteksten.

Convert to Absolute Path erstatter relative koordinater med absolutte og er deaktivert når banen allerede er absolutt. Shift Start Point bruker venstre/høyre-kontroller til å flytte startkommandoen rundt en lukket bane og er deaktivert for åpne baner. Shift Path Coordinates starter med x og y på 0. Angi en vannrett eller loddrett forskyvning, og velg Apply Shift for å flytte banens koordinater.

Linjalikonet åpner en egen baneforhåndsvisning. Copy Path kopierer gjeldende omriss, Clear Selection fjerner valg av kommandokort, og Done lukker den. Valg av kommandokort og kontrollene Apply X, Apply Y, justering og Straighten Curves er ikke tilgjengelige ennå i mindre editorvinduer. Bruk tallfeltene under Path Commands i hovedinspektøren til å redigere enkeltkoordinater.

Sekvens- og nøkkelbildeinnstillinger

En sekvens inneholder tidsinnstillingene og verdiene som endrer seg i en animasjon. Flere elementer kan bruke samme sekvens. Nye tomme dokumenter har ingen. Velg et eksisterende spor for å undersøke de lagrede verdiene.

Velg en nøkkelbildeprikk for å redigere Time i millisekunder fra sekvensstart. Verdien holdes mellom 0 og Duration. Opacity endrer synligheten: 0 er gjennomsiktig, og 1 er helt synlig. Tøm feltet når bildet ikke skal sette gjennomsiktighet. Transform godtar en transformasjonsstreng som translate(20px, 0px). Raw Path vises når nøkkelbildet endrer baneomrisset. Baneverktøyene der redigerer nøkkelbildets omriss, mens valg av baneelementet redigerer grunnomrisset. Andre nøkkelbilder beholder sine egne verdier.

• Name - Skrivebeskyttet sekvensnavn. Bruk det til å identifisere bevegelsen du redigerer.
• Duration - Lengde i millisekunder. 1000 er ett sekund, og 2000 er to sekunder. Økning beholder nøkkelbildenes tidspunkter. Flytt også siste nøkkelbilde når du forlenger en bevegelse. Forkorting begrenser senere bildetidspunkter til den nye slutten.
• Delay - Ventetid før bevegelsen i millisekunder. Et tomt felt betyr ingen forsinkelse. Bruk 500 for et halvt sekund.
• Iteration Count - Antall gjentakelser, for eksempel 2, eller Infinity for kontinuerlig gjentakelse i forhåndsvisningen.
• Timing Function - Tidskurve, for eksempel linear eller ease-in-out. Endre den for å styre hvordan bevegelsen akselererer.
• Relation Summary - Skrivebeskyttet tekst som viser hvor sekvensen brukes. Kontroller den før du endrer en sekvens som flere elementer deler.

Opprett eller endre med AI

AI Create bygger én SVG-scene med grupper og baner. AI Edit kan bruke valgt element, sekvens eller nøkkelbilde til å avgrense en endring. Den lagrede scenen endres når du bruker forslaget.

Pågående endringer lagres før forespørselen starter. Hold forespørselen til én scene med grupper, baner og animasjonstider. Synlig tekst, gradienter, filtre, masker, utklippsbaner, flere scener og produktgrensesnittskisser er utenfor det nåværende AI-omfanget. Du kan be om navngitte grupper så de blir enklere å velge senere. Navnene beholdes i treet.

1. Velg AI Create i et tomt dokument eller AI Edit i eksisterende grafikk.
2. For en endring velger du først elementet, sekvensen eller nøkkelbildet som skal endres.
3. Beskriv scenen eller endringen, og velg AI Create eller AI Edit i dialogen.
4. Les fremdriften og sammendraget av forslaget.
5. Velg Apply for å bruke forslaget, eller Discard for å beholde gjeldende dokument.

Lagre og last ned

Endringer lagres automatisk. Vent på Saved før du lukker dokumentet. Saving... betyr at lagring pågår. Save error betyr at siste endringer ikke er lagret. Behold dokumentet åpent mens du undersøker meldingen, særlig hvis en annen fane redigerte det.

Åpne menyen med pluss og nedoverpil for Download SVG, Download PNG eller Download MP4. SVG beholder vektorgrafikken. PNG er ett bilde. Størrelsesvelgeren endrer MP4-størrelse og starter på lerretets gjeldende forhåndsvalg. MP4 bruker største Delay + Duration blant alle sekvensene som klipplengde. Gjentakelser multipliserer ikke den eksporterte lengden. Kontroller klippet før du bruker det. Save as SVG er ikke tilgjengelig ennå.

Eksempler

Start med et lerretsforhåndsvalg, lag deretter en redigerbar formanimasjon og endre tidsinnstillingene. AI-resultater kan variere. Kontroller forslagets faktiske navn og verdier før du redigerer dem.

Forbered en kvadratisk illustrasjon

Bruk et kvadratisk lerret til en kortillustrasjon.

1. Opprett et Animate-element og velg SVG Root.
2. Velg Aspect Ratio → 1:1 og Dimension → 1000x1000.
3. Kontroller at Width og Height begge viser 1000, og vent på Saved.
4. Åpne dokumentet igjen for å kontrollere lagrede dimensjoner før du legger til grafikk.

Lag en formovergang og forleng den

En formovergang endrer ett baneomriss til et annet over tid. Bruk sekvensen og siste nøkkelbilde sammen for å styre hvor lang tid overgangen tar.

1. Velg AI Create i et tomt Animate-element og skriv Create a delayed circle morphing into a square.
2. Velg AI Create i dialogen og les sammendraget av forslaget. Velg Apply og kontroller deretter grafikken på lerretet.
3. Utvid gruppene og velg den animerte banen og deretter sekvenssporet.
4. Sett Duration til 2000. Velg siste nøkkelbilde og sett også Time til 2000.
5. Kontroller overgangen, se etter delt bruk i Relation Summary og vent på Saved.

I det syntetiske eksemplet hadde foreslått Morph Shape Path en sekvens på 1200 millisekunder. Endring av begge verdiene til 2000 forlenget overgangen til to sekunder.

Flytt en bane 20 enheter til høyre

Forskyv et statisk omriss uten å skrive om hver koordinat. For animerte omriss velger du nøkkelbildet som skal endres, fremfor å endre bare grunnbanen.

1. Velg banen. Hvis et nøkkelbilde fortsatt er valgt, velger du et annet element og går tilbake til banen.
2. Under Shift Path Coordinates skriver du x 20 og y 0.
3. Velg Apply Shift og kontroller Raw Path. Et startpunkt M 60 120 blir M 80 120.
4. Kontroller enkeltkoordinatene under Path Commands i hovedinspektøren. Åpne linjalforhåndsvisningen ved behov og velg deretter Done for å lukke.

Begrensninger og vanlige feil

• Kontroller Time og Duration når du endrer animasjonslengde. Begge bruker millisekunder.
• En delt sekvens endrer alle elementene som bruker den. Les Relation Summary før du redigerer.
• Banenøkkelbilder kan overstyre grunnomrisset. Rediger nøkkelbildet når det er den synlige formen du vil endre.
• Bruk forhåndsvalg for et presist lerretsforhold. Numerisk proporsjonslåsing er ikke tilgjengelig ennå.
• Zoom, åpne dialoger og valg i den separate baneeditoren varer i gjeldende økt. Når du åpner dokumentet igjen, gjenopprettes lagret grafikk og tidsinnstillinger.
• Kontroller MP4-lengden og det nedlastede resultatet når animasjonen har forsinkelser eller gjentatte sekvenser.

Relaterte artikler

• Image - generer bildefiler fra en ledetekst.
• Video - se status for planlagt videogenerering.
• Component - bygg en gjenbrukbar grensesnittdel.

Animate

Animate lager og redigerer SVG-animasjoner med grupper av former og redigerbare baner. Bruk det til et bevegelig diagram eller en illustrasjon der du vil endre geometri og tidsinnstillinger. Det lagrer animasjonen i Organizer og kan laste ned SVG-, PNG- eller MP4-filer.

Åpne en animasjon

En ny animasjon har en tom Scene Root-gruppe på et lerret på 1280 × 720. Bruk AI Create til å legge til grafikk, og rediger deretter baner og tidsinnstillinger.

1. Åpne hurtigmenyen for Organizer eller målmappen, og velg Create → Animate.
2. Velg SVG Root for å åpne lerretsinnstillingene.
3. Utvid SVG Root for å se Scene Root og eventuelle grupper eller baner i en eksisterende animasjon.
4. Velg en gruppe eller bane for å undersøke den. Et sekvensspor vises under lerretet når elementet har en animasjon.

Lerret og editorkontroller

Velg SVG Root før du endrer lerretet. Dimensjonene beskriver det lagrede bildet. Zoom endrer bare hvor stort det vises i editoren.

SVG Root

Lerretet starter med Aspect Ratio → 16:9, Dimension → 1280x720 (HD) og Lock Aspect Ratio på. Bruk forhåndsvalgene nedenfor til en kvadratisk eller bred plassering.

• Aspect Ratio - 21:9, 16:9, 3:2, 4:3 eller 1:1. Forholdet justerer én dimensjon til den andre. Velg 1:1 for et kvadratisk kort.
• Dimension - En størrelse for valgt forhold. 21:9 tilbyr 640x272, 1024x435, 2560x1080 (Ultrawide HD), 3440x1440 (Ultrawide QHD), 5120x2160 (Ultrawide 5K). 16:9 tilbyr 640x360, 1280x720 (HD), 1920x1080 (Full HD), 2560x1440 (QHD), 3840x2160 (4K UHD). 3:2 tilbyr 720x480, 1080x720, 1440x960, 2160x1440, 3000x2000. 4:3 tilbyr 800x600, 1024x768, 1280x960, 1600x1200, 2048x1536. 1:1 tilbyr 500x500, 800x800, 1000x1000, 1500x1500, 2000x2000.
• Lock Aspect Ratio - Låsing av proporsjoner mens du skriver dimensjoner, er ikke tilgjengelig ennå. Slå av for å angi Width og Height uavhengig, eller bruk forhåndsvalgene Aspect Ratio og Dimension.
• Width, Height - Starter på 1280 og 720. Kontrollene viser 0–5000 med skyvetrinn på 10. Behold begge positive, slik at lerretet har et synlig område.

Naviger i editoren

Sidepanelknappen viser eller skjuler Elements. Utvid en gruppe for å se banene. Valg av et annet element fjerner forrige sekvens- eller nøkkelbildevalg.

Zoom starter på 100 %. Bruk minus eller pluss for å endre med 10 prosentpoeng, eller velg prosenttallet for å åpne Zoom. Bruk 10 % eller mer. Zoom endrer editorvisningen og beholder de lagrede lerretsdimensjonene. Play og innsetting av elementer fra tremenyen er ikke tilgjengelig ennå. Animasjoner kjører i forhåndsvisningen mens du redigerer.

Rediger grupper og baner

Grupper holder beslektede former samlet. En bane beskriver en form med SVG-kommandoer som Move To, Line To og Cubic Bezier Curve To. Velg gruppen for å flytte flere former sammen, eller banen for å endre omrisset.

Gruppeinnstillinger

Nye grupper har Use SVG Transform Attribute og Use CSS Transform av. Slå på representasjonen du trenger for å vise Scale X, Scale Y, Translate X og Translate Y. Eksisterende grafikk viser sine lagrede verdier.

Scale 1 beholder opprinnelig størrelse, og 2 dobler den. Translate flytter gruppen. Translate X 20 flytter den for eksempel 20 enheter vannrett. Link Scale starter av og endrer den andre skalaen proporsjonalt når det er på. Link Translate starter også av. Bruk translasjonsverdier som ikke er null før du kobler dem, og kontroller begge akser etter en endring. Når du slår av en transformasjonsrepresentasjon, fjernes verdiene dens.

Når en gruppe har underformer med posisjonskoordinater, flytter X og Y disse koordinatene sammen. De starter på gruppens gjeldende posisjon. Sammenlign forhåndsvisningen etter hver endring.

Baneinnstillinger

Raw Path viser den valgte banens lagrede kommandoer. Rediger den direkte eller bruk Path Commands til å endre tallparameterne for hver kommando. Kopieringsikonet ved Path Data (d attribute) kopierer baneteksten.

Convert to Absolute Path erstatter relative koordinater med absolutte og er deaktivert når banen allerede er absolutt. Shift Start Point bruker venstre/høyre-kontroller til å flytte startkommandoen rundt en lukket bane og er deaktivert for åpne baner. Shift Path Coordinates starter med x og y på 0. Angi en vannrett eller loddrett forskyvning, og velg Apply Shift for å flytte banens koordinater.

Linjalikonet åpner en egen baneforhåndsvisning. Copy Path kopierer gjeldende omriss, Clear Selection fjerner valg av kommandokort, og Done lukker den. Valg av kommandokort og kontrollene Apply X, Apply Y, justering og Straighten Curves er ikke tilgjengelige ennå i mindre editorvinduer. Bruk tallfeltene under Path Commands i hovedinspektøren til å redigere enkeltkoordinater.

Sekvens- og nøkkelbildeinnstillinger

En sekvens inneholder tidsinnstillingene og verdiene som endrer seg i en animasjon. Flere elementer kan bruke samme sekvens. Nye tomme dokumenter har ingen. Velg et eksisterende spor for å undersøke de lagrede verdiene.

Velg en nøkkelbildeprikk for å redigere Time i millisekunder fra sekvensstart. Verdien holdes mellom 0 og Duration. Opacity endrer synligheten: 0 er gjennomsiktig, og 1 er helt synlig. Tøm feltet når bildet ikke skal sette gjennomsiktighet. Transform godtar en transformasjonsstreng som translate(20px, 0px). Raw Path vises når nøkkelbildet endrer baneomrisset. Baneverktøyene der redigerer nøkkelbildets omriss, mens valg av baneelementet redigerer grunnomrisset. Andre nøkkelbilder beholder sine egne verdier.

• Name - Skrivebeskyttet sekvensnavn. Bruk det til å identifisere bevegelsen du redigerer.
• Duration - Lengde i millisekunder. 1000 er ett sekund, og 2000 er to sekunder. Økning beholder nøkkelbildenes tidspunkter. Flytt også siste nøkkelbilde når du forlenger en bevegelse. Forkorting begrenser senere bildetidspunkter til den nye slutten.
• Delay - Ventetid før bevegelsen i millisekunder. Et tomt felt betyr ingen forsinkelse. Bruk 500 for et halvt sekund.
• Iteration Count - Antall gjentakelser, for eksempel 2, eller Infinity for kontinuerlig gjentakelse i forhåndsvisningen.
• Timing Function - Tidskurve, for eksempel linear eller ease-in-out. Endre den for å styre hvordan bevegelsen akselererer.
• Relation Summary - Skrivebeskyttet tekst som viser hvor sekvensen brukes. Kontroller den før du endrer en sekvens som flere elementer deler.

Opprett eller endre med AI

AI Create bygger én SVG-scene med grupper og baner. AI Edit kan bruke valgt element, sekvens eller nøkkelbilde til å avgrense en endring. Den lagrede scenen endres når du bruker forslaget.

Pågående endringer lagres før forespørselen starter. Hold forespørselen til én scene med grupper, baner og animasjonstider. Synlig tekst, gradienter, filtre, masker, utklippsbaner, flere scener og produktgrensesnittskisser er utenfor det nåværende AI-omfanget. Du kan be om navngitte grupper så de blir enklere å velge senere. Navnene beholdes i treet.

1. Velg AI Create i et tomt dokument eller AI Edit i eksisterende grafikk.
2. For en endring velger du først elementet, sekvensen eller nøkkelbildet som skal endres.
3. Beskriv scenen eller endringen, og velg AI Create eller AI Edit i dialogen.
4. Les fremdriften og sammendraget av forslaget.
5. Velg Apply for å bruke forslaget, eller Discard for å beholde gjeldende dokument.

Lagre og last ned

Endringer lagres automatisk. Vent på Saved før du lukker dokumentet. Saving... betyr at lagring pågår. Save error betyr at siste endringer ikke er lagret. Behold dokumentet åpent mens du undersøker meldingen, særlig hvis en annen fane redigerte det.

Åpne menyen med pluss og nedoverpil for Download SVG, Download PNG eller Download MP4. SVG beholder vektorgrafikken. PNG er ett bilde. Størrelsesvelgeren endrer MP4-størrelse og starter på lerretets gjeldende forhåndsvalg. MP4 bruker største Delay + Duration blant alle sekvensene som klipplengde. Gjentakelser multipliserer ikke den eksporterte lengden. Kontroller klippet før du bruker det. Save as SVG er ikke tilgjengelig ennå.

Eksempler

Start med et lerretsforhåndsvalg, lag deretter en redigerbar formanimasjon og endre tidsinnstillingene. AI-resultater kan variere. Kontroller forslagets faktiske navn og verdier før du redigerer dem.

Forbered en kvadratisk illustrasjon

Bruk et kvadratisk lerret til en kortillustrasjon.

1. Opprett et Animate-element og velg SVG Root.
2. Velg Aspect Ratio → 1:1 og Dimension → 1000x1000.
3. Kontroller at Width og Height begge viser 1000, og vent på Saved.
4. Åpne dokumentet igjen for å kontrollere lagrede dimensjoner før du legger til grafikk.

Lag en formovergang og forleng den

En formovergang endrer ett baneomriss til et annet over tid. Bruk sekvensen og siste nøkkelbilde sammen for å styre hvor lang tid overgangen tar.

1. Velg AI Create i et tomt Animate-element og skriv Create a delayed circle morphing into a square.
2. Velg AI Create i dialogen og les sammendraget av forslaget. Velg Apply og kontroller deretter grafikken på lerretet.
3. Utvid gruppene og velg den animerte banen og deretter sekvenssporet.
4. Sett Duration til 2000. Velg siste nøkkelbilde og sett også Time til 2000.
5. Kontroller overgangen, se etter delt bruk i Relation Summary og vent på Saved.

I det syntetiske eksemplet hadde foreslått Morph Shape Path en sekvens på 1200 millisekunder. Endring av begge verdiene til 2000 forlenget overgangen til to sekunder.

Flytt en bane 20 enheter til høyre

Forskyv et statisk omriss uten å skrive om hver koordinat. For animerte omriss velger du nøkkelbildet som skal endres, fremfor å endre bare grunnbanen.

1. Velg banen. Hvis et nøkkelbilde fortsatt er valgt, velger du et annet element og går tilbake til banen.
2. Under Shift Path Coordinates skriver du x 20 og y 0.
3. Velg Apply Shift og kontroller Raw Path. Et startpunkt M 60 120 blir M 80 120.
4. Kontroller enkeltkoordinatene under Path Commands i hovedinspektøren. Åpne linjalforhåndsvisningen ved behov og velg deretter Done for å lukke.

Begrensninger og vanlige feil

• Kontroller Time og Duration når du endrer animasjonslengde. Begge bruker millisekunder.
• En delt sekvens endrer alle elementene som bruker den. Les Relation Summary før du redigerer.
• Banenøkkelbilder kan overstyre grunnomrisset. Rediger nøkkelbildet når det er den synlige formen du vil endre.
• Bruk forhåndsvalg for et presist lerretsforhold. Numerisk proporsjonslåsing er ikke tilgjengelig ennå.
• Zoom, åpne dialoger og valg i den separate baneeditoren varer i gjeldende økt. Når du åpner dokumentet igjen, gjenopprettes lagret grafikk og tidsinnstillinger.
• Kontroller MP4-lengden og det nedlastede resultatet når animasjonen har forsinkelser eller gjentatte sekvenser.

Relaterte artikler

• Image - generer bildefiler fra en ledetekst.
• Video - se status for planlagt videogenerering.
• Component - bygg en gjenbrukbar grensesnittdel.

Animate

Animate lager og redigerer SVG-animasjoner med grupper av former og redigerbare baner. Bruk det til et bevegelig diagram eller en illustrasjon der du vil endre geometri og tidsinnstillinger. Det lagrer animasjonen i Organizer og kan laste ned SVG-, PNG- eller MP4-filer.

Åpne en animasjon

En ny animasjon har en tom Scene Root-gruppe på et lerret på 1280 × 720. Bruk AI Create til å legge til grafikk, og rediger deretter baner og tidsinnstillinger.

1. Åpne hurtigmenyen for Organizer eller målmappen, og velg Create → Animate.
2. Velg SVG Root for å åpne lerretsinnstillingene.
3. Utvid SVG Root for å se Scene Root og eventuelle grupper eller baner i en eksisterende animasjon.
4. Velg en gruppe eller bane for å undersøke den. Et sekvensspor vises under lerretet når elementet har en animasjon.

Lerret og editorkontroller

Velg SVG Root før du endrer lerretet. Dimensjonene beskriver det lagrede bildet. Zoom endrer bare hvor stort det vises i editoren.

SVG Root

Lerretet starter med Aspect Ratio → 16:9, Dimension → 1280x720 (HD) og Lock Aspect Ratio på. Bruk forhåndsvalgene nedenfor til en kvadratisk eller bred plassering.

• Aspect Ratio - 21:9, 16:9, 3:2, 4:3 eller 1:1. Forholdet justerer én dimensjon til den andre. Velg 1:1 for et kvadratisk kort.
• Dimension - En størrelse for valgt forhold. 21:9 tilbyr 640x272, 1024x435, 2560x1080 (Ultrawide HD), 3440x1440 (Ultrawide QHD), 5120x2160 (Ultrawide 5K). 16:9 tilbyr 640x360, 1280x720 (HD), 1920x1080 (Full HD), 2560x1440 (QHD), 3840x2160 (4K UHD). 3:2 tilbyr 720x480, 1080x720, 1440x960, 2160x1440, 3000x2000. 4:3 tilbyr 800x600, 1024x768, 1280x960, 1600x1200, 2048x1536. 1:1 tilbyr 500x500, 800x800, 1000x1000, 1500x1500, 2000x2000.
• Lock Aspect Ratio - Låsing av proporsjoner mens du skriver dimensjoner, er ikke tilgjengelig ennå. Slå av for å angi Width og Height uavhengig, eller bruk forhåndsvalgene Aspect Ratio og Dimension.
• Width, Height - Starter på 1280 og 720. Kontrollene viser 0–5000 med skyvetrinn på 10. Behold begge positive, slik at lerretet har et synlig område.

Naviger i editoren

Sidepanelknappen viser eller skjuler Elements. Utvid en gruppe for å se banene. Valg av et annet element fjerner forrige sekvens- eller nøkkelbildevalg.

Zoom starter på 100 %. Bruk minus eller pluss for å endre med 10 prosentpoeng, eller velg prosenttallet for å åpne Zoom. Bruk 10 % eller mer. Zoom endrer editorvisningen og beholder de lagrede lerretsdimensjonene. Play og innsetting av elementer fra tremenyen er ikke tilgjengelig ennå. Animasjoner kjører i forhåndsvisningen mens du redigerer.

Rediger grupper og baner

Grupper holder beslektede former samlet. En bane beskriver en form med SVG-kommandoer som Move To, Line To og Cubic Bezier Curve To. Velg gruppen for å flytte flere former sammen, eller banen for å endre omrisset.

Gruppeinnstillinger

Nye grupper har Use SVG Transform Attribute og Use CSS Transform av. Slå på representasjonen du trenger for å vise Scale X, Scale Y, Translate X og Translate Y. Eksisterende grafikk viser sine lagrede verdier.

Scale 1 beholder opprinnelig størrelse, og 2 dobler den. Translate flytter gruppen. Translate X 20 flytter den for eksempel 20 enheter vannrett. Link Scale starter av og endrer den andre skalaen proporsjonalt når det er på. Link Translate starter også av. Bruk translasjonsverdier som ikke er null før du kobler dem, og kontroller begge akser etter en endring. Når du slår av en transformasjonsrepresentasjon, fjernes verdiene dens.

Når en gruppe har underformer med posisjonskoordinater, flytter X og Y disse koordinatene sammen. De starter på gruppens gjeldende posisjon. Sammenlign forhåndsvisningen etter hver endring.

Baneinnstillinger

Raw Path viser den valgte banens lagrede kommandoer. Rediger den direkte eller bruk Path Commands til å endre tallparameterne for hver kommando. Kopieringsikonet ved Path Data (d attribute) kopierer baneteksten.

Convert to Absolute Path erstatter relative koordinater med absolutte og er deaktivert når banen allerede er absolutt. Shift Start Point bruker venstre/høyre-kontroller til å flytte startkommandoen rundt en lukket bane og er deaktivert for åpne baner. Shift Path Coordinates starter med x og y på 0. Angi en vannrett eller loddrett forskyvning, og velg Apply Shift for å flytte banens koordinater.

Linjalikonet åpner en egen baneforhåndsvisning. Copy Path kopierer gjeldende omriss, Clear Selection fjerner valg av kommandokort, og Done lukker den. Valg av kommandokort og kontrollene Apply X, Apply Y, justering og Straighten Curves er ikke tilgjengelige ennå i mindre editorvinduer. Bruk tallfeltene under Path Commands i hovedinspektøren til å redigere enkeltkoordinater.

Sekvens- og nøkkelbildeinnstillinger

En sekvens inneholder tidsinnstillingene og verdiene som endrer seg i en animasjon. Flere elementer kan bruke samme sekvens. Nye tomme dokumenter har ingen. Velg et eksisterende spor for å undersøke de lagrede verdiene.

Velg en nøkkelbildeprikk for å redigere Time i millisekunder fra sekvensstart. Verdien holdes mellom 0 og Duration. Opacity endrer synligheten: 0 er gjennomsiktig, og 1 er helt synlig. Tøm feltet når bildet ikke skal sette gjennomsiktighet. Transform godtar en transformasjonsstreng som translate(20px, 0px). Raw Path vises når nøkkelbildet endrer baneomrisset. Baneverktøyene der redigerer nøkkelbildets omriss, mens valg av baneelementet redigerer grunnomrisset. Andre nøkkelbilder beholder sine egne verdier.

• Name - Skrivebeskyttet sekvensnavn. Bruk det til å identifisere bevegelsen du redigerer.
• Duration - Lengde i millisekunder. 1000 er ett sekund, og 2000 er to sekunder. Økning beholder nøkkelbildenes tidspunkter. Flytt også siste nøkkelbilde når du forlenger en bevegelse. Forkorting begrenser senere bildetidspunkter til den nye slutten.
• Delay - Ventetid før bevegelsen i millisekunder. Et tomt felt betyr ingen forsinkelse. Bruk 500 for et halvt sekund.
• Iteration Count - Antall gjentakelser, for eksempel 2, eller Infinity for kontinuerlig gjentakelse i forhåndsvisningen.
• Timing Function - Tidskurve, for eksempel linear eller ease-in-out. Endre den for å styre hvordan bevegelsen akselererer.
• Relation Summary - Skrivebeskyttet tekst som viser hvor sekvensen brukes. Kontroller den før du endrer en sekvens som flere elementer deler.

Opprett eller endre med AI

AI Create bygger én SVG-scene med grupper og baner. AI Edit kan bruke valgt element, sekvens eller nøkkelbilde til å avgrense en endring. Den lagrede scenen endres når du bruker forslaget.

Pågående endringer lagres før forespørselen starter. Hold forespørselen til én scene med grupper, baner og animasjonstider. Synlig tekst, gradienter, filtre, masker, utklippsbaner, flere scener og produktgrensesnittskisser er utenfor det nåværende AI-omfanget. Du kan be om navngitte grupper så de blir enklere å velge senere. Navnene beholdes i treet.

1. Velg AI Create i et tomt dokument eller AI Edit i eksisterende grafikk.
2. For en endring velger du først elementet, sekvensen eller nøkkelbildet som skal endres.
3. Beskriv scenen eller endringen, og velg AI Create eller AI Edit i dialogen.
4. Les fremdriften og sammendraget av forslaget.
5. Velg Apply for å bruke forslaget, eller Discard for å beholde gjeldende dokument.

Lagre og last ned

Endringer lagres automatisk. Vent på Saved før du lukker dokumentet. Saving... betyr at lagring pågår. Save error betyr at siste endringer ikke er lagret. Behold dokumentet åpent mens du undersøker meldingen, særlig hvis en annen fane redigerte det.

Åpne menyen med pluss og nedoverpil for Download SVG, Download PNG eller Download MP4. SVG beholder vektorgrafikken. PNG er ett bilde. Størrelsesvelgeren endrer MP4-størrelse og starter på lerretets gjeldende forhåndsvalg. MP4 bruker største Delay + Duration blant alle sekvensene som klipplengde. Gjentakelser multipliserer ikke den eksporterte lengden. Kontroller klippet før du bruker det. Save as SVG er ikke tilgjengelig ennå.

Eksempler

Start med et lerretsforhåndsvalg, lag deretter en redigerbar formanimasjon og endre tidsinnstillingene. AI-resultater kan variere. Kontroller forslagets faktiske navn og verdier før du redigerer dem.

Forbered en kvadratisk illustrasjon

Bruk et kvadratisk lerret til en kortillustrasjon.

1. Opprett et Animate-element og velg SVG Root.
2. Velg Aspect Ratio → 1:1 og Dimension → 1000x1000.
3. Kontroller at Width og Height begge viser 1000, og vent på Saved.
4. Åpne dokumentet igjen for å kontrollere lagrede dimensjoner før du legger til grafikk.

Lag en formovergang og forleng den

En formovergang endrer ett baneomriss til et annet over tid. Bruk sekvensen og siste nøkkelbilde sammen for å styre hvor lang tid overgangen tar.

1. Velg AI Create i et tomt Animate-element og skriv Create a delayed circle morphing into a square.
2. Velg AI Create i dialogen og les sammendraget av forslaget. Velg Apply og kontroller deretter grafikken på lerretet.
3. Utvid gruppene og velg den animerte banen og deretter sekvenssporet.
4. Sett Duration til 2000. Velg siste nøkkelbilde og sett også Time til 2000.
5. Kontroller overgangen, se etter delt bruk i Relation Summary og vent på Saved.

I det syntetiske eksemplet hadde foreslått Morph Shape Path en sekvens på 1200 millisekunder. Endring av begge verdiene til 2000 forlenget overgangen til to sekunder.

Flytt en bane 20 enheter til høyre

Forskyv et statisk omriss uten å skrive om hver koordinat. For animerte omriss velger du nøkkelbildet som skal endres, fremfor å endre bare grunnbanen.

1. Velg banen. Hvis et nøkkelbilde fortsatt er valgt, velger du et annet element og går tilbake til banen.
2. Under Shift Path Coordinates skriver du x 20 og y 0.
3. Velg Apply Shift og kontroller Raw Path. Et startpunkt M 60 120 blir M 80 120.
4. Kontroller enkeltkoordinatene under Path Commands i hovedinspektøren. Åpne linjalforhåndsvisningen ved behov og velg deretter Done for å lukke.

Begrensninger og vanlige feil

• Kontroller Time og Duration når du endrer animasjonslengde. Begge bruker millisekunder.
• En delt sekvens endrer alle elementene som bruker den. Les Relation Summary før du redigerer.
• Banenøkkelbilder kan overstyre grunnomrisset. Rediger nøkkelbildet når det er den synlige formen du vil endre.
• Bruk forhåndsvalg for et presist lerretsforhold. Numerisk proporsjonslåsing er ikke tilgjengelig ennå.
• Zoom, åpne dialoger og valg i den separate baneeditoren varer i gjeldende økt. Når du åpner dokumentet igjen, gjenopprettes lagret grafikk og tidsinnstillinger.
• Kontroller MP4-lengden og det nedlastede resultatet når animasjonen har forsinkelser eller gjentatte sekvenser.

Relaterte artikler

• Image - generer bildefiler fra en ledetekst.
• Video - se status for planlagt videogenerering.
• Component - bygg en gjenbrukbar grensesnittdel.