Skutki

13 min read

Dodaj efekty wizualne, aby poprawić swoje projekty. PinePaper zawiera 15 efektów wbudowanych, począwszy od systemów cząstek stałych do symulacji środowiskowych.

Dostępne efekty

Błysk

Świecąca cząstka, która podąża za zarysem twojego przedmiotu, pozostawiając ślad iskier.

    • Best for: * * Logos, podświetlony tekst, magiczne motywy
Własność Opis Domyślne
Kolor Kolor blasku / blasku #fbbf24 (złoto)
Prędkość Mnożnik prędkości animacji 1.0
Rozmiar Promień cząstek stałych 2

Blast

Eksplozja cząstek ze środka elementu. Jeden strzał domyślnie, lub ustawić interwał dla powtarzających się wybuchów.

    • Best for: * * Ujawnienia, nacisk, uroczystości
Własność Opis Domyślne
Kolor Kolor cząstek #ef4444 (red)
Promień Odległość rozprzestrzeniania się eksplozji 100
Licz Liczba cząstek 20
Przerwanie Powtarzać interwał w sekundach (0 = jeden strzał) 0
Powtórz Liczba powtórzeń (0 = jeden strzał) 0

Ogień

Organiczne kształty płomienia z gradientem kolorystyka, animacja fali sinusoidalnej, i turbulencje. Płomienie przedciepła automatycznie, więc nie ma przerwy zimnego startu.

    • Best for: * * Pochodnie, ogniska, dramatyczny nacisk
Własność Opis Domyślne
Kolor Kolor bazowy dla gradientu generowanego automatycznie #fbbf24
Kolory Własny gradient zatrzymuje tablicę (przewyższa kolor) żółty → pomarańczowy → czerwony
Licz Wskaźnik zamiany 12
Prędkość Mnożnik stopy zamiany 1.5
Rozprzestrzenianie Poziome rozprzestrzenianie się tarła 0
Rozmiar Podstawowy rozmiar płomienia 3
Wysokość Maksymalna wysokość wzrostu (0 = auto od granic elementu) 0
Życie cząstek stałych Płomień życia w sekundach 1.5
Turbulencja Mnożnik amplitudy fali 1.0
Max Cząsteczki Max jednoczesne płomienie 30

Dym

Rosnące cząstki dymu lub pary z sinusoidalnym poziomym dryfowaniem. Ogrzewa się automatycznie dla natychmiastowej widoczności.

    • Best for: * * Kominy, para, mgła atmosferyczna
Własność Opis Domyślne
Kolor Kolor dymu #888888
Licz Wskaźnik zamiany 15
Prędkość Mnożnik stopy zamiany 1.0
Rozprzestrzenianie Poziome rozprzestrzenianie się tarła 0
Rozmiar Początkowy promień cząstek 3
Drift Pozioma odległość dryfowania sinusoidalnego 8
Wysokość Maksymalny wzrost wysokości (0 = auto) 0
Życie cząstek stałych Okres trwałości cząstek stałych w sekundach 1.5
Stopa wzrostu Skala wzrostu w miarę wzrostu cząstek 0.3
Max Cząsteczki Maksymalne równoczesne cząstki 18

Deszcz

W dół strumienie deszczu z konfigurowalnym kątem wiatru i rozmiarem kropli.

    • Best for: * * Sceny pogodowe, nastrój, środowisko
Własność Opis Domyślne
Kolor Kolor deszczu #93c5fd (jasnoniebieski)
Licz Współczynnik zmienności 15
Prędkość Mnożnik prędkości upadku 2.0
Kąt Kąt wiatru (wpływa na dryfowanie poziome) 0
Rozprzestrzenianie Poziomy współczynnik rozprzestrzeniania się tarła 1.0
Rozmiar Mnożnik długości i szerokości kropli deszczu 1.0

Śnieg

Powoli spadające płatki śniegu z łagodnym poziomym dryfowaniem i obrotem.

    • Best for: * * Sceny zimowe, tematy świąteczne, łagodna atmosfera
Własność Opis Domyślne
Kolor Kolor płatka śniegu #e2e8f0 (jasnoszary)
Licz Współczynnik zmienności 10
Prędkość Mnożnik prędkości upadku 0.5
Rozprzestrzenianie Poziomy współczynnik rozprzestrzeniania się tarła 1.5
Życie cząstek stałych Flake lifetime in seconds 4.0

Konfetti

