跳到主要內容

Animated.ValueXY

用於驅動 2D 動畫的 2D 值，例如滑動手勢。幾乎與一般的 Animated.Value API 相同，但為多工處理。在底層包含兩個常規的 Animated.Value。

範例​

參考文獻

方法​

setValue()​

tsx
setValue(value: {x: number; y: number});

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

參數

名稱類型必填描述
value{x: number; y: number}是值

setOffset()​

tsx
setOffset(offset: {x: number; y: number});

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

參數

名稱類型必填描述
offset{x: number; y: number}是偏移值

flattenOffset()​

tsx
flattenOffset();

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

extractOffset()​

tsx
extractOffset();

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

addListener()​

tsx
addListener(callback: (value: {x: number; y: number}) => void);

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

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

參數

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

removeListener()​

tsx
removeListener(id: string);

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

參數

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

removeAllListeners()​

tsx
removeAllListeners();

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

stopAnimation()​

tsx
stopAnimation(callback?: (value: {x: number; y: number}) => void);

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

參數

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

resetAnimation()​

tsx
resetAnimation(callback?: (value: {x: number; y: number}) => void);

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

參數

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

getLayout()​

tsx
getLayout(): {left: Animated.Value, top: Animated.Value};

將 {x, y} 轉換為 {left, top} 以用於樣式，例如

tsx
style={this.state.anim.getLayout()}

getTranslateTransform()​

tsx
getTranslateTransform(): [
  {translateX: Animated.Value},
  {translateY: Animated.Value},
];

將 {x, y} 轉換為可用的平移變換，例如

tsx
style={{
  transform: this.state.anim.getTranslateTransform()
}}