Efecte

13 min read

Adăugați efecte vizuale pentru a îmbunătăți modelele. PinePaper include 15 efecte integrate variind de la sisteme de particule la simulări de mediu.

Efecte disponibile

Sclipici

O particulă strălucitoare care urmează conturul articolului tău, lăsând o dâră de scântei.

Cel mai bun pentru: Logos, text evidențiat, teme magice

Proprietate Descriere Implicit
Culoare Culoare strălucitoare #fbbf24 (aur)
Viteza Multiplicatorul vitezei de animare 1.0
Dimensiune Raza particulelor 2

La naiba

O explozie de particule din centrul unui obiect. Un singur foc în mod implicit, sau setați un interval pentru repetarea izbucnirilor.

Cel mai bun pentru: Dezvăluiri, accent, sărbători

Proprietate Descriere Implicit
Culoare Culoare particule #ef4444 (red)
Radius Distanța de răspândire a exploziilor 100
Numără Numărul de particule 20
Interval Se repetă intervalul în secunde (0 = o singură lovitură) 0
Repetă Numărul de repetări (0 = o singură lovitură) 0

Foc

Forme de flacără organică cu colorare gradient, animație unde sinusoidale, și turbulențe. Flames pre-cald automat astfel încât nu există nici un decalaj rece-pornire.

Cel mai bun pentru: Torţe, focuri de tabără, accent dramatic

Proprietate Descriere Implicit
Culoare Culoare de bază pentru gradientul automat #fbbf24
Culori Array-ul personalizat se oprește gradient (colorează) galben → portocaliu → roșu
Numără Rata de reproducere 12
Viteza Multiplicatorul ratei de reproducere 1.5
Împrăştiere Răspândirea orizontală a icrelor 0
Dimensiune Dimensiunea flăcării de bază 3
Înălțime Înălțimea maximă de creștere (0 = automat de la marginea elementului) 0
Viaţa particulelor Viaţa de foc în câteva secunde 1.5
Turbulenţă Multiplicatorul amplitudinii valurilor 1.0
Particule maxime Flăcările simultane maxime 30

Fum

Ridicarea particulelor de fum sau abur cu deviere orizontală sinusoidală. Se încălzește automat pentru vizibilitate instantanee.

Cel mai bun pentru: Coșuri, abur, ceață atmosferică

Proprietate Descriere Implicit
Culoare Culoare fum #888888
Numără Rata de reproducere 15
Viteza Multiplicatorul ratei de reproducere 1.0
Împrăştiere Răspândirea orizontală a icrelor 0
Dimensiune Raza inițială a particulelor 3
Drift Distanţa orizontală de deviere sinusoidală 8
Înălțime Înălțimea maximă de creștere (0 = auto) 0
Viaţa particulelor Durata de viață a particulelor în secunde 1.5
Rata de creștere Creşterea pe măsură ce particula creşte 0.3
Particule maxime Particule simultane maxime 18

Ploaie

Ploaia în jos dungi cu unghi de vânt configurabil și dimensiunea picătură.

Cel mai bun pentru: Scene meteo, stare de spirit, medii de mediu

Proprietate Descriere Implicit
Culoare Culoarea picăturilor de ploaie #93c5fd (albastru deschis)
Numără Factorul ratei de reproducere 15
Viteza Multiplicatorul vitezei de cădere 2.0
Unghi Unghiul vântului (afectează abaterea orizontală) 0
Împrăştiere Factorul orizontal de răspândire a icrelor 1.0
Dimensiune Lungimea picăturilor de ploaie și multiplicatorul de lățime 1.0

Zăpadă

Fulgi de zăpadă care se încadrează încet cu drift orizontal blând și rotație.

Cel mai bun pentru: Scene de iarnă, teme de vacanţă, atmosferă blândă

