专注于
IT技术和业内交流

LayoutAnimation布局动画

LayoutAnimation动画使用简单并且同时适配Android/iOS双平台,整体体验也还是ok,该模块用于当视图的布局发生变化的时候,自动将该试图运行到新的位置。一个比较通用的使用方法为:在调用setState方法之前调用LayoutAnimation.configureNext()方法进行使用。

一、常用方法

static configureNext(config: Config, onAnimationDidEnd?: Function, onError?: Function)
static create(duration: number, type, creationProp)

进行计算下一个变化的布局动画。其中参数如下:

@参数config 该涉及到动画属性有:

duration   动画持续的时间(毫秒)
create     创建一个新视图所使用的动画(具体可以查看Anim类型)
update   当视图被更新的时候所使用的动画(具体可以查看Anim类型)

@参数 onAnimationDidEnd 当动画完成的时候调用的方法,当前仅支持iOS设备

@参数 onError 当动画发生错误的时候调用的方法,当前仅支持iOS设备

二、相关属性

1.Types:动画类型 (主要涉及:spring,linear,easeInEaseOut,easeIn,easeOut,keyboard)

2.Properties:属性(主要涉及:opacity,scaleXY)

3.configChecker:配置检查器

4.Presets:对象类型(动画效果默认配置项)

5.easeInEaseOut

6.linear

7.spring

有关更多属性详细介绍可以查看:LayoutAnimation.js

【注意】LayoutAnimation只对于布局的创建和更新事件才起作用,然而删除事件是不支持的。LayoutAnimation有以下三种动画效果类型:

1.caseInEaseOut
2.linear
3.spring

三、实践

以下我们做一个添加以及删除View视图的动画效果。

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

当我们布局需要更新的时候,使用LayoutAnimation进行一下动画配置即可,代码如下:

componentWillUpdate() {
  console.log('componentWillUpdate...');
  LayoutAnimation.easeInEaseOut();
}

完成这些步骤就OK了。具体我们来看一下实例代码:

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  LayoutAnimation,
  TouchableHighlight,
  ToastAndroid,
  Platform,
  UIManager
} from 'react-native';
class CustomButton extends Component {
  render() {
    return (
      <TouchableHighlight
        style={styles.button}
        underlayColor="#a5a5a5"
        onPress={this.props.onPress}>
        <Text style={styles.buttonText}>{this.props.text}</Text>
      </TouchableHighlight>
    );
  }
}

var CustomLayoutAnimation = {
    duration: 800,
    create: {
      type: LayoutAnimation.Types.linear,
      property: LayoutAnimation.Properties.opacity,
    },
    update: {
      type: LayoutAnimation.Types.easeInEaseOut,
    },
  };

class LayoutAnimationDemo extends Component {
    constructor(props) {
      super(props);
      this.state={
        views:[],
        num:0,
       }
      // Enable LayoutAnimation under Android
     if (Platform.OS === 'android') {
        UIManager.setLayoutAnimationEnabledExperimental(true)
      }
    }
    componentWillUpdate() {
      console.log('componentWillUpdate...');
      LayoutAnimation.easeInEaseOut();
      //或者可以使用如下的自定义的动画效果
      //LayoutAnimation.configureNext(CustomLayoutAnimation);
    }
    _onPressAddView() { 
      this.setState({num:Number.parseInt(this.state.num)+1});
    }
    _onPressRemoveView() {
      this.setState({num:Number.parseInt(this.state.num)-1});
    }
    _renderAddedView(i) {
      return (
       <View key={i} style={styles.view}>
          <Text style={{color:'#fff'}}>{i}</Text>
        </View>
     );
    }
    render() {
       this.state.views.length=0;
       for(var i=0;i<this.state.num;i++){
          this.state.views.push(this._renderAddedView(i));
       }
     return (
      <View style={{marginTop:20,margin:10}}>
        <Text style={styles.welcome}>
            LayoutAnimation实例演示           
        </Text>
        <CustomButton text="添加View"  onPress={this._onPressAddView.bind(this)}/>
        <CustomButton text="删除View"  onPress={this._onPressRemoveView.bind(this)}/>
        <View style={styles.viewContainer}>
          {this.state.views}
        </View>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
   button: {
    margin:5,
    backgroundColor: 'white',
    padding: 15,
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: '#cdcdcd',
  },
  viewContainer: {
    flex: 1,
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  view: {
    height: 50,
    width: 50,
    backgroundColor: 'green',
    margin: 8,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

AppRegistry.registerComponent('LayoutAnimationDemo', () => LayoutAnimationDemo);

效果如下:
LayoutAnimation
LayoutAnimation
上面的效果图有两个,分别是指定了不同的动画配置。大家看的代码就会发现我们也还自定义了一个动画配置信息:

var CustomLayoutAnimation = {
    duration: 2000,
    create: {
      type: LayoutAnimation.Types.linear,
      property: LayoutAnimation.Properties.opacity,
    },
    update: {
      type: LayoutAnimation.Types.easeInEaseOut,
    },
  };

在布局更新的时候调用这个就欧克啦~

LayoutAnimation.configureNext(CustomLayoutAnimation);

未经允许,不得转载本站任何文章:代码山 » LayoutAnimation布局动画

分享到:更多 ()

专注品牌化高端网站建设

商务服务联系我们