React Native填坑之旅--LayoutAnimation篇

比较精细的动画可以用 Animated 来控制。但是,在一些简单的界面切换、更新的时候所做的动画里再去计算开始值、结束值和插值器如何运

比较精细的动画可以用 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>

);

}

};

React Native填坑之旅--LayoutAnimation篇

效果就是这样的。

使用的时候也非常简单,只需要在更新 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'

}

});

未登录用户
全部评论0
到底啦