Effekter

12 min read

Legg til visuelle effekter for å forbedre design. PinePaper inkluderer 15 innebygde effekter som varierer fra partikkelsystemer til miljøsimuleringer.

Tilgjengelige effekter

Sparkle

En glødende partikkel som følger omrisset av elementet ditt, etterlater et spor av gnister.

Beste for: Logoer, uthevet tekst, magiske temaer

Eiendom Beskrivelse Standard
Farge Sparkle/glød farge #fbbf24 (gull)
Hastighet Animasjonshastighet multiplikator 1.0
Størrelse Partikkelradius 2

Blast

Eksplosjon av partikler fra sentrum av en gjenstand. Ett-shot som standard, eller angi et intervall for gjentaking av brudd.

Beste for: Avsløring, vekt, feiringer

Eiendom Beskrivelse Standard
Farge Partikkelfarge #ef4444 (red)
Radius Eksplosjonsdistanse 100
Telling Antall partikler 20
Intervall Gjenta intervall i sekunder (0 = one-shot) 0
Gjenta Antall repetisjoner (0 = one-shot) 0

Ild

Organiske flammeformer med gradientfarge, sinusoidal bølge animasjon og turbulens. Flammer før varme automatisk, så det er ingen kaldstart gap.

Beste for: Torker, campfires, dramatisk vekt

Eiendom Beskrivelse Standard
Farge Grunnfarge for autogenerert gradient #fbbf24
Farger Tilpasset gradient stopper array (overstyrer farge) gul → oransje → rød
Telling Spawn rate 12
Hastighet Spawn rate multiplikator 1.5
Spread Horisontal gyte spread 0
Størrelse Base flammestørrelse 3
Høyde Maks økningshøyde (0 = auto fra elementgrenser) 0
Partikkelliv Flamme levetid i sekunder 1.5
Turbulens Wave amplitude multiplikator 1.0
Maks Partikler Maks samtidig flammer 30

Røyk

Rissende røyk eller damppartikler med sinusformet horisontal drift. Førvarming automatisk for umiddelbar synlighet.

Beste for: Chimneys, damp, atmosfærisk hase

Eiendom Beskrivelse Standard
Farge Røykfarge #888888
Telling Spawn rate 15
Hastighet Spawn rate multiplikator 1.0
Spread Horisontal gyte spread 0
Størrelse Første partikkelradius 3
Drive Horisontal sinusoidal drift avstand 8
Høyde Maks høyde (0 = auto) 0
Partikkelliv Partikkel levetid i sekunder 1.5
Vekstrate Skaler veksten etter hvert som partikkelen stiger 0.3
Maks Partikler Maks samtidige partikler 18

Regn

Nedover regnstriper med konfigurerbar vindvinkel og dråpestørrelse.

Beste for: Værscener, humør, miljøbakgrunn

Eiendom Beskrivelse Standard
Farge Regndråpefarge #93c5fd (lysblå)
Telling Spawn satsfaktor 15
Hastighet Fallhastighet multiplikator 2.0
Vinkel Vindvinkel (påvirkende horisontal drift) 0
Spread Vannrett gytespredningsfaktor 1.0
Størrelse Regndråpelengde og bredde multiplikator 1.0

Snø

Sakte fallende snøfnugger med mild horisontal drift og rotasjon.

Beste for: Vinterscener, ferie temaer, mild atmosfære

Eiendom Beskrivelse Standard
Farge Snøfnødfarge #e2e8f0 (lys grå)
Telling Spawn satsfaktor 10
Hastighet Fallhastighet multiplikator 0.5
Spread Vannrett gytespredningsfaktor 1.5
Partikkelliv Flake levetid i sekunder 4.0

Confetti

Fargerike smuldrende rektangler med fysikkbasert tyngdekraft. Ett-shot som standard, eller angi et intervall for gjentaking av brudd.

Beste for: Feiringer, prestasjoner, fest temaer

Eiendom Beskrivelse Standard
Farger Array av konfetti farger rød, gul, grønn, blå, lilla
Telling Partikler per brudd 30
Radius Eksplosjonshastighetområde 150
Gravity Nedadgående akselerasjon 200
Størrelse Rektangelstørrelse 6
Spread Spawn område spredt 0
Offset X/Y Senter offset 0
Intervall Gjenta intervall i sekunder (0 = one-shot) 0
Gjenta Antall repetisjoner (0 = one-shot) 0

Ripple

Utvide konsentriske sirkler som falmer ut fra elementsenteret.

Beste for: Vanndråper, nedslagspunkter, sonar/radar

Eiendom Beskrivelse Standard
Farge Ringfarge #60a5fa (lysblå)
Hastighet Ekspansjonshastighet multiplikator 1.0
Max Radius Maksimal ringstørrelse 150
Ringtelling Antall ringer å gyte 3
Bredde Ringlinjebredde 2

Glow

En pulserende aura bak elementet som oscillerer i skala.

Beste for: Høydepunkter, power-ups, oppmerksomhetstrekking

