【React Native】文件翻譯閱讀紀錄 - APIs - Animated

by - 上午9:00

Facebook Open Source React Native
Animated

動畫庫旨在使動畫流暢，強大，易於構建和維護。動畫關注於輸入和輸出之間的聲明關係，其間具有可配置的轉換，以及用於控制基於時間的動畫執行的簡單啟動/停止方法。

 創建動畫的最簡單工作流程是創建Animated.Value，將其連接到動畫組件的一個或多個樣式屬性，然後使用Animated.timing（）通過動畫驅動更新：

Animated.timing(
  // Animate value over time
  this.state.fadeAnim, // The value to drive
  {
    toValue: 1, // Animate to final value of 1
  }
).start(); // Start the animation
請參閱 Animations 指南以查看動畫實際操作的其他示例。

概觀

您可以將兩種值類型與Animated一起使用：
Animated.Value可以綁定到樣式屬性或其他道具，也可以插入。單個Animated.Value可以驅動任意數量的屬性。

配置動畫

動畫提供三種類型的動畫類型。每種動畫類型都提供一個特定的動畫曲線，用於控制值從初始值到最終值的動畫效果：
在大多數情況下，您將使用timing（）。默認情況下，它使用對稱的easeInOut曲線，將對象的逐漸加速度傳遞到全速，並通過逐漸減速到停止來結束。

使用動畫

通過在動畫上調用start（）來啟動動畫。 start（）接受一個完成回調，該回調將在動畫完成時調用。如果動畫正常運行，將使用{finished：true}調用完成回調。如果完成動畫是因為在它完成之前調用了stop（）（例如因為它被手勢或其他動畫中斷），那麼它將接收{finished：false}。

使用本機驅動程序

通過使用本機驅動程序，我們在開始動畫之前將有關動畫的所有內容髮送到本機，允許本機代碼在UI線程上執行動畫，而無需在每個幀上通過橋接。動畫啟動後，可以阻止JS線程而不影響動畫。

 您可以通過在動畫配置中指定useNativeDriver：true來使用本機驅動程序。有關詳細信息，請參閱動畫指南。

動畫組件

只有動畫組件才能動畫。這些特殊組件可以將動畫值綁定到屬性，並進行有針對性的本機更新，以避免每幀反應渲染和協調過程的成本。他們還在卸載時處理清理，因此默認情況下它們是安全的。
動畫使用上面的包裝器導出以下可動畫組件：
  • Animated.Image
  • Animated.ScrollView
  • Animated.Text
  • Animated.View

撰寫動畫

動畫也可以使用合成功能以復雜的方式組合：
通過將一個動畫的toValue設置為另一個Animated.Value，動畫也可以鏈接在一起。請參閱“動畫”指南中的“跟踪動態值”。

 默認情況下，如果一個動畫停止或中斷，則組中的所有其他動畫也將停止。

結合動畫值

您可以通過加法，減法，乘法，除法或模來組合兩個動畫值，以創建新的動畫值：

插值

interpolate()函數允許輸入範圍映射到不同的輸出範圍。默認情況下，它會將​​曲線外推到超出給定的範圍，但您也可以將其限制為輸出值。它默認使用直線插值，但也支持緩動功能
閱讀動畫指南中有關插值的更多信息。

處理手勢和其他事件

手勢（如平移或滾動）和其他事件可以使用Animated.event（）直接映射到動畫值。這是通過結構化地圖語法完成的，以便可以從復雜事件對像中提取值。第一級是允許跨多個args映射的數組，該數組包含嵌套對象。
例如，在使用水平滾動手勢時，您將執行以下操作以將 event.nativeEvent.contentOffset.x 映射到 scrollX（Animated.Value）：
 onScroll={Animated.event(
   // scrollX = e.nativeEvent.contentOffset.x
   [{ nativeEvent: {
        contentOffset: {
          x: scrollX
        }
      }
    }]
 )}

Methods

Properties

參考

Methods

當給定值是ValueXY而不是Value時，每個配置選項可以是{x：...，y：...}形式的向量而不是標量。

decay()

static decay(value, config)
當給定值是ValueXY而不是Value時，每個配置選項可以是{x：...，y：...}形式的向量而不是標量。
Config是一個可能具有以下選項的對象：
  • velocity: 初始速度。需要。
  • deceleration: 衰減率。默認0.997。
  • isInteraction: 此動畫是否在InteractionManager上創建“交互句柄”。默認為true。
  • useNativeDriver: 當為true時使用本機驅動程序。默認為false。

timing()

static timing(value, config)
沿著定時緩動曲線設置動畫值。 Easing模塊有大量預定義曲線，或者您可以使用自己的功能。

 Config是一個可能具有以下選項的對象：
  • duration: 動畫長度（毫秒）。默認500。
  • easing: 緩動函數定義曲線。默認為Easing.inOut（Easing.ease）。
  • delay: 延遲後開始動畫（毫秒）。默認值為0。
  • isInteraction: 此動畫是否在InteractionManager上創建“交互句柄”。默認為true。
  • useNativeDriver: 當為true時使用本機驅動程序。默認為false。

spring()