Proprietate Descriere Implicit
Culoare Culoare fulg de zăpadă #e2e8f0 (gri deschis)
Numără Factorul ratei de reproducere 10
Viteza Multiplicatorul vitezei de cădere 0.5
Împrăştiere Factorul orizontal de răspândire a icrelor 1.5
Viaţa particulelor Viaţa lui Flake în câteva secunde 4.0

Confetti

Dreptunghiuri tumble colorate cu gravitaţie bazată pe fizică. Un singur foc în mod implicit, sau setați un interval pentru repetarea izbucnirilor.

Cel mai bun pentru: Sărbători, realizări, teme de partid

Proprietate Descriere Implicit
Culori Array de culori confetti rosu, galben, verde, albastru, violet
Numără Particule per explozie 30
Radius Gama de viteze de explozie 150
Gravitație Accelerația descendentă 200
Dimensiune Dimensiunea rectanglei 6
Împrăştiere Zona de reproducere 0
Offset X/Y Offset centru 0
Interval Se repetă intervalul în secunde (0 = o singură lovitură) 0
Repetă Numărul de repetări (0 = o singură lovitură) 0

Ripple

Extinde cercuri concentrice care dispar din centrul elementului.

Cel mai bun pentru: Picături de apă, puncte de impact, sonar/radar

Proprietate Descriere Implicit
Culoare Culoare inel #60a5fa (albastru deschis)
Viteza Multiplicatorul vitezei de expansiune 1.0
Max Radius Dimensiunea maximă a inelului 150
Număr de inele Numărul de inele pentru reproducere 3
Accident vascular cerebral lățime Lățimea liniei inelare 2

Luminos

O aură pulsantă în spatele elementului care oscilează la scară.

Cel mai bun pentru: Puncte principale, putere-up-uri, atragerea atenției

Proprietate Descriere Implicit
Culoare Culoare strălucitoare #fbbf24 (aur)
Viteza Multiplicatorul de frecvență a impulsurilor 1.0
Intensitate Opacitate maximă 0.6
Dimensiune Gamă de oscilații pe scară (1,0 → această valoare) 1.5

Electrice

Fulgere zimțat fulgere în jurul elementului.

Cel mai bun pentru: Energie, putere, teme SF

Proprietate Descriere Implicit
Culoare Culoare bolt #67e8f9 (cian)
Viteza Multiplicatorul ratei de aprindere 1.0
Conte de bolți Numărul de șuruburi simultane 3
Lungimea Lungimea boilerului în pixeli 60
Rata flicker Frecvenţa flickerului în Hz 8

Bule

Creşterea bulelor transparente cu accente speculante şi mişcări orizontale blânde.

Cel mai bun pentru: Scene subacvatice, teme capricioase, băuturi

Proprietate Descriere Implicit
Culoare Culoare bubble jantă #93c5fd (albastru deschis)
Numără Rata de reproducere 6
Viteza Multiplicatorul vitezei de creștere 1.0
Dimensiune Raza balonului 5
Împrăştiere Răspândirea orizontală a icrelor 1.0

Praf

Mote de praf plutitoare care plutesc ușor în aer cu mișcare subtilă.

Cel mai bun pentru: Scene atmosferice, priviri de vârstă/vintage, raze de soare

Proprietate Descriere Implicit
Culoare Culoare praf #d4c5a9 (bej cald)
Numără Numărul de mote 15
Viteza Multiplicator de viteză în derivă 1.0
Dimensiune Mărime mote 2
Împrăştiere Zona de răspândire 1.0

Licurici

Puncte strălucitoare care rătăcesc organic cu comportament de direcţie neted.

Cel mai bun pentru: Scene de noapte, păduri magice, medii ambientale

Proprietate Descriere Implicit
Culoare Licurici culoare strălucire #fde68a (galben cald)
Numără Numărul de licurici 8
Viteza Multiplicatorul vitezei de mișcare 1.0
Dimensiune Raza luminos 4

Unda de soc