Eiendom Beskrivelse Standard
Farge Glød farge #fbbf24 (gull)
Hastighet Pulsefrekvens multiplikator 1.0
Intensitet Maksimal åpenhet 0.6
Størrelse Skaler oscillasjonsområde (1.0 → denne verdien) 1.5

Elektrisk

Flickering tagget lyn bolter rundt elementet.

Beste for: Energi, kraft, sci-fi temaer

Eiendom Beskrivelse Standard
Farge Bolt farge #67e8f9 (cyan)
Hastighet Flicker rate multiplikator 1.0
Bolt greve Antall samtidige bolter 3
Lengde Bolt lengde i piksler 60
Flicker Rate Flicker-frekvens i Hz 8

Bobler

Stige transparente bobler med spekulære høydepunkter og milde horisontale wobble.

Beste for: Undervannsscener, whimsical temaer, drikker

Eiendom Beskrivelse Standard
Farge Bubble kantfarge #93c5fd (lysblå)
Telling Spawn rate 6
Hastighet Stige hastighet multiplikator 1.0
Størrelse Bubbleradius 5
Spread Horisontal gyte spread 1.0

Støv

Flytende støvmoter som drives forsiktig i luften med subtil bevegelse.

Beste for: Atmosfæriske scener, alder/vintring utseende, solstråler

Eiendom Beskrivelse Standard
Farge Støvfarge #d4c5a9 (varme beige)
Telling Antall motes 15
Hastighet Drivhastighet multiplikator 1.0
Størrelse Mote størrelse 2
Spread Området spredd 1.0

Fireflies

Glødende prikker som vandrer organisk med glatt styringsadferd.

Beste for: Nattscener, magiske skoger, omgivelsesbakgrunner

Eiendom Beskrivelse Standard
Farge Firefly glød farge #fde68a (varmegul)
Telling Antall brannfugler 8
Hastighet Bevegelseshastighet multiplikator 1.0
Størrelse Glødradius 4

Shockwave

En enkelt ekspanderende ring som skyter ut fra elementsenteret. En-shot break effekt.

Beste for: Impact øyeblikk, power-ups, dramatiske avslører

Eiendom Beskrivelse Standard
Farge Ringfarge #f97316 (oransje)
Radius Maks ekspansjonsradius 150

Trail

En vedvarende bane av partikler som følger elementet når det beveger seg.

Beste for: Flytte objekter, bane visualisering, komet haler

Eiendom Beskrivelse Standard
Farge Sporfarge #fbbf24 (gull)
Hastighet Fadehastighet 1.0
Størrelse Sporpartikkelstørrelse 3

Shader Effects (silhouetteklippet)

En ny familie av GPU-reddererte effekter lagt til i v0.5. I motsetning til partikkeleffekter, er skyggeeffekter kontinuerlig animerte skygger sammensatt mot gjenstandens silhuett — tenk " brannfylt tekst" eller " smeltet krom på en logo." Tre typer skip i dag:

Varmekart

En glødende termisk halo med animert turbulens. Leser som brann når du fyller tekst, og som en varm glød når haloing en form.

Beste for: Tekst titler, energieffekter, oppmerksomhet vekt

Eiendom Beskrivelse Standard
Modus Der skyggen vises: Filt element / Halo rundt element / Overlegg (blend på varen) Fyll element
Intensitet Lysstyrke multiplikator (0,5) 1.0
Radius Glødfall avstand (0,2–1,5) 0.85
Palett Hot (rød/gul), kjølig (blå/cyan), violet Hot
Halo polstring Grenser utvidelse for ekstern halo (0-.5) 0.4
Offset X/Y Forskyver skyggemønstersenteret innenfor grenser (-1 til 1) 0
Tint Fargeplukker - biaser paletten mot denne fargen (hvitt = ingen bias) #ffffff

Flytende metall

Refleksiv krom flytende overflate med banderte striker og spekulære høydepunkter. 3 metall paletter: Chrome, Gold, Copper.

Beste for: logoer, premium-føl høydepunkter, metallisk typografi

Gem Røyk

Mykt volumtrisk røyk krans med krølling bevegelse og interne gnister. Hvite, Rose, Emerald.

Beste for: Mystikk atmosfære, drømmende bakgrunner, magiske avslører

Animasjonskanaler

Hver skyggeeffekt har to uavhengige animasjonskanaler (A og B) som driver tydelige visuelle aspekter. For Heatmap som er Flow (Bakgrunn turbulens) + Shimmer (høyfrekvent detalj). For flytende metall er det Streaks (drift) + Bands (refleksjonsoscillasjon). For Gem Røyk er det Drift (curl retning) + Sparkle (intern aksent).

Hver kanal avslører:

    • Hastighet** — 0× fryser kanalen, 1× = standardinnstilling, opp til 5×
  • Kurve — hvordan rå tid blir forvandlet:
