1.前言

LayoutAnimation——布局動畫，當布局變化時，會自動將組件運動到新的位置上。相較于RequestAnimationFrame，LayoutAnimation可以更方便的實現出“彈性動畫”，“緩入緩出”等效果。

使用LayoutAnimation的常用方法是調用LayoutAnimation.configureNext方法，然后使用setState設置組件的狀態。

2.LayoutAnimation方法與屬性

LayoutAnimation的方法

static configureNext(config: Config, onAnimationDidEnd?: Function)
配置下一次布局要發生的動畫。

• @param config 表示動畫相應的屬性
  
  • duration 動畫持續時間，單位是毫秒
  • create, 組件創建時的動畫。
  • update, 組件更新時的動畫。
  • delete, 組件銷毀時的動畫。
• @param onAnimationDidEnd 當動畫結束的時候被調用。只在iOS設備上支持。
• @param onError 當動畫產生錯誤的時候被調用。只在iOS設備上支持。

config的示例如下：

{   
  duration: 700,   //持續時間   
  create: {   // 創建         
    type: LayoutAnimation.Types.linear,      
    property: LayoutAnimation.Properties.scaleXY // opacity、scaleXY   
  },   
  update: { // 更新      
    type: LayoutAnimation.Types.spring,      
    springDamping: 0.4   
  },
}

create、update和delete的動畫類型Anim定義如下：

type Anim = {
    duration?: number,                        //動畫時長
    delay?: number,                           //時間延遲,單位：毫秒
    springDamping?: number,                   //彈跳動畫阻尼系數，配合spring使用
    initialVelocity?: number,                 //初始速度
    type?: $Enum<typeof TypesEnum>,           //動畫類型
    property?: $Enum<typeof PropertiesEnum>,  //動畫屬性
}

其中type定義在LayoutAnimation.Types中：

• spring：彈跳
• linear：線性
• easeInEaseOut：緩入緩出
• easeIn：緩入
• easeOut：緩出

property定義在LayoutAnimation.Properties中：

• opacity：透明度
• scaleXY：縮放

static create(duration: number, type, creationProp)
用來創建configureNext所需的config參數的輔助函數。

• @param duration：動畫持續時間。
• @param type：create和update時的動畫類型，定義在LayoutAnimation.Types中。
• @param creationProp：create時的動畫屬性，定義在LayoutAnimation.Properties中。

LayoutAnimation的屬性

• Types:動畫類型
• Properties:屬性(主要涉及:opacity,scaleXY)
• configChecker:配置檢查器
• Presets:動畫效果默認配置項
• easeInEaseOut 緩入緩出動畫類型
• linear 線性動畫類型
• spring 彈性動畫類型

3.LayoutAnimation使用實例

還是基于上一節RequestAnimationFrame的實例，修改其中的_onPress方法，

_onPress() {
  LayoutAnimation.configureNext({
    duration: 700, 
    create: { 
        type: LayoutAnimation.Types.spring,
        property: LayoutAnimation.Properties.scaleXY,
    },
    update: { 
        type: LayoutAnimation.Types.spring,
    },
  });
  this.setState({width: this.state.width + 10, height: this.state.height + 10});
}

要注意的是，安卓平臺使用 LayoutAnimation 動畫必須加上一下代碼，否則動畫會失效：

if (Platform.OS === 'android') {
    UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(true);
}

效果如下：

這里還可以利用create方法簡化上述代碼：

_onPress() {
  LayoutAnimation.configureNext(LayoutAnimation.create(700, 
             LayoutAnimation.Types.spring, 
             LayoutAnimation.Properties.scaleXY));
  this.setState({width: this.state.width + 10, height: this.state.height + 10});
}

其實現效果與上面代碼相同。如果要實現緩入緩出或者線性效果，將LayoutAnimation.Types.spring替換成LayoutAnimation.Types.linear或LayoutAnimation.Types.easeInEaseOut即可。

另外通常將LayoutAnimation動畫在componentWillUpdate()方法里指定，不需要在點擊事件里指定。

componentWillUpdate() {
    LayoutAnimation.configureNext({
    duration: 700, 
    create: { 
        type: LayoutAnimation.Types.spring,
        property: LayoutAnimation.Properties.scaleXY,
    },
    update: { 
        type: LayoutAnimation.Types.spring,
    },
  });
}

而點擊事件中只處理state值的修改

_onPress() {
  this.setState({ width: this.state.width + 20, height: this.state.height + 20 });
}

完整Demo示例: git源碼地址

4.小結

通過前面對LayoutAnimation介紹及體驗，可以看出用LayoutAnimation實現的動畫效果很流暢，動畫過程柔和，沒有生硬的感覺。此外可以靈活配置動畫參數，基本能滿足單個動畫的需求。不過LayoutAnimation也有其局限的地方，如何要實現組合動畫，例如先放大，在平移，實現起來就比較困難了。這里需要監聽上一個動畫的結束事件，再開始下一個動畫的執行。在configureNext的第二個參數是可以監聽動畫結束的，但是只在iOS平臺有效。那么如何實現更靈活豐富的動畫效果呢？幸運的是React Native為我們提供了功能強大的高級動畫api——Animated。下一篇文章將介紹Animated的使用。