Etkileri

12 min read

Tasarımlarınızı geliştirmek için görsel efektler ekleyin. PinePaper, parçacık sistemlerinden çevresel simülasyonlara kadar uzanan 15 yerleşik etki içerir.

Mevcut Etkileri

Sparkle

Ürününüzün taslağını takip eden bir ışıltılı parçacık, bir kıvılcım izi bırakarak.

En iyisi: Logolar, vurgulanan metin, büyülü temalar

Emlak Açıklama Tembel
Renkli Renk Sparkle/glow renkli #fbbf24 (altın)
Hız Animation speed multiplier 1.0
Boyut Boyutu Parçacık Yarısı 2

Blast

Bir öğenin merkezine gelen partiküllerin patlaması. Bir-shot varsayılan olarak veya tekrar patlamalar için bir aralığı ayarlar.

En iyisi: Açıklamalar, vurgu, kutlamalar

Emlak Açıklama Tembel
Renkli Renk Parçacık rengi #ef4444 (red)
Radius Patlama mesafe yayılıyor 100
Kont Parçacık Sayısı 20
Interval Saniyede tekrar aralığı (0 = one-shot) 0
Tekrar Tekrar Tekrar tekrarlayın Tekrarlama Sayısı (0 = sadece bir numara) 0

Yangın Ateşi

Organik alev şekilleri yüksek çözünürlükte renklendirme, sinusoidal dalga animasyonu ve türbülans. Alevler otomatik olarak savaşıyorlar, bu yüzden soğuk başlangıç boşlukları yoktur.

En iyisi: Torches, kamp ateşi, dramatik vurgu

Emlak Açıklama Tembel
Renkli Renk Otomatik üretilen gradient için temel renk #fbbf24
Renkler Özel gradient diziyi durdurur (overrides color) sarı → portakal → kırmızı
Kont Spawn oranı 12
Hız Spawn oranı multiplier 1.5
Yay Yatay spawn yayıldı 0
Boyut Boyutu Baz alev boyutu 3
Yükseklik Max yükselme yüksekliği (0 = öğe sınırlarından otomatik) 0
Parçacık Hayatı Flame ömürleri saniyede 1.5
Turbulence Wave amplitude multiplier 1.0
Max Parçacıklar Max eşzamanlı alevler 30

Duman

Yükselen duman veya buhar partikülleri sinusoidal yatay sürükle ile. Pre-warms otomatik olarak anlık görünürlük için.

En iyisi: Chimneys, buhar, atmosferik bir fındık

Emlak Açıklama Tembel
Renkli Renk Duman rengi #888888
Kont Spawn oranı 15
Hız Spawn oranı multiplier 1.0
Yay Yatay spawn yayıldı 0
Boyut Boyutu İlk Parçacık Yarısı 3
Drift Yatay sinusoidal uzak mesafe 8
Yükseklik Max yükselme yüksekliği (0 = auto) 0
Parçacık Hayatı Parçacık ömrü saniyede 1.5
Büyüme Oranı Parçacık büyüdükçe büyüme 0.3
Max Parçacıklar Max eşzamanlı parçacıklar 18

Rain

Yeraltı yağmur hatları yapılandırılabilir rüzgar açısı ve düşüş boyutu ile.

En iyisi: Hava sahneleri, ruh hali, çevresel arka planlar

Emlak Açıklama Tembel
Renkli Renk Raindrop rengi #93c5fd (mavi ışık)
Kont Spawn oranı faktörü 15
Hız Fall speed multiplier 2.0
Yüz Rüzgar açısı (kapılı sürüklenmeler) 0
Yay Yatay spawn faktöre yayılıyor 1.0
Boyut Boyutu Raindrop uzunluğu ve genişliği multiplier 1.0

Snow

Yavaş yavaş hafif yatay sürüklenme ve rotasyonla karflakes düşüyor.

En iyisi: Kış sahneleri, tatil temaları, nazik atmosfer

Emlak Açıklama Tembel
Renkli Renk Karflake rengi #e2e8f0 (mavi gri)
Kont Spawn oranı faktörü 10
Hız Fall speed multiplier 0.5
Yay Yatay spawn faktöre yayılıyor 1.5
Parçacık Hayatı Flake ömürleri saniyeler içinde 4.0