Curve Hva det gjør
Linear Steady kontinuerlig strømning (standard — anbefalt for "Flow–type kanaler)
Sine Glatt puls
Trekant Skarp puls
Pulse På/av firkantet bølge
Ease Langsom → rask → langsom
Sawtooth Ramp + tilbakestilling
Bounce Avvikende oscillasjon
Støy Random walk

Du kan blande kurver mellom A og B for lagrettet bevegelse - for eksempel varmekart med flyt på lineær og Shimmer på puls gir en jevn glød med en strobing detalj.

Stacking Shader Effekter

Du kan bruke mer enn én skyggeeffekt på et enkelt element. Heatmap + Gem Røyk på det samme bildet gir deg en brennende halo med røyk wisps drive gjennom det. Hver effekt går uavhengig med sine egne paramer og kanaler. Denne knappen fjerner alle på én gang.

Composite Modes

Mode nedtrekk bestemmer hvordan skyggeutgangen blander seg med elementet:

  • Fyll element - Shader vises bare i gjenstandens silhuett. Standard for tekst og former.
  • Halo rundt element - Shader vises bare utenfor gjenstandens kant. Beste for ugjennomsiktige former som ønsker en glød.
  • Overlegg (blend på elementet) - Shader stiliserer elementets eksisterende piksler via multiplikasjonsblanding. Standard for bilder.

Bruke effekter

  1. Velg et element med utvalgsverktøyet (V)
  2. I eiendomspanelet finner du Effekter
  3. Klikk * Legg til effekt**
  4. Velg en effekttype
  5. Juster innstillingene som ønsket

Fjerne effekter

  1. Velg elementet med effekten
  2. I egenskapspanelet finner du effekten
  3. Klikk på × knappen for å fjerne den

Flere effekter

Du kan bruke flere effekter på samme element. Alle spiller samtidig.

Effekttyper

Kategori Effekter Atferd
Kontinuerlig (partikkel) Sparkle, Røyk, Ild, Regn, Snø, Ripple, Glød, Elektrisk, Bubler, Støv, Fireflies, Trail Kjør inntil fjernet
One-Shot Burst Blast, konfetti, Shockwave (uten intervall) Spill en gang og forsvinn
Gjenta Burst Blast, Confetti (med intervall) Retrigger ved satt intervall
Shader (silhouetteklippet) Varmekart, flytende metall, Gem røyk Kjør til fjernet; flere stabel per element

Effekt vs. animasjon

Funksjon Animasjon Effekt
Hva det gjør Transformerer elementet (flytt, skaler, roter) Legger til visuelle elementer rundt elementet
Eksempler Pulse, hoppe, falme Sparkle spor, partikkel eksplosjon
Kombinere? En per element Flere per element

Eksporteringskompatibilitet

Effekt MP4 GIF SVG
Sparkle ✅ ✅ ⚠️ Statisk
Blast ✅ ✅ ❌
Ild ✅ ✅ ❌
Røyk ✅ ✅ ❌
Regn ✅ ✅ ❌
Snø ✅ ✅ ❌
Confetti ✅ ✅ ❌
Ripple ✅ ✅ ❌
Glow ✅ ✅ ⚠️ Statisk
Elektrisk ✅ ✅ ❌
Varmekart (skjerm) ✅ ✅ ❌
Væskemetall (shader) ✅ ✅ ❌
Gem Røyk (skjorte) ✅ ✅ ❌

SVG Grenser: Effekter er rammebaserte partikkelsystemer og skyggerensede overflater - verken kart rent til statisk SVG. For full effekt animasjoner, eksporter som MP4 eller GIF.

Tips

Effekttips:

  • Sparkle effekter fungerer best på elementer med klare konturer
  • Brann og røyk førvarming automatisk - flammer vises umiddelbart uten oppstart forsinkelse
  • Bruk eksplosjon og konfetti sparsomt for slag øyeblikk
  • Regn og snø fungerer best på større gjenstander eller full-kanvas elementer
  • Kombiner glød med blandingsmoduser for dramatisk belysning
  • Match effektfarger til designpaletten din

Skyggereffekt Tips:

  • For tekst, Fyll element modus produserer en “fire-tekst” / “smoky-tekst” se. For former, prøv Halo rundt element. For bilder, Overlay bevarer bildet mens du tinner det med skyggen.
  • Stack flere skyggeeffekter på ett element: varmekart på Fyll + gem smoke på Halo rundt lag en glødende kjerne under en røykig halo.
  • Bruk Offset X/Y for å presse varmekartets lyse punkt mot et hjørne i stedet for sentrum — nyttig for asymmetriske “varm kant” ser ut.
  • Tint fargeplukkeren partisker paletten uten å miste struktur. Hold det hvitt for forhåndsinnstillingens naturlige utseende.
  • Kanalkurver lar deg blande jevn flyt med strobing detaljer. Prøv varmekart med Flow=Linear og Shimmer=Pulse for en flimmerende lyseffekt.
  • Performance auto-tuner basert på enheten din. På langsommere maskiner vil redaktøren stille slippe oppløsning før rammehastighet; du kan låse et kvalitetsnivå via utviklerkonsollen (PinePaper.itemAuraSystem.setQualityTier(N)).

Relatert: Animasjoner | Blending | Masking