Kolorowe prostokąty z grawitacją opartą na fizyce. Jeden strzał domyślnie, lub ustawić interwał dla powtarzających się wybuchów.

    • Best for: * * Obchody, osiągnięcia, tematy partyjne
Własność Opis Domyślne
Kolory Array kolorów confetti czerwony, żółty, zielony, niebieski, fioletowy
Licz Cząsteczki na pęknięcie 30
Promień Zakres prędkości wybuchu 150
Grawitacja Przyspieszenie w dół 200
Rozmiar Rozmiar prostokąta 6
Rozprzestrzenianie Rozprzestrzenianie się miejsca spopielenia 0
Offset X / Y Offset środkowy 0
Przerwanie Powtarzać interwał w sekundach (0 = jeden strzał) 0
Powtórz Liczba powtórzeń (0 = jeden strzał) 0

Ripple

Rozszerzanie koncentrycznych okręgów, które znikają z centrum przedmiotów.

    • Best for: * * Krople wody, punkty uderzenia, sonar / radar
Własność Opis Domyślne
Kolor Kolor pierścienia #60a5fa (jasnoniebieski)
Prędkość Mnożnik prędkości rozszerzania 1.0
Max Radius Maksymalny rozmiar pierścienia 150
Liczba pierścieni Liczba pierścieni do wypalenia 3
Szerokość uderzenia Szerokość linii pierścieniowej 2

Glow

Aura pulsująca za elementem, który oscyluje w skali.

    • Best for: * * Znaczniki, zasilacze, uwaga-rysunek
Własność Opis Domyślne
Kolor Kolor błysku #fbbf24 (złoto)
Prędkość Mnożnik częstotliwości pulsu 1.0
Intensywność Maksymalna nieprzezroczystość 0.6
Rozmiar Zakres oscylacji skalowej (1.0 → ta wartość) 1.5

Elektryczne

Migotanie postrzępione błyskawice wokół przedmiotu.

    • Best for: * * Energia, energia, motywy science fiction
Własność Opis Domyślne
Kolor Kolor śruby #67e8f9 (cyjan)
Prędkość Mnożnik współczynnika zmienności 1.0
Liczba śrub Liczba śrub jednocześnie 3
Długość Długość śruby w pikselach 60
Szybkość migotania Częstotliwość migania w Hz 8

Bąbelki

Rosnące przezroczyste pęcherzyki ze spekulacyjnymi pasemkami i łagodną poziomą chwiejność.

    • Best for: * * Sceny podwodne, kaprysy, napoje
Własność Opis Domyślne
Kolor Kolor obręczy bąbelkowej #93c5fd (jasnoniebieski)
Licz Wskaźnik zamiany 6
Prędkość Mnożnik prędkości wzrostu 1.0
Rozmiar Promień bańki 5
Rozprzestrzenianie Poziome rozprzestrzenianie się tarła 1.0

Pył

Pływające moty pyłu, które płyną delikatnie w powietrzu z subtelnym ruchem.

    • Best for: * * Sceny atmosferyczne, stare / vintage looks, promienie słoneczne
Własność Opis Domyślne
Kolor Kolor kurzu #d4c5a9 (ciepły beż)
Licz Liczba motów 15
Prędkość Mnożnik prędkości drift 1.0
Rozmiar Rozmiar mota 2
Rozprzestrzenianie Rozprzestrzenianie się obszaru 1.0

Świece

Świecące kropki, które wędrują organicznie ze spokojnym zachowaniem kierowniczym.

    • Best for: * * Sceny nocne, magiczne lasy, tło otoczenia
Własność Opis Domyślne
Kolor Kolor świetlika #fde68a (ciepły żółty)
Licz Liczba świetlików 8
Prędkość Mnożnik prędkości ruchu 1.0
Rozmiar Promień błysku 4

Fala uderzeniowa

Pojedynczy pierścień, który strzela na zewnątrz od środka elementu. Efekt wybuchu.

    • Best for: * * Momenty oddziaływania, power- upy, dramatyczne objawienia
Własność Opis Domyślne
Kolor Kolor pierścienia #f97316 (pomarańczowy)
Promień Maksymalny promień rozszerzalności 150

Szlak

Utrzymująca się ścieżka cząstek, które podążają za elementem podczas poruszania się.

    • Best for: * * Obiekty ruchome, wizualizacja ścieżki, ogony komety
