跳至主要內容

Animated.Value

驅動動畫的標準值。一個 Animated.Value 可以同步驅動多個屬性，但一次只能由一個機制驅動。使用新的機制（例如，啟動新的動畫或呼叫 setValue）將停止任何先前的機制。

通常在類別組件中使用 useAnimatedValue(0); 或 new Animated.Value(0); 初始化。

參考

方法​

setValue()​

tsx
setValue(value: number);

直接設定值。這將停止任何在此值上運行的動畫，並更新所有綁定的屬性。

參數

名稱類型必填描述
valuenumber是值

setOffset()​

tsx
setOffset(offset: number);

設定一個偏移量，該偏移量應用於設定的任何值之上，無論是透過 setValue、動畫或 Animated.event 設定。對於補償諸如滑動手勢的開始之類的事情很有用。

參數

名稱類型必填描述
offsetnumber是偏移值

flattenOffset()​

tsx
flattenOffset();

將偏移值合併到基礎值中，並將偏移量重置為零。值的最終輸出保持不變。

extractOffset()​

tsx
extractOffset();

將偏移值設定為基礎值，並將基礎值重置為零。值的最終輸出保持不變。

addListener()​

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

為值添加一個異步監聽器，以便您可以觀察動畫的更新。這很有用，因為無法同步讀取值，因為它可能是由原生驅動的。

返回一個字串，作為監聽器的識別符。

參數

名稱類型必填描述
callbackfunction是回呼函數，它將接收一個物件，其中 value 鍵設定為新值。

removeListener()​

tsx
removeListener(id: string);

取消註冊監聽器。id 參數應與先前由 addListener() 返回的識別符匹配。

參數

名稱類型必填描述
idstring是要移除的監聽器的 ID。

removeAllListeners()​

tsx
removeAllListeners();

移除所有已註冊的監聽器。

stopAnimation()​

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

停止任何正在運行的動畫或追蹤。callback 會在停止動畫後使用最終值調用，這對於更新狀態以匹配動畫位置與佈局很有用。

參數

名稱類型必填描述
callbackfunction否一個將接收最終值的函數。

resetAnimation()​

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

停止任何動畫並將值重置為其原始值。

參數

名稱類型必填描述
callbackfunction否一個將接收原始值的函數。

interpolate()​

tsx
interpolate(config: InterpolationConfigType);

在更新屬性之前插值，例如將 0-1 映射到 0-10。

請參閱 AnimatedInterpolation.js

參數

名稱類型必填描述
configobject是請參閱下方。

config 物件由以下鍵組成

  • inputRange：數字陣列
  • outputRange：數字或字串陣列
  • easing（選填）：一個函數，給定一個輸入數字，返回一個數字
  • extrapolate（選填）：一個字串，例如 'extend'、'identity' 或 'clamp'
  • extrapolateLeft（選填）：一個字串，例如 'extend'、'identity' 或 'clamp'
  • extrapolateRight（選填）：一個字串，例如 'extend'、'identity' 或 'clamp'

animate()​

tsx
animate(animation, callback);

通常僅在內部使用，但也可能由自訂的 Animation 類別使用。

參數

名稱類型必填描述
animationAnimation是請參閱 Animation.js。
callbackfunction是回呼函數。