React Native的动画（一）

前言

React Native作为大前端开发的一种技术，自然离不开各种炫酷的动效。在React Native中动效有两种实现的方式。它们分别为：** LayoutAnimation、 Animated**。

今天，我们给一个LayoutAnimation的例子。LayoutAnimation适合开发相对简单的动画。如，一个界面的出现，或一个按钮做一些简单的缩放动画。

一个例子

需求

创建一个<Text>，每次点击它时，它就会以动画的形式变大（长宽各增加50像素）。动画持续时间5s。具有一定的弹性。

code

import React, { Component } from 'react';
import {
  NativeModules,
  LayoutAnimation,
  AppRegistry,
  View,
  Text,
  TouchableOpacity,

} from 'react-native';

import ListViewBisc from '../AwesomeProject/App/widget/ListViewBisc'
import HttpClient from '../AwesomeProject/App/widget/HttpClient'

const { UIManager } = NativeModules;

UIManager.setLayoutAnimationEnabledExperimental &&
  UIManager.setLayoutAnimationEnabledExperimental(true);

class HelloWorld extends Component {
  constructor(props) {
    super(props);
    this.state={
      w:100,
      h:50
    };
  }

  _onPress = () => {
   // Animate the update
   LayoutAnimation.configureNext(LayoutAnimation.create(5000,
             LayoutAnimation.Types.spring,
             LayoutAnimation.Properties.scaleXY));
   this.setState({w: this.state.w + 50, h: this.state.h + 50})
 }

  render(){
    return (
      <TouchableOpacity onPress = {this._onPress}>
        <Text style={{width: this.state.w, height: this.state.h , backgroundColor:'#f0f0f0'}}>Press me!</Text>
      </TouchableOpacity>
    )
  }
}

我们用一个TouchableOpacity包裹了<Text>控件。然后，给TouchableOpacity输入按压回调，在回调中调用动画。

我们使用LayoutAnimation创建动画，输入了三个参数，分别是动画时间5000ms、插值器类型弹性和动画类型缩放。
然后我们就可以直接改变state中的值，以调用render重新渲染界面。

总结

利用LayoutAnimation我们可以创造简单的动画。可以控制简单的时间，插值类型，动画类型。而如果需要更为精确复杂的控制，我们则需要用到Animted。

如有问题，欢迎指正。