Własność Opis Domyślne
Kolor Kolor szlaku #fbbf24 (złoto)
Prędkość Prędkość zanikania 1.0
Rozmiar Wielkość cząsteczek szlaku 3

Efekty cieniowania (ścinane)

Nowa rodzina efektów renderowanych przez GPU5 dodana w v0.5. W przeciwieństwie do efektów cząstkowych, efekty cieniowania są ciągłe animowane cienie komponowane przeciwko sylwetce Twojego elementu - pomyśl “wypełniony ogniem tekst” lub “roztopiony chrom na logo”. Trzy typy statków dzisiaj:

Heatmap

Świecące termalne halo z animowanymi turbulencjami. Czyta jak ogień podczas napełniania tekstu i jak gorący blask podczas halonizowania kształtu.

    • Best for: * * Tytuły tekstu, efekty energetyczne, nacisk uwagi
Własność Opis Domyślne
Tryb Tam, gdzie pojawia się cień: * * Napełnij element * * / * * Halo wokół elementu * * / * * Overlay (mieszanka na pozycji) * * Wypełnienie
Intensywność Mnożnik jasności (0- 1,5) 1.0
Promień Odległość fali błysku (0, 2- 1, 5) 0.85
Paleta Gorące (czerwone / żółte), chłodne (niebieskie / cyjańskie), fioletowe Gorąco
Wyściełanie halo Rozszerzenie granic dla aureoli zewnętrznej (0- 1.5) 0.4
Offset X / Y Przesuwa środek cieniowania wzorca w granicach (-1 do 1) 0
Tint Wybór koloru - symuluje paletę w kierunku tego koloru (biały = bez uprzedzeń) #ffffff

Płynny metal

Refleksyjna chromowa powierzchnia płynąca ze smugami i spekulacyjnymi cechami. Trzy metalowe palety:.

    • Best for: * * Logos, pierwszorzędne elementy, typografia metalowa

Gem Smoke

Miękki, objętościowy wieniec dymny z ruchem lokówki i iskrami wewnętrznymi. Trzy kolorowe palety: * * White * *, * * Rose * *, * * Emerald * *.

    • Best for: * * Mistyczna atmosfera, marzycielskie tło, magiczne objawienia

Kanały animacji

Każdy efekt cieniowania ma dwa niezależne kanały animacji (A i B) napędzające różne aspekty wizualne. Dla Heatmap to * * Flow * * (turbulencje tła) + * * Shimmer * * (szczegóły wysokiej częstotliwości). Dla Liquid Metal to * * Streaks * * (drift) + * * Zespoły * * (odbicie oscylacji). Dla Gem Smoke jest to * * Drift * * (kierunkowskaz) + * * Sparkle * * (akcenty wewnętrzne).

Każdy kanał ujawnia:

      • Prędkość * * - 0 × zamraża kanał, 1 × = wartość domyślna, do 5 ×
      • Curve * * - jak surowy czas ulega transformacji:
Krzywa Co to robi
Liniowe Stały przepływ ciągły (domyślnie - zalecany dla kanałów typu “Flow”)
Sine Gładki puls
Trójkąt Impuls ostry
Puls Włączona / wyłączona fala kwadratowa
Łatwość Powoli → szybko → powoli
Sawtooth Ramp + reset
Odbić Rozkładanie oscylacji
Hałas Losowy spacer

Można mieszać krzywe między A i B dla ruchu warstwowego - np., Heatmap z Flow na Linii i Shimmer na Pulsie daje stały blask z szczegółowo strobowania.

Układanie efektów cieniowania

Do jednego elementu można zastosować więcej niż jeden efekt cieniowania. Heatmap + Gem Smoke na tym samym zdjęciu daje ognistą aureolę z wężami dymnymi dryfujące przez niego. Każdy efekt działa niezależnie z własnych paramów i kanałów. Przycisk Clear Effects usuwa wszystkie naraz.

Tryby złożone

    • Mode * * dropdown decyduje, w jaki sposób wyjście shadera łączy się z elementem:
      • Napełnij element * * - cień pojawia się tylko wewnątrz sylwetki elementu. Domyślnie dla tekstu i kształtów.
      • Halo wokół elementu * * - cień pojawia się tylko poza krawędzią elementu. Najlepsze dla nieprzezroczystych kształtów, które chcą blasku.
      • Overlay (mix on item) * * - shader stylizes the item 's existing pixels via multiple mix. Domyślnie dla obrazów.

