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, springeaseInEaseOut。 当然,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 }); } //...略...};

为了直入主题,部分内容省略。后面有完整的代码。

自定义非常简单,当然限制也不少。只需要指定动画的 durationcreateupdate

另外一个本例与上例不同的地方在于LayoutAnimation可以只在 componentWillUpdate()方法里指定,不需要在点击事件里指定。

完整代码

//@flowimport 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
到底啦