首页 » React Native » React Native技术文章 » 正文

【React Native开发】React Native API模块之LayoutAnimation布局动画详解-Android/iOS通用(62)

尊重版权,未经授权不得转载

本文来自:江清清的技术专栏(http://www.lcode.org)

(一)前言

今天我们来看一下React Native Api模块LayoutAnimation-布局动画相关介绍以及实例。

刚创建的React Native交流6群:426762904,欢迎各位大牛,React Native技术爱好者加入交流!同时博客右侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!

该模块用于当试图的布局发生变化的时候,自动将该试图运行到新的位置。一个比较通用的使用方法为:在调用setState方法之前调用LayoutAnimation.configureNext()方法进行使用。

(二)常用方法

2.1.configureNext(config,onAnimationDidEnd?)   静态方法,进行计算下一个变化的布局动画。其中参数如下:

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

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

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

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

2.2.create(duration,type,createionProp)  静态方法   该用来创建configureNext的方法

(三)相关属性

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

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

3.4.configChecker:配置检查器

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

3.6.easeInEaseOut

3.7.linear

3.8.spring

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

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

  • caseInEaseOut
  • linear
  • spring
(四)使用实例

上面我们已经完成了基本内容的介绍讲解,下面我们通过一个实例添加以及删除View视图的动画效果。

[注意].如果你在Android设备上面进行测试,那么就需要开启动画设置,iOS设备默认打开。具体代码如下:

// Enable LayoutAnimation under Android
     if (Platform.OS === 'android') {
        UIManager.setLayoutAnimationEnabledExperimental(true)
      }

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

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

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

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

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);

运行效果如下:

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

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

然后在需要进行布局刷新的时候调用即可:

LayoutAnimation.configureNext(CustomLayoutAnimation);
(五)最后总结

今天我们主要学习一下React Native的LayoutAnimation布局动画,该动画效果使用简单并且整体体验还是比较Ok,同时适配Android/iOS双平台。但是Android使用的时候需要开启一下哦~

刚创建的React Native交流6群:426762904,欢迎各位大牛,React Native技术爱好者加入交流!同时博客右侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!

尊重原创,未经授权不得转载:From Sky丶清(http://www.lcode.org/) 侵权必究!

关注我的订阅号(codedev123),每天推送分享移动开发技术(Android/iOS),React Native技术文章,项目管理,程序猿日常点滴以及精品技术资讯文章(欢迎关注,精彩第一时间推送)。

关注我的微博,可以获得更多精彩内容