Confetti

Renkli betonları fizik tabanlı yerçekimi ile karıştırır. Bir-shot varsayılan olarak veya tekrar patlamalar için bir aralığı ayarlar.

En iyisi: Kutlamalar, başarılar, parti temaları

Emlak Açıklama Tembel
Renkler Konfetti renkleri kırmızı, sarı, yeşil, mavi, mor
Kont Patlama başına Parçacıklar 30
Radius Patlama hız aralığı 150
Gravity Downward Hız 200
Boyut Boyutu Düzlem büyüklüğü 6
Yay Spawn alanı yayılıyor 0
Offset X /Y Merkez dengeleme Merkezi 0
Interval Saniyede tekrar aralığı (0 = one-shot) 0
Tekrar Tekrar Tekrar tekrarlayın Tekrarlama Sayısı (0 = sadece bir numara) 0

Ripple

Ürün merkezinden çıkan konsantrik çevreleri genişletin.

En iyisi: Su damlaları, etki noktaları, oğlumar/radar

Emlak Açıklama Tembel
Renkli Renk Ring color #60a5fa (mavi ışık)
Hız Genişleme hızı çokplier 1.0
Max Radius En yüksek ring büyüklüğü 150
Ring Count Halkaların sayısı spawn 3
İndüksiyon Ring line genişliği 2

Glow

A pulsing aura behind the item that oscillates in scale.

En iyisi: Highlights, power-ups, dikkat-drawing

Emlak Açıklama Tembel
Renkli Renk Glow color #fbbf24 (altın)
Hız Pulse frekansı multiplier 1.0
Intensity Maksimum opaklık 0.6
Boyut Boyutu Scale oscillation aralığı (1.0 → bu değer) 1.5

Elektrikli

Flickering jagged Lightning cıvatas around the item.

En iyisi: Enerji, güç, sci-fi temaları

Emlak Açıklama Tembel
Renkli Renk Bolt renk #67e8f9 (cyan)
Hız Flicker oranı multiplier 1.0
Bolt Count Eş zamanlı cıvata sayısı 3
Uzunluk uzunluğu Bolt uzunluğu 60
Flicker Rate Flicker frekansı Hz 8

Bubbles

Yükselen şeffaf balonlar specular vurgular ve nazik yatay wobble ile.

En iyisi: Su sahneleri, viski temaları, içecekler

Emlak Açıklama Tembel
Renkli Renk Bubble rim renkli #93c5fd (mavi ışık)
Kont Spawn oranı 6
Hız Rise speed multiplier 1.0
Boyut Boyutu Bubble Yarısı 5
Yay Yatay spawn yayıldı 1.0

Toz

Temiz hareketle havada nazikçe sürüklenen toz motes.

En iyisi: atmosferik sahneler, yaşlı /vintage görünüyor, güneşbeams

Emlak Açıklama Tembel
Renkli Renk Toz rengi #d4c5a9 (warm beige)
Kont Motes sayısı 15
Hız Drift speed multiplier 1.0
Boyut Boyutu Mote büyüklüğü 2
Yay Alan yayılmış 1.0

Fireflies

Organik olarak düzgün direksiyon davranışları ile dolaşan Glowing dots.

En iyisi: Gece sahneleri, büyülü ormanlar, çevre arka planları

Emlak Açıklama Tembel
Renkli Renk Firefly renkli renk #fde68a (savaş sarısı)
Kont Ateş sayısı 8
Hız Hareket hızı multiplier 1.0
Boyut Boyutu Glow Yarısı 4

Şok dalgası

Ürün merkezinden dışarı vuran tek genişleyen bir ring. One-shot patlama etkisi.

En iyisi: Etki anları, güç-upları, dramatik ortaya çıkıyor

Emlak Açıklama Tembel
Renkli Renk Ring color #f97316 (orange)
Radius Max genişleme Yarısı 150

Trail

Eşyayı hareket ettiği gibi takip eden kalıcı bir parçacık yolu.

