React Durumundan ExodeUI Durum Makinesi Girişlerini Kontrol Etme
exodeui paketiyle React'te bir ExodeUI dosyasını oynatmak için pratik bir kılavuz: React durumundan boolean, sayı ve tetikleyici girişleri ayarlama ve olayları yönetme.
Ana nokta
exodeui paketini yükleyin, dosyayı <ExodeUICanvas> ile oluşturun ve setEngine'i onReady'ye ileterek, useExodeUI kancasıyla motoru edinin. Daha sonra durum makinesini çalıştırmak için React efektlerinden ve işleyicilerinden setInputBool, setInputNumber veya fireTrigger'ı çağırın ve onTrigger ile olayları dinleyin. React durumunuz gerçeğin kaynağı olmaya devam ediyor; dosya hareketin sahibidir.
Model: kodunuz verilere sahiptir, dosya ise harekete sahiptir
Bir ExodeUI dosyası katmanları, durumları, geçişleri ve bunlar arasında geçiş yapan girişleri içerir. React bileşeniniz kendi durumuna göre bu girişlerin ne zaman değişeceğine karar verir. Bu bölme, animasyon kodunu bileşenlerinizin dışında tutar ve tasarımcıların React'e dokunmadan hareketi değiştirmesine olanak tanır.
Kurmak
React çalışma zamanını npm kurulumu exodeui ile yükleyin. Vite kullanıyorsanız exodeui/vite-plugin'den exodePlugin()'ı Vite yapılandırmanıza ekleyin, böylece .exode dosyaları doğrudan içe aktarılabilir; aksi halde src prop ile dosyaya bir URL iletin.
- ExodeUICanvas destekleri: src (URL) veya çalışma yüzeyi (içe aktarılan veriler), sığdırma, hizalama, autoPlay, onReady, onTrigger, onInputUpdate.
- useExodeUI, setEngine artı setInputBool, setInputNumber, setInputText, setInputNumberArray, setInputStringArray, fireTrigger ve getInputValue değerini döndürür.
- Giriş adları, dosyada tanımlanan adlarla eşleşmelidir.
Boole'lar, sayılar ve tetikleyiciler
Yükleniyor gibi açık kalan bir durum için bir boole kullanın. 0'dan 100'e kadar olan ilerleme gibi sürekli değerler için bir sayı kullanın. Bir defaya mahsus bir an için, Başarı gibi, bir kez tetiklenen ve sıfırlanan bir tetikleyici kullanın. React'te, duruma bağlı bir efektte boole değerleri ve sayılar ayarlayın ve olayın gerçekleştiği işleyicide tetikleyicileri tetikleyin.
React'e geri dönen etkinlikler
Animasyonlar aynı zamanda kodunuza bir şeyin gerçekleştiğini de söyleyebilir; örneğin dosyanın içindeki bir düğmeye basıldığı veya başarılı bir animasyonun tamamlandığı. Bunları, tetikleyici adını alan onTrigger ile işleyin ve API çağrıları gibi gerçek işleri React kodunuzda tutun.
Test etme ve erişilebilirlik
Hareket girişler tarafından yönlendirildiğinden, her durum için hangi girişlerin ayarlandığını kontrol ederek React tarafını test edebilirsiniz. Gerçek düğmeleri ve etiketleri DOM'da tutun veya ekran okuyucular için görsel olarak gizlenmiş bir HTML katmanı oluşturabilen ExodeSEO bileşenini kullanın. Dosyanız bir tane tanımlıyorsa, kullanıcının sistem ayarından azaltılmış hareketli bir boole iletin.
Üretim için uygulama örneği
import { useEffect } from 'react';
import { ExodeUICanvas, useExodeUI } from 'exodeui';
import saveButton from './save-button.exode'; // needs exodePlugin() from 'exodeui/vite-plugin'
export function SaveButton({ saving, progress, justSaved, onSave }) {
const { setEngine, setInputBool, setInputNumber, fireTrigger } = useExodeUI();
// Boolean: a state that stays on while saving
useEffect(() => { setInputBool('Loading', saving); }, [saving, setInputBool]);
// Number: continuous progress, 0 to 100
useEffect(() => { setInputNumber('Progress', progress); }, [progress, setInputNumber]);
// Trigger: a one-off moment
useEffect(() => { if (justSaved) fireTrigger('Success'); }, [justSaved, fireTrigger]);
return (
<div style={{ width: 240, height: 64 }}>
<ExodeUICanvas
artboard={saveButton}
onReady={setEngine}
onTrigger={(name) => { if (name === 'Pressed') onSave(); }}
/>
</div>
);
}Hatırlanacak temel ilkeler
- ExodeUICanvas ile render alın ve setEngine'i useExodeUI'ten onReady'ye geçirin
- Devam eden durumlar için Boole'lar, sürekli değerler için sayılar, anlar için tetikleyiciler
- React efektlerinden ve işleyicilerinden girişleri ayarlayın; React durumu gerçeğin kaynağı olmaya devam ediyor
- OnTrigger ile dosyadaki olayları yönetin
- Uygulama mantığını React'te, hareketi dosyada tutun
Sık sorulan sorular
Kaynaklar
- exodeui (React runtime) — npm