Stosowanie

  1. Wybierz element za pomocą narzędzia wyboru (V)
  2. W panelu właściwości znaleźć * * Efekty * *
  3. Kliknij * * Dodaj efekt * *
  4. Wybierz typ efektu
  5. Dostosuj ustawienia zgodnie z życzeniem

Efekty usuwania

  1. Wybierz element ze skutkiem
  2. W Panelu Właściwości, znajdź efekt
  3. Kliknij przycisk * * × * * *, aby go usunąć

Efekty wielokrotne

Można zastosować wiele efektów do tego samego elementu. Wszyscy będą grać jednocześnie.

Rodzaje skutków

Kategoria Skutki Zachowanie
Ciągłe (cząstki) Błysk, dym, ogień, deszcz, śnieg, strumień, błysk, prąd, pęcherzyki, pył, świetliki, szlak Uruchom do momentu usunięcia
One- Shot Burst Blast, Confetti, Shockwave (bez przerwy) Graj raz i znikaj
Powtarzające się włamanie Blast, Confetti (z przerwami) Ponowne uruchomienie w ustawionym przedziale
Shader (silhouette- clipped) Heatmap, Liquid Metal, Gem Smoke Uruchom aż do usunięcia; wiele stosów na element

Efekt a animacja

Cecha Animacja Wpływ
Co to robi Przekształca element (ruch, skala, obrót) Dodaje elementy wizualne wokół elementu
Przykłady Puls, odbicie, zanikanie Ślad błysku, eksplozja cząstek
Połączyć? Jeden na element Wiele na element

Zgodność wywozu

Wpływ MP4 GIF SVG
Błysk ✅ ✅ Statyczny
Blast ✅ ✅ ❌
Ogień ✅ ✅ ❌
Dym ✅ ✅ ❌
Deszcz ✅ ✅ ❌
Śnieg ✅ ✅ ❌
Konfetti ✅ ✅ ❌
Ripple ✅ ✅ ❌
Glow ✅ ✅ Statyczny
Elektryczne ✅ ✅ ❌
Mapa ciepła (cieniarka) ✅ ✅ ❌
Płynny metal (ciecz) ✅ ✅ ❌
Gem Smoke (shader) ✅ ✅ ❌
    • SVG Ograniczenia: * * Efekty są oparte na framework systemów cząstek i powierzchniach cieniowanych - ani mapy czysto do statycznego SVG. Dla pełnej skuteczności animacji eksportuj jako MP4 lub GIF.

Wskazówki

Wskazówki dotyczące wpływu:

  • Efekty błysku najlepiej działają na elementy z jasnymi zarysami
  • Ogień i dym automatycznie ciepły - płomienie pojawiają się natychmiast bez opóźnienia w starcie
  • Użyj blast i confetti oszczędnie dla momentów uderzenia
  • Rain and snow work best on bigher items or full- continent elements
  • Połącz blask z trybami mieszania do dramatycznego oświetlenia
  • Dopasuj kolory efektu do palety projektu

Porady efektów cieniowania:

  • Dla tekstu, * * Napełnij element * * tryb tworzy “fire- text” / “smoky- text” wygląd. Dla kształtów, spróbuj * * Halo wokół pozycji * *. Dla obrazków, * * Overlay * * zachowuje obraz podczas mieszania go z cieniem.
  • Stack wiele efektów cieniowania na jednym elemencie: mapa heatmap na * * Filll * * + gem _ smoke na * * Halo wokół * * warstw świecące rdzeń pod dymną halo.
  • Użyj * * Offset X / Y * *, aby przesunąć jasną plamę mapy ciepłej w kierunku rogu zamiast środka - przydatne dla asymetrycznego wyglądu “gorącej krawędzi”.
      • Tint * * kolor picker biada paletę bez utraty struktury. Zachowaj go na biało, by wyglądał naturalnie.
  • Krzywe kanału pozwalają na mieszanie stałego przepływu ze szczegółami strobowania. Spróbuj Heatmap z Flow = Liniowy i Shimmer = Puls dla migoczącego efektu świecy.
  • Autostrady wydajności oparte na urządzeniu. Na wolniejszych maszynach edytor po cichu opuści rozdzielczość przed szybkością ramki; można zablokować poziom jakości za pomocą konsoli deweloperskiej (PinePaper.itemAuraSystem.setQualityTier(N)).
    • Powiązane: * * [Animacje] (/features/animations)