En iyisi: Hareketli nesneler, yol görselleştirme, kuyruklar gel

Emlak Açıklama Tembel
Renkli Renk Trail renk #fbbf24 (altın)
Hız Fade hız 1.0
Boyut Boyutu Trail boyutu 3

Shader Effects (silhouette-clipped)

Yeni bir GPU-rendered etkisi ailesi v0.5’te eklendi. Parçacık etkilerinden farklı olarak, gölgeli etkiler sürekli animasyonlu gölgeler, eşyanızın silhouette’ine karşı dondurulur - “ateş dolu metin” veya “geçmiş bir logo üzerinde” düşünün. Bugün üç tip gemi:

Heatmap

Renkli bir halo’yu animasyonla aydınlatın. Yazıyı doldururken ateş olarak ve bir şekli yarıkken sıcak bir ışık olarak okuyun.

En iyisi: Metin başlıkları, enerji etkileri, dikkat vurgu

Emlak Açıklama Tembel
Mode Gölgeleyici nerede görünüyor: Fill item / Halo around item / Overlay (blend on item) / ** Tür Ekle
Intensity Çokplier (0-1.5) 1.0
Radius Glow falloff mesafe (0.2-1.5) 0.85
Yakıt Sıcak (red/yellow), Cool (mavi/cyan), Violet Sıcak
Halo padding Dış yarıya genişleme (0-1.5) 0.4
Offset X / Y Dağcı desen merkezi sınırları içinde (-1 to 1) 0
Tint Color picker – bu renge karşı paletler (beyaz = hiçbir önyargı) #ffffff

Sıvı Metal

Renkli krom, bantlı çizgilerle ve spular işaretleriyle yüzeye akır. Üç metal paleti: Chrome, Gold, Copper.

En iyisi: Logolar, premium-feel vurgular, metal tipografi

Gem Duman

Yumuşak hacimsel sigara içme hareketi ve iç kıvılcımlar ile. Üç renk paleti: Beyaz, Rose, Emerald.

En iyisi: Mystical atmosfer, rüya arka planları, büyülü ortaya

Animation Channels

Her gölge etkisi, farklı görsel yönleri kullanan iki bağımsız animasyon kanalına sahiptir. Heatmap için bu Flow ( tur turbulence) + Shimmer (yüksek frekanslı detay). Sıvı Metal için Streaks (drift) + Bands (reflection oscillation). Gem Duman için Drift (kullanıcı yön) + Sparkle (internal aksanlar).

Her kanal ortaya çıkıyor:

  • Speed - 0× kanalı donduruyor, 1× = başlangıç varsayılan, 5 ×
  • Curve - ham zaman nasıl dönüştürülür:
Curve Ne yapar
Linear Steady sürekli akış (default – “Flow” tipi kanallar için önerilir)
Sine Parlak nabız
Üçgen Sharp pul
Pulse /off meydan dalga
Ease Yavaş → hızlı
Sawtooth Ramp + reset
Bounce Decaying oscillation
Gürültü Rastgele yürüyüş

A ve B arasında tabakalı hareket için eğrileri karıştırabilirsiniz – e.g., Heatmap ile Pulse üzerinde Linear ve Shimmer’da bir strobing detayı ile sabit bir ışık verir.

Shader Effects

Tek bir öğeye birden fazla gölge etkisi uygulayabilirsiniz. Heatmap + Gem Duman aynı resimde size duman wisps ile birlikte bir fiery Gagao verir. Her etki kendi params ve kanallarıyla bağımsız olarak çalışır. Clear Effects düğmesine bir kere içinde hepsini kaldırır.

Kompozit Modes

Mode dropdown, gölgeli çıkışların öğe ile nasıl karıştığına karar verir:

  • Fill item - gölge sadece öğenin silhouette içinde görünür. Metin ve şekilleri için sıralayın.
  • Halo around item – gölger sadece öğenin kenarı dışında görünür. Bir ışık isteyenler için en iyisi.
  • Overlay (başlangıçta) - gölgeleyici, öğenin mevcut piksellerini çoğaltmak. Görüntüler için sıralayın.

