React Native填坑之旅--LayoutAnimation篇

比較精細的動畫可以用Animated來控制。但是，在一些簡單的界面切換、更新的時候所做的動畫裏再去計算開始值、結束值和插值器如何運作絕對是浪費時間。

RN正好給我們提供了LayoutAnimation來解決這個問題。按照官方的說法：LayoutAnimation就是用於在下一個繪製或者佈局週期（render/layout cycle)裏處理界面中全部視圖的動畫的。

下面看一個例子：

export default class DemoLayoutAnimation extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      width: 100,
      height: 100,
    };
    this._onPress = this._onPress.bind(this);
  }

  componentWillMount() {
    LayoutAnimation.spring();
  }

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

  render() {
    return (
      <View style={styles.container}>
        <View style={[styles.box, {width: this.state.width, height: this.state.height}]} />
        <TouchableOpacity onPress={this._onPress}>
          <View style={styles.button}>
            <Text style={styles.buttonText}>Press me!</Text>
          </View>
        </TouchableOpacity>
      </View>
    );
  }
};

效果就是這樣的。

使用的時候也非常簡單，只需要在更新State之前調用一下LayoutAnimation.sprint()這麼一行代碼。

LayoutAnimation默認的提供了三種動畫：linear, spring和easeInEaseOut。 當然，RN也留出了自定義的接口。你可以按照自己需要的自定義動畫效果。

下面看看如何自定義：

import //...略...
const customAnim = {
  customSpring: {
    duration: 400,
    create: {
      type: LayoutAnimation.Types.spring,
      property: LayoutAnimation.Properties.scaleXY,
      springDamping: 0.6
    },
    update: {
      type: LayoutAnimation.Types.spring,
      springDamping: 0.6
    }
  },
  customLinear: {
    duration: 200,
    create: {
      type: LayoutAnimation.Types.linear,
      property: LayoutAnimation.Properties.opacity,
    },
    update: {
      type: LayoutAnimation.Types.easeInEaseOut
    }
  }
};

export default class DemoLayoutAnimation extends React.Component {
  componentWillUpdate() {
    LayoutAnimation.configureNext(customAnim.customLinear);
  }

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

  //...略...
};

爲了直入主題，部分內容省略。後面有完整的代碼。

自定義非常簡單，當然限制也不少。只需要指定動畫的duration、create和update。

另外一個本例與上例不同的地方在於LayoutAnimation可以只在componentWillUpdate()方法裏指定，不需要在點擊事件裏指定。

完整代碼

//@flow

import React from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  LayoutAnimation,
  StyleSheet,
} from 'react-native';

const customAnim = {
  customSpring: {
    duration: 400,
    create: {
      type: LayoutAnimation.Types.spring,
      property: LayoutAnimation.Properties.scaleXY,
      springDamping: 0.6
    },
    update: {
      type: LayoutAnimation.Types.spring,
      springDamping: 0.6
    }
  },
  customLinear: {
    duration: 200,
    create: {
      type: LayoutAnimation.Types.linear,
      property: LayoutAnimation.Properties.opacity,
    },
    update: {
      type: LayoutAnimation.Types.easeInEaseOut
    }
  }
};

export default class DemoLayoutAnimation extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      width: 100,
      height: 100,
    };
    this._onPress = this._onPress.bind(this);
    this._createAnimation = this._createAnimation.bind(this);
  }

  //   componentWillMount() {
  //     LayoutAnimation.spring();
  //   }

  componentWillUpdate() {
    LayoutAnimation.configureNext(customAnim.customLinear);
  }

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

  render() {
    return (
      <View style={styles.container}>
        <View style={[styles.box, { width: this.state.width, height: this.state.height }]} />
        <TouchableOpacity onPress={this._onPress}>
          <View style={styles.button}>
            <Text style={styles.buttonText}>Press me!</Text>
          </View>
        </TouchableOpacity>
      </View>
    );
  }
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  },
  box: {
    backgroundColor: 'red'
  },
  button: {
    marginTop: 10,
    paddingVertical: 10,
    paddingHorizontal: 20,
    backgroundColor: 'black'
  },
  buttonText: {
    color: 'white',
    fontSize: 16,
    fontWeight: 'bold'
  }
});