Animated.Value

Nieoficjalne Tłumaczenie Beta

Ta strona została przetłumaczona przez PageTurner AI (beta). Nie jest oficjalnie zatwierdzona przez projekt. Znalazłeś błąd? Zgłoś problem →

Standardowa wartość sterująca animacjami. Pojedynczy Animated.Value może sterować wieloma właściwościami w sposób zsynchronizowany, ale w danym momencie może być sterowany tylko przez jeden mechanizm. Użycie nowego mechanizmu (np. rozpoczęcie nowej animacji lub wywołanie setValue) zatrzyma poprzednie działania.

Zazwyczaj inicjalizowany za pomocą useAnimatedValue(0); w komponentach funkcyjnych lub new Animated.Value(0); w komponentach klasowych.

---

Dokumentacja

Metody

setValue()

tsx

setValue(value: number);

Bezpośrednio ustawia wartość. Zatrzymuje to wszystkie aktualnie działające animacje tej wartości i aktualizuje wszystkie powiązane właściwości.

Parametry:

Name	Type	Required	Description
value	number	Yes	Value

---

setOffset()

tsx

setOffset(offset: number);

Ustawia przesunięcie nakładane na bieżącą wartość - niezależnie od tego, czy została ustawiona przez setValue, animację czy Animated.event. Przydatne do kompensowania elementów takich jak punkt początkowy gestu przesunięcia.

Parametry:

Name	Type	Required	Description
offset	number	Yes	Offset value

---

flattenOffset()

tsx

flattenOffset();

Scala wartość przesunięcia z wartością bazową i resetuje przesunięcie do zera. Ostateczna wartość wyjściowa pozostaje bez zmian.

---

extractOffset()

tsx

extractOffset();

Ustawia wartość przesunięcia na wartość bazową i resetuje wartość bazową do zera. Ostateczna wartość wyjściowa pozostaje bez zmian.

---

addListener()

tsx

addListener(callback: (state: {value: number}) => void): string;

Dodaje asynchronicznego słuchacza (listener) do wartości, umożliwiając obserwowanie aktualizacji z animacji. Jest to przydatne, ponieważ nie ma możliwości synchronicznego odczytu wartości, która może być sterowana natywnie.

Zwraca ciąg znaków służący jako identyfikator słuchacza.

Parametry:

Name	Type	Required	Description
callback	function	Yes	The callback function which will receive an object with a value key set to the new value.

---

removeListener()

tsx

removeListener(id: string);

Wyrejestrowuje słuchacza. Parametr id musi odpowiadać identyfikatorowi zwróconemu wcześniej przez addListener().

Parametry:

Name	Type	Required	Description
id	string	Yes	Id for the listener being removed.

---

removeAllListeners()

tsx

removeAllListeners();

Usuwa wszystkich zarejestrowanych słuchaczy.

---

stopAnimation()

tsx

stopAnimation(callback?: (value: number) => void);

Zatrzymuje wszystkie działające animacje lub śledzenie. callback jest wywoływany z końcową wartością po zatrzymaniu animacji, co jest przydatne do aktualizacji stanu zgodnie z pozycją animacji w układzie.

Parametry:

Name	Type	Required	Description
callback	function	No	A function that will receive the final value.

---

resetAnimation()

tsx

resetAnimation(callback?: (value: number) => void);

Zatrzymuje wszystkie animacje i resetuje wartość do stanu początkowego.

Parametry:

Name	Type	Required	Description
callback	function	No	A function that will receive the original value.

---

interpolate()

tsx

interpolate(config: InterpolationConfigType);

Interpoluje wartość przed aktualizacją właściwości, np. mapuje zakres 0-1 na 0-10.

Patrz AnimatedInterpolation.js

Parametry:

Name	Type	Required	Description
config	object	Yes	See below.

Obiekt config składa się z następujących kluczy:

• inputRange: tablica liczb

• outputRange: tablica liczb lub ciągów znaków

• easing (opcjonalne): funkcja zwracająca liczbę na podstawie liczby wejściowej

• extrapolate (opcjonalne): ciąg znaków, np. 'extend', 'identity' lub 'clamp'

• extrapolateLeft (opcjonalne): ciąg znaków, np. 'extend', 'identity' lub 'clamp'

• extrapolateRight (opcjonalne): ciąg znaków, np. 'extend', 'identity' lub 'clamp'

---

animate()

tsx

animate(animation, callback);

Zazwyczaj używane tylko wewnętrznie, ale może być wykorzystane przez niestandardową klasę animacji.

Parametry:

Name	Type	Required	Description
animation	Animation	Yes	See Animation.js.
callback	function	Yes	Callback function.