Uygulamalı Etkileri

  1. Seçim Aracı ile bir öğe seçin (V)
  2. Özellikler Panelinde, Effects
  3. Click Add Effects
  4. Bir etki türü seçin
  5. İstenen ayarlar

Removing Effects

  1. Maddeyi etkile seçin
  2. Özellikler Panelinde, etki bulur
  3. × düğmesine tıklayın onu kaldırmak için

Çoklu Etkileri

Aynı öğeye birden fazla etki uygulayabilirsiniz. Hepsi aynı anda oynayacaklar.

Etkisi Türleri

Kategori Etkileri Davranış
Sürekli (parça) Sparkle, Smoke, Fire, Rain, Snow, Ripple, Glow, Electric, Trails, Dust, Fireflies, Trail Kaldırıncaya kadar Run
One-Shot Burst Blast, Confetti, Şok dalgası (zamansız) Bir kez oynayın ve kaybolur
Tekrarlama Burst Blast, Confetti (zamanla) Re-trigger at set interval
Shader (silhouette-clipped) Heatmap, Liquid Metal, Gem Duman Kaldırıncaya kadar koş; öğe başına birden fazla yığın

Vs. Animation

Özellik Animation Etkisi
Ne yapar Öğeyi döndürür (move, ölçek, döner) Öğenin etrafındaki görsel elementleri ekleyin
Örnekler Pulse, vibe Sparkle iz, parçacık patlaması
Bir araya mı? Bir per item Ürün başına birden fazla

İhracat Uyumluluk

Etkisi MP4 GIF SVG
Sparkle ✅ ✅ Statik
Blast ✅ ✅ ❌
Yangın Ateşi ✅ ✅ ❌
Duman ✅ ✅ ❌
Rain ✅ ✅ ❌
Snow ✅ ✅ ❌
Confetti ✅ ✅ ❌
Ripple ✅ ✅ ❌
Glow ✅ ✅ Statik
Elektrikli ✅ ✅ ❌
Heatmap (shader) ✅ ✅ ❌
Sıvı Metal (shader) ✅ ✅ ❌
Gem Duman (shader) ✅ ✅ ❌

SVG Limitleri: Etkiler çerçeve tabanlı parçacık sistemleri ve gölgeli yüzeylerdir - statik SVG için temiz olmayan haritalar. Tam etki animasyonları için MP4 veya GIF olarak ihracat.

İpuçları

Etkisi:

  • Sparkle etkiler açık satırlarla en iyi şekilde çalışır
  • Yangın ve duman otomatik olarak – alevler hemen başlangıç gecikmesi ile görünüyor
  • Patlama ve konfetti etki anları için sparingly kullanın
  • Rain ve kar daha büyük maddeler veya full-canvas elementler üzerinde en iyi şekilde çalışır
  • Dramatik aydınlatma modları ile birlikte parlayan ışık
  • Tasarım paletinizin renklerini

Shader Etkisi İpuçları:

  • Metin için, Fill item modu bir “smoky-text” / “smoky-text” görünümü üretir. Şekiller için, Halo around item. Görüntüler için, Overlay onu gölge ile kapatırken görüntüyü korur.
  • Bir öğe üzerinde birden fazla gölgeleyici etkisi: ısımap Fill + gem smoke on Halo around katmanları bir smoky stateo altında bir ışık.
  • Use Offset X/Y, ısımap’un merkezi yerine bir köşeye doğru parlak noktası zorlamak - asimetrik “hot edge” görünümü için kullanışlı.
  • Tint renkli seçici önyargılar, paleti kaybetmeden yan yanar. Başlangıçtaki doğal görünüm için beyaz tutun.
  • Kanal eğrileri sürekli akışı strobing detay ile karıştırmasına izin verir. Akış ile Heatmap deneyin =Linear ve Shimmer=Pulse bir flickering mum etkisi için.
  • Cihazınıza dayanan performans oto-tunes. Daha yavaş makinelerde editörün çerçeve fiyatından önce sessizce karar verecek; geliştirici konsol (PinePaper.itemAuraSystem.setQualityTier(N)) aracılığıyla kaliteli bir katmanı kilitleyebilirsiniz.

Related: Animations | Blending | Masking