Un singur inel în expansiune care trage spre exterior de la centrul de element. Un efect de explozie.

Cel mai bun pentru: Momente de impact, putere-up-uri, dezvăluiri dramatice

Proprietate Descriere Implicit
Culoare Culoare inel #f97316 (portocale)
Radius Raza maximă de expansiune 150

Traseu

O cale persistentă de particule care urmează elementul așa cum se mișcă.

Cel mai bun pentru: Obiecte în mișcare, vizualizare cale, cozi comete

Proprietate Descriere Implicit
Culoare Culoare pistă #fbbf24 (aur)
Viteza Viteză inversă 1.0
Dimensiune Dimensiunea particulelor de cale 3

Efecte de umbră (cu clapetă de siluetă)

O nouă familie de efecte generate de GPU adăugate în v0.5. Spre deosebire de efectele particulelor, efectele de umbrire sunt de animație continuă nuanțe compozite împotriva siluetei elementul dvs. Trei tipuri de nave astăzi:

Heatmap

Un halo termic strălucitor cu turbulenţe animate. Citește ca focul atunci când umple textul, și ca o strălucire fierbinte atunci când halo o formă.

Cel mai bun pentru: Titluri text, efecte energetice, accent de atenție

Proprietate Descriere Implicit
Mod În cazul în care apare umbrar: Fill element / Halo în jurul valorii de element / Overlay (blend on item) Completează elementul
Intensitate Multiplicator de luminozitate (0 1.0
Radius Distanţa de cădere a luminii (0,2 0.85
Paleta Fierbinte (roșu/galben), rece (albastru/cian), Violet Fierbinte
Halo padding Extindere a limitelor pentru haloul exterior (0,5) 0.4
Offset X / Y Mută centrul de modelare în interiorul limitelor (-1 la 1) 0
Tint Culegator de culoare #ffffff

Metal lichid

Reflectoare crom de suprafață curge cu dungi bandate și elemente speculante. Trei palete metalice: Chrome, Gold, Copper.

Cel mai bun pentru: Logos, puncte de interes premium, tipografie metalică

Gem Smoke

Coroană de fum volumetrică moale cu mișcare de curling și scântei interne. Trei palete de culori: White, Rose, Emerald.

Cel mai bun pentru: Atmosfera mistică, fundaluri de vis, dezvăluiri magice

Canale de animație

Fiecare efect de umbrire are două canale independente de animație (A și B) conducând aspecte vizuale distincte. Pentru Heatmap care este Flow (zburatorie de fond) + Shimmer (detalii de înaltă frecvență). Pentru Liquid Metal este Streaks (drift) + Bands (reflection oscilation). Pentru Gem Smoke este Drift (direcție curl) + Sparkle (accente interne).

Fiecare canal expune:

  • Speed
  • Curve
Curbă Ce face
Liniar Debit continuu constant (
Sine Puls neted
Triunghi Puls ascuţit
Puls Unde pătrate pornite/off
Uşurel Încet → rapid → lent
Sawtooth Rampă + resetare
Sari Oscilație în decădere
Zgomot Mers aleatoriu

Puteți amesteca curbe între A și B pentru mișcare stratificată .

Efectele Shader stivuire

Puteți aplica mai mult de un efect de umbrire la un singur element. Heatmap + Gem Smoke pe aceeași imagine vă oferă un halo de foc cu fire de fum în derivă prin ea. Fiecare efect funcționează independent cu propriile sale params și canale. Butonul Clear Effects le elimină pe toate odată.

Moduri compuse

The Mode dropdown decide modul în care puterea de umbră se amestecă cu elementul:

  • Fill item Implicit pentru text și forme.
  • Halo în jurul valorii de element Cel mai bun pentru forme opace care doresc o strălucire.
  • Overlay (blend on item) Implicit pentru imagini.

Efecte de aplicare

  1. Alegeți un element cu instrumentul de selecție (V)
  2. În panoul Proprietăți, găsi Efecte
  3. Click Adaugă efect
  4. Alegeți un tip de efect
  5. Ajustează setările dorite

Îndepărtarea efectelor

  1. Alegeți elementul cu efectul
  2. În panoul Proprietăți, găsi efectul
  3. Faceţi clic pe butonul × pentru a-l elimina

Efecte multiple

Puteți aplica efecte multiple pentru același produs. Ei vor juca toate simultan.

Tipuri de efecte

Categorie Efecte Comportament
Continuu (particule) Sparkle, Smoke, Fire, Rain, Snow, Ripple, Glow, Electric, Bubbles, Dust, Licurici, Trail Rulează până la îndepărtarea
One-Shot Burst Blast, Confetti, Shockwave (fără interval) Joacă o dată şi dispari
Repetare explozie Explozie, Confetti (cu interval) Redeclanşare la interval de set
Șater (agraf de siluetă) Heatmap, Metal lichid, Gem Smoke Rulați până la îndepărtarea; mai multe stiva pe element

Efect vs. Animație

Caracteristici Animație Efect
Ce face Transformă elementul (mișcă, scara, roti) Adaugă elemente vizuale în jurul elementului
Exemple Puls, salt, estompat Traseu sclipitor, explozie de particule
Combină? Unul pe element Multiple per element

Compatibilitatea exportului

Efect MP4 GIF SVG
Sclipici ✅ ✅ ⚠️ Static
La naiba ✅ ✅ ❌
Foc ✅ ✅ ❌
Fum ✅ ✅ ❌
Ploaie ✅ ✅ ❌
Zăpadă ✅ ✅ ❌
Confetti ✅ ✅ ❌
Ripple ✅ ✅ ❌
Luminos ✅ ✅ ⚠️ Static
Electrice ✅ ✅ ❌
Heatmap (shader) ✅ ✅ ❌
Metal lichid (shader) ✅ ✅ ❌
Gem Smoke ✅ ✅ ❌

Limitările SVG: Efectele sunt sisteme de particule pe bază de cadru şi suprafeţe care nu se predează cu nuanţă Pentru animații cu efect complet, exportați ca MP4 sau GIF.

Sfaturi

Sfaturi de efect:

  • Efectele sclipitoare funcționează cel mai bine pe elemente cu contururi clare
  • Foc și fum pre-cald automat
  • Utilizați blast și confetti cu grijă pentru momente de impact
  • Ploaie și zăpadă funcționează cel mai bine pe elemente mai mari sau elemente complete-canvas
  • Combina stralucire cu moduri de amestec pentru iluminat dramatic
  • Se potrivesc culori efect la paleta de design

Sfaturi de efect Shader:

  • Pentru text, Fill item mode produce un “fire-text” / “smoky-text” look. Pentru forme, încercați Halo în jurul valorii de element. Pentru imagini, Overlay păstrează imaginea în timp ce o colorează cu umbrarul.
  • Stack mai multe efecte de umbrare pe un singur element: incalzire pe Fill + gem smoke pe Halo în jurul straturi un miez stralucitor sub un halo fumos.
  • Utilizați Offset X/Y pentru a împinge la fața locului luminos Heatmap spre un colț în loc de centru .
  • Culegatorul de culori Tint părtinește paleta fără a pierde structura. Păstrați-l alb pentru aspectul natural preset lui.
  • Curbele canalului vă permit să amestecaţi fluxul constant cu detaliile stroblingului. Încercați Heatmap cu Flow=Linear și Shimmer=Pulsul pentru un efect de lumânare pâlpâind.
  • Autotunele de performanţă bazate pe dispozitivul tău. Pe mașini mai lente editorul va scădea în liniște rezoluția înainte de rata de cadru; puteți bloca un nivel de calitate prin consola dezvoltator (PinePaper.itemAuraSystem.setQualityTier(N)).

Related: Animații