static spring(value, config)
根據基於阻尼諧振動的分析彈簧模型設定值。跟踪速度狀態以在toValue更新時創建流體運動，並且可以鏈接在一起。

 Config是一個可能具有以下選項的對象。

 請注意，您只能定義一個彈跳/速度，張力/摩擦力或剛度/阻尼/質量，但不能超過一個：

 摩擦/張力或彈跳/速度選項與 Facebook Pop，Rebound 和 Origami 中的彈簧模型相匹配。
  • friction: 控制“彈性”/過衝。默認7。
  • tension: 控制速度。默認40。
  • speed: 控制動畫的速度。默認12。
  • bounciness: 控制彈性。默認8。
將剛度/阻尼/質量指定為參數使得Animated.spring使用基於阻尼諧振子的運動方程的分析彈簧模型。這種行為稍微精確一點，忠實於彈簧動力學背後的物理學，並且非常模仿iOS的CASpringAnimation原語中的實現。
  • stiffness: 彈簧剛度係數。默認為100。
  • damping: 定義由於摩擦力如何阻尼彈簧的運動。默認10。
  • mass: 附著在彈簧末端的物體的質量。默認1。
其他配置選項如下：
  • velocity: 附著在彈簧上的物體的初始速度。默認值為0（對象處於靜止狀態）。
  • overshootClamping: 布爾值，指示彈簧是否應該被夾緊而不是彈跳。默認為false。
  • restDisplacementThreshold: 靜止位移的閾值，低於該閾值時應考慮彈簧處於靜止狀態。默認值為0.001。
  • restSpeedThreshold: 靜止時應考慮彈簧的速度，以每秒像素為單位。默認值為0.001。
  • delay:延遲後開始動畫（毫秒）。默認值為0。
  • isInteraction: 此動畫是否在InteractionManager上創建“交互句柄”。默認為true。
  • useNativeDriver: 當為true時使用本機驅動程序。默認為false。

add()

static add(a, b)
創建一個新的Animated值，該值由兩個一起添加的Animated值組成。

subtract()

static subtract(a, b)
通過從第一個動畫值中減去第二個動畫值，創建一個新的動畫值。

divide()

static divide(a, b)
創建一個新的動畫值，該值由第一個動畫值除以第二個動畫值組成。

multiply()

static multiply(a, b)
創建一個新的Animated值，該值由兩個相加的Animated值組成。

modulo()

static modulo(a, modulus)
創建一個新的Animated值，它是所提供的Animated值的（非負）模數

diffClamp()

static diffClamp(a, min, max)
創建一個限制在2個值之間的新動畫值。它使用最後一個值之間的差值，因此即使該值遠離邊界，它也會在值開始再次接近時開始變化。 （value = clamp（value + diff，min，max））。

 這對於滾動事件很有用，例如，在向上滾動時顯示導航欄並在向下滾動時隱藏它。

delay()

static delay(time)
在給定的延遲後開始動畫。

sequence()

static sequence(animations)
按順序啟動動畫數組，等待每個動畫在開始下一個動畫之前完成。如果當前正在運行的動畫停止，則不會啟動以下動畫。

parallel()

static parallel(animations, config?)
同時啟動一系列動畫。默認情況下，如果其中一個動畫停止，它們將全部停止。您可以使用stopTogether標誌覆蓋它。

stagger()

static stagger(time, animations)
動畫陣列可以並行（重疊）運行，但是以連續延遲的順序啟動。很適合做尾隨效果。

loop()

static loop(animation)
連續循環給定動畫，以便每次到達結尾時，它會重置並從頭開始。可以使用配置中的密鑰迭代指定循環的次數。如果子動畫設置為useNativeDriver：true，將循環而不阻止UI線程。此外，循環可以防止基於VirtualizedList的組件在動畫運行時呈現更多行。您可以在子動畫配置中傳遞isInteraction：false來修復此問題。

event()

static event(argMapping, config?)
獲取映射數組並相應地從每個arg中提取值，然後在映射的輸出上調用setValue。例如
 onScroll={Animated.event(
   [{nativeEvent: {contentOffset: {x: this._scrollX}}}],
   {listener: (event) => console.log(event)}, // Optional async listener
 )}
 ...
 onPanResponderMove: Animated.event([
   null,                // raw event arg ignored
   {dx: this._panX}],    // gestureState arg
{listener: (event, gestureState) => console.log(event, gestureState)}, // Optional async listener
 ),
Config是一個可能具有以下選項的對象：
  • listener: 可選的異步偵聽器。
  • useNativeDriver: 當為true時使用本機驅動程序。默認為false。

forkEvent()

static forkEvent(event, listener)
用於窺探通過 props 傳遞的動畫事件的高級命令式API。它允許向現有的 AnimatedEvent 添加新的javascript偵聽器。如果 animatedEvent 是一個簡單的javascript 偵聽器，它會將2個偵聽器合併為一個偵聽器，如果 animatedEvent 為 null / undefined，它將直接分配javascript偵聽器。盡可能直接使用值。

unforkEvent()

static unforkEvent(event, listener)

屬性




Share
Tweet
Pin
Share
Tags : , , , , , , , , , , , , , ,

You May Also Like

0 意見